Learn create-react-app

Let's get straight to the point.
If you want to become a React Developer, you should know create-react-app

but...

WHAT IS CREATE-REACT-APP

Create-react-app is a tool built by Facebook to help set up all the tools you need for your React applications.

Before we dive into this fantastic tool, be sure to know Javascript ES6 and to have node.js installed on your computer.

CSS and HTML are also required to build a react app.

Now it's time to open your terminal and type the command npx create-react-app followed by a space and your application's name.

npx create-react-app myapp

Once the installation is completed, you will get the success message in the terminal.

Navigate in your project folder and run the command npm start
to start the development server on localhost:3000.

Open the project folder in your text editor and look at the folder structure created by create-react-app.

If it is your first time using a Javascript library, you can be intimidated by the number of files inside your project folder.

Let’s take a look at the most important files.

THE PACKAGE.JSON FILE

It Contains the dependencies needed to build your project, and it also describes your application, such as the name and the version.
You can easily change the name of your App inside this file.

THE SRC FOLDER

We will put all the JS and CSS files necessary to build the UI and your application's functionality inside this folder.
All the components we want to create must be inside the src folder.

The App.js file is the wrapper component of the App.
It's the container for all other React components.
The index.js file tells React where to render the App component.

THE PUBLIC FOLDER

In the public folder, we will focus on the index.html file.
This file contains plain HTML.
React will inject the code inside the div with the id 'root' via the render function inside the index.js file.

Try to edit the App.js file, and let's see what happens!
Delete the code inside the wrapper div and also remove the logo.svg file from our project and don't forget to remove the import statement in the App.js.

Going back to the browser, you will see a completely blank page

Inside the App.js file, try to write an H1 HTML tag between the div with the class App.

function App() {
  return (
    <div className="App">
     <h1>Learning React</h1>
    </div>
  );
}

React will automatically update the page.

Back to the browser, and you will notice a nice **LEARNING REACT **header displayed on your page

The setup is finished, you are ready to code your App.