React JS Basic Concepts

Hi guys! This is the beginning of another article series. I'm now looking more on Java Script. This new series is about React JS. Let me explain little bit of React JS.

React is a JavaScript library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. React is mainly focused on Virtual DOM and State Management.

DOM

Application Programming Interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

Virtual DOM

Virtual DOM is an in memory Javascript object representation of the browser DOM. It’s a lightweight JavaScript object which is copy of Real DOM. React selectively renders sub-trees of nodes in the DOM based upon state changes. When the existing virtual dom is changed, react compare the new virtual DOM with the old virtual DOM and apply the changes occured to the new virtual DOM. Then update the real DOM in browser according to the differences. Do not render the whole DOM.

Components

React components are small, reusable pieces of code that return a React element to be rendered to the page. In the following picture, numbered sections are individual components. When we use React JS, UI is fully created using these components.

State

State means simply, the place/store where data of a component is directly saved. This data can be passed to other components as props. State is managed by the component itself. A component cannot change its props, but it can change its state. To do so, it must call this.setState(). Only components defined as classes can have state(Class components). The component which don't have state are called as Functional components.

Props

Usually component has some data. In React we have Parent components Child components. Props are mainly used to pass data from Parent to Child. Later we'll see the way to do it. 

How to install React JS?

You have to install Node JS first, before going for React JS installation. Following command will install React JS globally in your computer(In Linux).

sudo npm install -g create-react-app

How to create a React JS project?

After installing react js, go into the folder where you want to build a project. Then use the below command to create a new project. Ii will create a new folder with the name you provide. Last parameter is the name you provide.

create-react-app TestProject

LET'S BUILD A SIMPLE FRONT-END APPLICATION

I'm going to create an application which takes your height and weight and return the BMI value with the health status.

So we have to create a project folder first. This will include all the React project files generated by the CLI.

create-react-app bmi-calculator

index.html

Find the file in the folder called index.html. Then place this code.

App.css
Find the file in the folder called App.css. Then place this code. This will be responsible for styling.

Usually App.js file is the main JS file invoked after bootstrapping the index.js file. Then the structure in this file will be rendered accordingly. This is the Most Parent component in any React JS component. Data included in the state of this App component can be passed to a parent component. In this project, BmiCalculator is a child of App. In state of App component, I have put the title for the application. State object contains item called title. Then we can pass the title to the BmiCalculator component as a prop. This prop can be accessed in the the Child class; In this case, BmiCalculator  is the child.
{ this.state.title }

App.js

You will get errors since you have not created the components called Navbar and BmiCalculator. So create a folder called components in the src folder.
There are only 4 components in this folder.

1. BmiCalculator
2. Navbar
3. Form
4. Result

Create another folder called assets to store our assets like images. You can put any image in it to be displayed in the UI like the picture above. We will include all the other components in this folder. Now create two new JS files called BmiCalculator.js and Navbar.js. Look at the code below.

Navbar.js
This is the top most component in the UI of the application. Get this code!


BmiCalculator.js

We can access the prop passed in App.js file.  How to print it? Use this code.
{ this.props.title }

Form.js
Form.js is the most important component. It takes the inputs and triggers some events. When we use Events in React, we must bind them before using. Where to bind them? Constructor is the best place for it. handleWeightChange and handleHeightChange are the two events to handle the inputs. After clicking the Get BMI button, getBMI method will be called. When the bmi value in the state is not zero, Result component will be loaded to the DOM. getBMI  method has the logic to decide the health status according to the value of BMI.

Now we have completed our front-end application. You can see a demo from here.
https://bmi-calculator-react.herokuapp.com/

Source Code : https://github.com/SalithaUCSC/BMI-Calculator

I think you could get some basic knowledge in React JS. Download the project and hit npm install to install the missing dependencies. Then hit npm start to run the project. Then it will start in your web browser. Observe this project. This is an ideal project to understand React components, state, props and event handling in a much easier way. I hope you will do it..
More React JS articles will be published soon.

Good Bye guys!