ReactJS Environment Setup And Component Creation

ReactJS is a JavaScript library maintained by Facebook and Instagram. It is mainly used to develop the UI. ReactJS is component based so that it provides readability of DOM component.

Features of ReactJS.

1. Speed
2. Simplicity
3. Scalability

Points which we will cover in this article

1. ReactJS Environment Setup
2. How to make React component

Environment Setup

Tools required for ReactJS environment

1. Node.js
2. Visual Studio Code

Steps to Setup ReactJS Environment

Install Node.js

1. Create a directory for React.js App.
2. Open the command prompt.
3. Create a directory for React.js App.
4. Open the command prompt.

Go to Reactjs directory location - see screenshot.

 

Type command for React environment.

 

Npm install Create-react-app -g

-g is representing that the installation type is global.

Second command - Create-react-app ApplicationName

Go to AppliactionName directory and type npm start.

 

After starting your first React application, you will get the default screen on the browser. 

 
Create component in ReactJS

React component is a reusable independent piece of code.

You can see the default structure of ReactJS application in the below screenshot.

 

I will keep the only required file for basic component practice so that I delete an extra file from this structure which is highlighted by red rectangular box 2.

 

Now. the application folder structure should look like this.

Component code screenshot

 

Code text  

import React from 'react';
import ReactDom from 'react-dom';
class Hello extends React.Component {
        render() {
            return ( < h1 >Hello < /h1>)
            }
        }
        ReactDom.render( < Hello / > , document.getElementById('root'));

In the above code, we are importing React and Reactdom. 

In there, component render() method is the most important one. In render method, we will return what we want to show on the page.

ReactDom.Reander() is specifying where on the page we want the app component to be rendered. In the ReactDom.Reander method we pass, the first argument passes as component name like <Hello/>and second is Id of the HTML tag.