How To Create Your First React JS Project From Scratch

The logo of React JS may remind you of Shaktimaan. React JS is a very popular JavaScript library and it is used to create SPA( Single Page Web Application). React is used to create interactive UIs. React is an open-source JavaScript library and developed by Facebook. In this tutorial, we will learn how to create a new React JS project from scratch.

Install Required Software:

Our prime requirement is NodeJS because we are going to use the NodeJS package manager to create the React project. So download and install the NodeJS using the below link.

nodejs.org/en

Create React Project:

We can create a new React project using the following command on your terminal or command prompt.

npx create-react-app demo-proj

1. npx create-react-app => It is a standard command for creating a new React project.
2. demo-proj => It is the project name. You can give your desired project name here.

Preview Project:

Go to the project folder using the terminal/ command prompt.

cd demo-proj

Use the following command in the terminal/ command prompt to generate the preview of this project.

npm start

It will compile and load the preview on port number 3000. The React project ships with an auto-reload feature. It means, if you change anything in the code, it will automatically compile and reload the page when you save the changes. It is a cool feature. All modern JavaScript libraries/frameworks are using this feature.

Structure of Project:

The structure of the React project is given below.

1. Under the src folder, we write our code. We will create all our new components under this folder.
2. The App.js and App.css (JavaScript and CSS pair)are considered as components.
3. The App.js is mixed with both JavaScript and JSX( Like HTML).
4. The App.js is the default landing page. We can modify this.
5. The node_modules folder contains all the needed library files.

Bind Variables:

Let’s modify the App.js file with variables. The App() is a function in the App.js. So we can create a variable using let, var, const.

import logo from './logo.svg';
import './App.css';

function App() {
    let name = "Shaktimaan"
    return ( <div className = "App" >

         </div>
    );
}

export default App;

Bind the created variable inside the JSX( HTML ) using the single opening and closing curly brace.

import logo from './logo.svg';
import './App.css';

function App() {
    let name = "Shaktimaan"
    return ( 
      <div className = "App" >
        Hello { name } 
      </div>
    );
}

export default App;

Save and preview the change in the browser. The changes are applied automatically.

Tips:

1. Install ES7 React/Redux/GraphQL/React-Native snippets plugin. It is used to generate the React snippets and commands.

2. Install Prettier - Code formatter plugin. It will format the JSX code. By default, the JSX codes are not aligned properly in the VS Code editor. So installing this plugin will solve the JSX formatting problem.

Summary:

In this tutorial, you learned how to create a new React project from scratch and how to preview the project aswell. And we learned the structure of the React project and where to write our code. And learned few useful plugins to kickstart the React project.

I hope this article is helpful. Thank you for reading this article.