Fundamental concepts of react js

Fundamental concepts of ReactJS
In this article, we will look into the Fundamental concepts of ReactJS well suitable for
beginners. If you are aware of HTML and JavaScript basics then React Native
concepts will be easy to work with React Modules and understand different lifecycle
methods. At Lia Infraservice we create Dynamic Websites. Become a front-end
React JS developer and be a part of our tech-savvy Web App Development
Company in Chennai.
Fundamental Concepts of React JS an Overview?
React is an open-source, front end, JavaScript library used for building User
Interfaces – UI components. It is initially developed by Facebook for a purpose and

maintained by a community of individual developers and companies. It breaks down
complex UIs into small, isolated code called “components”.
Components are independent and reusable. They can either be JavaScript functions
or classes.
The Role of React JS:
Whenever there is a change in any part of the application due to real-time updates or
user input, that part only is loaded asynchronously to reflect the updated state. It
means the respective – “Document Object Model” (DOM) container should be
updated periodically to reflect the changes to the client.
For Example:
When you add a new comment in Facebook, it makes an asynchronous request to
the server to save this comment in the database, and update the DOM to reflect the
current state.
React is not a framework. It is just a library developed by Facebook to solve some
problems that we were facing earlier.
Build your React App With Lia Infraservices – Leading Mobile App
Development Company in Chennai.
1. How to Create a Simple React Application?
Open terminal in visual studio code :
Install create-react-app by running this command in your terminal:
C:UsersLIA>npm install -g create-react-app
Run this command to create a React application :

C:UsersLIA>npx create-react-app myfirstreact
Run this command to execute the React application:
C:UsersLIA>npm start
Hello world Example:
Change the code of App.js from src folder

import React, { Component } from ‘react’;
//import ‘./App.css’;
class App extends Component {
render() {
return (
<div className=”App”>
<h1>Hello World!</h1>
</div>
);
}
}
export default App;
Output:

Note: If u did not use
export default App;
It returns an error
2. Folder structure:
Refer : ReactJS Tutorial - 3 - Folder Structure
What is await in react?
The await operator is used to wait for a Promise. It can only be used inside an async
function. The keyword async is used to make a function asynchronous. The await
keyword will ask the execution to wait until the defined task gets executed.
Javascript Hoisting:
Hoisting is the default behaviour of moving all the declarations at the top of the
scope before code execution.
Ex:
function catName(name) {

console.log(“My cat’s name is ” + name);
}
catName(“Tiger”);
Or
catName(“Tiger”);
function catName(name) {
}
Call function using before or after declaration Does not return any error, because of
hoisting
But, call before function Expression returns error
For an example:
catName(“Tiger”); // Returns undefined, as only declaration was hoisted, no initialization
has happened at this stage
Let catName = function(name) {

}
Var, let and const variables:
var declarations are globally scoped or function scoped while let and const are
block-scoped. var variables can be updated and re-declared within its scope; let
variables can be updated but not re-declared; const variables can neither be updated
nor re-declared. They are all hoisted to the top of their scope.
Component:
● A Component is one of the core building blocks of React.
● In other words, we can say that every application you will develop in React will
be made up of pieces called components.
● Components make the task of building UIs much easier.
● You can see a UI broken down into multiple individual pieces called
components and work on them independently and merge them all in a parent
component which will be your final UI.
Functional Components:
Functional components are simply javascript functions. We can create a functional
component in React by writing a javascript function. These functions may or may not
receive data as parameters
Ex:
Class Components:

The class components are a little more complex than the functional components.
The functional components are not aware of the other components in your program
whereas the class components can work with each other. We can pass data from
one class component to other class components
Ex:
● The component’s name must start with an upper case letter
● The component has to include the extends React.Component statement, this
statement creates an inheritance to React.Component,
● The component also requires a render() method, this method returns HTML.
When you use a constructor function, it should contain super() which executes the
parent component’s constructor function, and your component has access to all the
functions of the parent component (React.Component).

Probs:
● Short form of Properties
● Readonly
● Pass parameters to functions
Ex:
Class-based probs:
App.js
Index.js
(need to use “this” before using probs)
Function-based probs:
App.js

Index.js
(pass probs in function)
State:
State(local container) is a JavaScript object that stores a component’s dynamic data
and determines the component’s behaviour. Because the state is dynamic, it enables
a component to keep track of changing information in between renders and for it to
be dynamic and interactive. The state can only be used within a class component.
Ex:

Output:
Rendering a component:
Ex: code in index.js file
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;

}
const element = <Welcome name=”Sara” />;
ReactDOM.render(element, document.getElementById(‘root’));
Save the css with proper syntax:
Execute the command npm run watch and save the “less file” , css file will be
generated automatically and need to import the css file in app.js to use css
Component Lifecycle:
Each class component has separate life cycle
Phases:
● Mount (Component created and inserted in DOM)
● Update (Undergoes growth by being updated via changes in probs and
state)
● Unmount(where component is removed fro DOM)
Order of Execution:
Case 1: use Parent component

Constructor() -> render() -> componentDidMount()
Case 2: use child component
Constructor() -> Parent Render() -> Child component render -> Parent
componentDidMount()
Case 3: use child componentDidMount
Constructor() -> Parent Render() -> Child component render ->Child
componentDidMount() -> Parent componentDidMount() ( ->Child component
render (This stage occur only when child component contain an continuous
execution function like timer))
Case 4: use componentWillUnmount()
Constructor() -> Parent Render() -> Child component render ->Child
componentDidMount() -> Parent componentDidMount() ->componentWillUnmount()
componentWillMount()
It executes before render(), This method can not be used for the current
version
componentDidUpdate():
Handle the operations when users interact (state and probs change)
componentDidMount():

Server-side communication can be effectively handled in this phase (call default after
constructor execution)
Conclusion:
In recent days React JS is rapidly gaining its popularity. React JS has become the
most accepted Web App Development JavaScript Library. The fundamental concepts
of React JS will help you understand the initial concepts while you build the web
App. You can also read on How to build a Web Application like an Enterprise based
Application.
If you are new to Web Development or looking to develop a Dynamic website with
plain old JavaScript or Jquery?
It is your time to Contact Lia Infraservices – The Skilled Web App Development
Company in Chennai.

Fundamental concepts of react js

Recommended

More Related Content

What's hot (20)

Similar to Fundamental concepts of react js (20)

More from StephieJohn (6)

Recently uploaded (20)

Fundamental concepts of react js