Contact Information

No. 1101, 24th Main, JP Nagar, 1st Phase, Bangalore 560 078

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
NOTE: If you get permission error, then try running the command using sudo, later you have to change permissions of the folder.
sudo 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.

Chapter 1 - Introduction to React

Chapter 3 - Understanding ReactJS Components



Leave a Reply

Your email address will not be published. Required fields are marked *