How to Create and Run First ReactJS application

ReactJS is a front-end JavaScript library that is used to building the Interface of the application. Nowadays, We can develop a web and mobile applications interface in reactJS. In this tutorial, let’s see an example to create and run the first reactJS application.

Whats is ReactJS?

React is a JS library that is used to design or build the interface of web and mobile applications. It builds a faster and interactive user interface. ReactJs has components that divide or page divisions into multiple layers or parts.

The development framework is designed on the basis of MVC. Also, it makes our HTML code reusable. there are more many features are available in reactJS. If you are new let’s have the look at the reactJS tutorial.

React JS is a Javascript library and not a framework. React Js is responsible to create a Single Page Application along with an awesome UI. It is a popular framework.

  • It is an Open Source Javascript Library.
  • The whole React Js works on the principle of the component-based front end.
  • It has a great community over the internet.

An application created in React JS is consists of multiple components. The component here returns the JSX code that tells us what should be rendered by the browser. JSX is nothing but the Syntax Extension to JavaScript code.

Why learn React JS?

Now, the question is when we have HTML, CSS, and JS at the UI layer. So, why one should learn React JS. The answer we will see here.

  • The main reason for learning lies in the fact that React JS allows us to create reusable UI components.
  • It helps us to create big application can change data without having to reload the web page. (for eg, go to youtube and navigate to different links and check whether the page is getting loaded or not)
  • You can integrate React JS with Spring Boot Application also. (this we will see in the coming article :-))
  • It has a smooth and faster performance due to virtual DOM(Document Object Model is the logical structure of the document).
  • There are lots of websites such as Netflix, Facebook, Dropbox, Yahoo mail and etc. using React JS.

Create the first ReactJS application.

As we know it’s a JavaScript-based library. It requires node environments. Setup Environment for ReactJS Development. 

Steps:

  • Create a folder “REACTJS TUTORIAL”.
  • Open your ide VsCode.
  • Open the newly created folder into VsCode.
  • Open the terminal and Enter the command npx create-react-app to create a new react application
npx create-react-app reactexampl

  • It will create a sample application with all the required folders and structures.

Run ReactJS application.

Move to terminal and enter a command and move to application folder cd app_name and enter npm start

You can now view reactloginexample in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.107:3000     

Note that the development build is not optimized. 
To create a production build, use npm run build.

Open any web browser in your machine and navigate to the URL http://localhost:3000 It will launch the application.

ReactJs Project architecture

If you see the above ReactJS application architecture image. There are many autogenerated folders. Let’s understand the use of them one by one.

node_modules folder into ReactJS application

node_modules is a folder that contains all the npm libraries that are required for the application. when we enter npm install _lib_name. All the local installations will store in the node_modules folder.

public folder into ReactJS application

This is an optional folder that is created automatically when we create a new react app. public folder contains HTML, images, and other external resources of the application.

src folder into ReactJS application

src is the main playground for the ReactJs developer where we design MVC architecture and start the development it contains many files by default when we create a first react app.

  • App.css
  • App.js
  • App.test.js
  • index.css
  • index.js
  • reportWebVitals.js
  • setupTests.js
  • package-lock.json
  • package.json

Package.json

package.json is the most important file that contains dependencies of the applications. if you know java development it is the same as pom.xml in the java maven project. it has some command dependencies like "react", "react-dom", "react-scripts"

History of React JS

Before getting started with React JS in-depth, first, let us see the history of the development of React JS library. The man behind the awesome React JS library is none other than Jordan Walke who was a Software Engineer at Facebook.

  • React JS was first deployed on Facebook’s News Feed in 2011.
  • Later, Instagram deployed React JS in 2012.
  • With time, Facebook decided to make it an Open Source in May 2013.
  • Later many versions came of React JS such as React 16.0, 16.8. The current version is React v17.0.

To know more about the advancement in the version of React Js you can check the GitHub link https://github.com/reactjs

Features of React JS

Now, let us see the features of React JS due to which it has become a popular framework nowadays.

  • It is easy to learn. If you have a basic understanding of HTML, Javascript then you are good to go.
  • JSX is one of the features of React JS where we can write HTML structure with Javascript code.
  • It uses a virtual DOM structure instead of real DOM in the memory, which again increases the performance of an application.
  • It consists of components that are reusable, nested, and so on.

Thus, this was all about the overview of React JS which is a Javascript library and is used to build a user interface.