The best way to learn React is to re-create Hello World but for React. Let’s learn all there is to know about building a simple Hello World app in React!
What We’re Building
This tutorial will thoroughly explain everything there is to know about creating a new React app in the quickest way possible. If you’re someone who wants to learn how to spin up a brand new React app, then this tutorial is for you.
I’ve summarized the most important details for each step under each of the headings so you can spend less reading and more coding.
Generate a New React App Using Create React App
- Create React App (CRA) is a tool to create a blank React app using a single terminal command.
- CRA is maintained by the core React team.
Configuring a _modern _React app from scratch can be quite intricate, and requires a fair amount of research and tinkering with build tools such as Webpack, or compilers like Babel.
Who has time for that? It’s 2019, so we want to spend more time coding and less time configuring!
Therefore, the best way to do that in the React world is to use the absolutely fantastic Create React App tool.
Open up your terminal and run the following command:
Terminal
npx create-react-app hello-world
This generates all of the files, folders, and libraries we need, as well as automatically configuring all of the pieces together so that we can jump right into writing React components!
The success screen after scaffolding a new React app with Create React App. Let’s get hacking some React components together!
Once Create React App has finished downloading all of the required packages, modules and scripts, it will configure webpack and you’ll end up with a new folder named after what we decided to call our React project. In our case, hello-world.
Open up the hello-world directory in your favorite IDE and navigate to it in your terminal. To do that, run the following command to jump in to our Hello World React app’s directory.
Terminal
cd hello-world
#tutorials #beginner react tutorials #react #react app #javascript
