How to create a simple React App

Create a simple React Application In this tutorial, we will start with our front end library of MERN stack i.e. React. We will understand the command to create the default react app. And we will read about the auto-created react app and the components that React is created on.

What Is React?

React is a JavaScript library that is used for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in the application. It has some advantages over the default front end stack i.e. only HTML, CSS, and JavaScript.

Advantages:-

  1. Application structure is created using small components.
  2. This react architecture is based on composition over inheritance.
  3. This gives an advantage for the maintenance and up-gradation of the UI.
  4. This component ensures fast rendering which makes the web application very fast.
  5. It is search engine friendly
  6. React can also render on the servers using node js.
  7. And also can be rendered on mobile apps using react-native.

Create First React App

Steps:-

  • Create a root directory and open code editor with an integrated terminal or open command line terminal.
  • Open the root directory in the command line and use command npx create-react-app “name_of_app” 
    PS D:\work\Codebun\React> create-react-app first_app
  • It will start downloading all the dependencies and will create a folder structure.
  • To start the app cd in the first_app and use the command npm start. 
    PS D:\work\Codebun\React\first_app> npm start
  • This will launch a default react app in the localhost://3000 by default.

Note: – Node must be installed to create react app and it will take a bit time to download and launch an app for the first time.

Explaining the Folder structure

  • Inside the first_app folder, Three more folders are created. They are 1)node_modules 2)public 3)src
  • A package.json file along with package-lock.json file is created inside the folder firt_app.
  • A .gitignore file is also created to ignore some files while making commits.
  • A readme file is also created for the instruction and explanation purpose.

The node_modules folder consists of all the dependencies and libraries that are pre-installed with the react app. Src folder

  • This folder consists of the base file of react app.
  • The app.js file is the core in which we render the components and app.cs is the file where we write the CSS for the whole app.
  • All the other files like service worker or test files are present here.
  • It also consists of the rotating react logo in SVG format.

Public folder

  • This file consist of all the public files that are will be rendered on the web page for the client.
  • The main file is index.html which has all the boilerplate code of HTML with a div of root id which will render all the components.
  • It also consists of the logo’s used in titles and other dependencies files which is not to be touched.