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
create-react-app - 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.
Here is the link to create a new CodeSandbox project: https://codesandbox.io/s. You just visit the page, click React and start building things right away. There are many other options, and CodeSandbox is an awesome tool for all things JavaScript.
In this project I’ll use CodeSandbox to host the example code.