In this tutorial, we are going to explain how to install React using create-react-app and execute your first react application. Before we start you will need nodeJS and NPM.

Requirements

Node >= 8.16.0
NPM >= 5

Create React App

create-react-app lets you get started within seconds without any configurations. It is the easiest way to run your react-project quickly. It lets you focus on code, not on build tools and configurations. Under the hood, it uses Webpack, Babel, ESLint, and other projects to power our app.

Installation

Now let’s create our first app. You need to execute the following command in your terminal. It will take some time to install. Name of our first project will be my-first-app.

npx create-react-app my-first-app

You will get the following message once the installation is completed and successful.

Now change directory to newly created react app folder my-first-app

cd my-first-app
Start the server and execute your first react app in the browser. Type the following command in the terminal.

npm start
It will automatically redirect you to browser and URL will be http://localhost:3000/. You will get the following screen.

Folder Structure

Throughout this course, we will use visual studio code as our code editor. You can easily install this from https://code.visualstudio.com/docs/setup/setup-overview and, it is FREE.

Now open the folder my-first-app in visual studio code. Important react application files and folders are:

• node_modules – contains all the necessary React and third-party libraries.
• public – contains public assets of applications and index.js file
• src – contains App.css, App.js, index.js ..etc files.
• package-lock.json
• package.json – holds project metadata and project dependencies.
• .gitignore – tells git which files (or patterns) it should ignore.

For the project to build, these files must exist with exact filenames:

• public/index.html – Page template;
• src/index.js – JavaScript entry point.

Now open the file src/App.js. Change the following line

Edit src/App.js and save to reload.

To

Welcome to Tech diagonal tutorials

save the file and open the browser. You can see the edited welcome message in the browser.

Exercise: Change the Image from logo.svg to any other image of your choice

Understanding the Code:

App.js
This file has import statements, export statement and a react component. Now it is time for you to understand each of these in detail.

Importing React:

import React from 'react'; //Importing default export
import logo from './logo.svg'; //Importing logo.svg as logo
import './App.css'; //Importing css file

These are the import statements. Every module will have at most one default export statement and you can import that module using the following syntax.

import MY_NAME from ADDRESS

Exporting module in React:

export default App;

This is the export statement. As you already know every module will have one default export statement. To export, you should use the syntax as follows

export default MY_NAME

React Component:

In this example, App is a React component. Here function App returns the <div> tag with the className = “App”.

function App() {
   return (
       

           

           <img src={logo} className="App-logo" alt="logo" />
           

               Welcome to Tech diagonal tutorials
           
           
                   Learn React
       	   
           
       
   );
}

index.js

index.js file is a JavaScript entry point. This filename should not be changed. This file has import statements and ReactDOM.render method.

ReactDOM.render(
,
document.getElementById('root') //index.html has a container with the name root
);

This renders a react element into a container. In our case App is a react element and root is a container. Syntax of render is as follows

ReactDOM.render(element, container)

App.css

This file contains CSS classes.