Welcome to the first project in the course.
This project is perfect if you are totally new to React. I will go in details with every single thing we do, so that in the next projects you’ll be up to speed with the basics.
What we’ll build
In this first project we’ll build a very simple example of a counter.
We are going to have a simple web page with 4 buttons, and a place where we show the count.
The count starts at zero, and the buttons we’ll add will increment the count by 1, 10, 100, 1000 depending on which button is pressed.
We’re going to associate one of those values to a button, and we will show it in the button text.
What does this project teach you
From this project you will learn to use
create-react-app, you will write your first Components, your first JSX, you’ll work with props and events.
Those are the building blocks for complex web applications too, so before getting into the code, I want you to open those pages and read the details. I made them available on my blog:
- Introduction to
- Introduction to React components
- Introduction to JSX
- Introduction to Props
- Introduction to React Events
I will not repeat the theory in the course, as I want to keep it practical.
Bootstrap a React app using create-react-app
With those bits of theory in mind, we can now start creating our app.
I’m going to use CodeSandbox in my tutorial because it’s built upon
create-react-app. You can choose to develop locally, or use CodeSandbox.
The choice is yours.
If you choose to work locally, just start a new React app by using the command
npx create-react-app counter-react, then go into that folder and run
npm run start.
In this project I’ll use CodeSandbox to host the example code.