SlideShare a Scribd company logo
5
Most read
7
Most read
8
Most read
Fundamental Concepts of React JS for
Beginners
Let’s look into the Fundamental concepts of React Js for beginners by Lia
Infraservices – The top Mobile App Development Company in Chennai. React is
a front-end open source JavaScript library for creating user interfaces (UI)
components. Complex user interfaces are broken down into small “components,”
which are separate pieces of “reusable codes”.
The components are self-contained and reusable. They can be “JavaScript
functions” or “JavaScript classes”.
Class components provide certain key functions that function components lack,
whereas function components are mostly simple JavaScript.
/React is designed around Reusable concepts
1. Getting started with React Js:
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:
If you did not “export default App”
export default App;
It returns an error.
2. Folder structure:
React JS 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 a 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) {
console.log(“My cat’s name is ” + name);
}
Call function using before or after declaration Does not return any error, because of
hoisting
But,but call before function Expression returns error ex:
catName(“Tiger”); // Returns undefined, as only declaration was hoisted, no
initialization has happened at this stage
Let catName = function(name) {
console.log(“My cat’s name is ” + 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.
3. 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.
A) 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
Example:
B) 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)
4. State:
State(local container) is a JavaScript object that stores a component’s dynamic data
and determines the component’s behaviour. Because state is dynamic, it enables a
component to keep track of changing information in between renders and for it to be
dynamic and interactive. State can only be used within a class component.
Ex:
Output:
5) 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
5.a) 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)
5.b) 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 used for current version
componentDidUpdate():
Handle the operations when user interact (state and probs change)
componentDidMount():
Server side communication can be effectively handled in this phase (call defaultly
after constructor execution)
Conclusion:
Although this article does not cover everything that you need to know about React
Js. The Fundamental concepts of React JS for beginners by Lia Infraservices –
Leading Mobile App Development Company in Saudi Arabia provides a good
starting point for diving into the React JS code.
Don’t forget to check the official React JS for more in-depth information.

More Related Content

PDF
Le Wagon - React 101
PPTX
An Intro into webpack
PPTX
React workshop
PPT
PPTX
React/Redux
PPT
Advanced JavaScript
PPTX
PPTX
react-slides.pptx
Le Wagon - React 101
An Intro into webpack
React workshop
React/Redux
Advanced JavaScript
react-slides.pptx

What's hot (9)

PPTX
React hooks
PDF
Getting Started with NgRx (Redux) Angular
PDF
React
PDF
Introduction to Unit Testing with PHPUnit
DOCX
Java Code for Sample Projects Inheritance
PPTX
React hooks
PPTX
React JS Interview Question & Answer
PDF
You code sucks, let's fix it
PPTX
React Hooks
React hooks
Getting Started with NgRx (Redux) Angular
React
Introduction to Unit Testing with PHPUnit
Java Code for Sample Projects Inheritance
React hooks
React JS Interview Question & Answer
You code sucks, let's fix it
React Hooks
Ad

Similar to Fundamental Concepts of React JS for Beginners.pdf (20)

PDF
Fundamental concepts of react js
PPTX
Dyanaimcs of business and economics unit 2
PPTX
React JS: A Secret Preview
PPTX
react-slidlkjfl;kj;dlkjopidfjhopijgpoerjpofjiwoepifjopweifjepoies.pptx
PPTX
Adding a modern twist to legacy web applications
PPTX
TRAINING pptt efwoiefo weoifjoiewjfoifjow.pptx
PDF
react-slides.pdf
PDF
react-slides.pdf gives information about react library
PPTX
ReactJS (1)
PPTX
React Hooks Best Practices in 2022.pptx
PPTX
React - Start learning today
PPTX
ReactJS.pptx
PDF
3 Simple Steps to follow to Create React JS Components
PDF
React js
PPTX
class based component.pptx
PDF
Enhance react app with patterns - part 1: higher order component
PPTX
React and Flux life cycle with JSX, React Router and Jest Unit Testing
PPTX
PPT
PDF
Workshop 23: ReactJS, React & Redux testing
Fundamental concepts of react js
Dyanaimcs of business and economics unit 2
React JS: A Secret Preview
react-slidlkjfl;kj;dlkjopidfjhopijgpoerjpofjiwoepifjopweifjepoies.pptx
Adding a modern twist to legacy web applications
TRAINING pptt efwoiefo weoifjoiewjfoifjow.pptx
react-slides.pdf
react-slides.pdf gives information about react library
ReactJS (1)
React Hooks Best Practices in 2022.pptx
React - Start learning today
ReactJS.pptx
3 Simple Steps to follow to Create React JS Components
React js
class based component.pptx
Enhance react app with patterns - part 1: higher order component
React and Flux life cycle with JSX, React Router and Jest Unit Testing
Workshop 23: ReactJS, React & Redux testing
Ad

More from StephieJohn (6)

PDF
Content Writing Tips For Beginners.pdf
PDF
Top 15 Mobile App Design Trends in 2022.pdf
PDF
Types of Animation in Mobile App Development.pdf
PDF
Content Writing Tips For Beginners.pdf
PDF
Comparison Between React Vs Angular.pdf
PDF
How to add a new blog post in WordPress.pdf
Content Writing Tips For Beginners.pdf
Top 15 Mobile App Design Trends in 2022.pdf
Types of Animation in Mobile App Development.pdf
Content Writing Tips For Beginners.pdf
Comparison Between React Vs Angular.pdf
How to add a new blog post in WordPress.pdf

Recently uploaded (20)

PDF
DOC-20250806-WA0002._20250806_112011_0000.pdf
PPTX
New Microsoft PowerPoint Presentation - Copy.pptx
PDF
A Brief Introduction About Julia Allison
PDF
Deliverable file - Regulatory guideline analysis.pdf
DOCX
Business Management - unit 1 and 2
PDF
WRN_Investor_Presentation_August 2025.pdf
PDF
Stem Cell Market Report | Trends, Growth & Forecast 2025-2034
PDF
pdfcoffee.com-opt-b1plus-sb-answers.pdfvi
PDF
BsN 7th Sem Course GridNNNNNNNN CCN.pdf
PPTX
AI-assistance in Knowledge Collection and Curation supporting Safe and Sustai...
PPT
Data mining for business intelligence ch04 sharda
DOCX
unit 2 cost accounting- Tender and Quotation & Reconciliation Statement
PPTX
Amazon (Business Studies) management studies
PPTX
5 Stages of group development guide.pptx
PDF
Reconciliation AND MEMORANDUM RECONCILATION
PDF
Traveri Digital Marketing Seminar 2025 by Corey and Jessica Perlman
PDF
Chapter 5_Foreign Exchange Market in .pdf
PDF
20250805_A. Stotz All Weather Strategy - Performance review July 2025.pdf
PDF
MSPs in 10 Words - Created by US MSP Network
PPT
340036916-American-Literature-Literary-Period-Overview.ppt
DOC-20250806-WA0002._20250806_112011_0000.pdf
New Microsoft PowerPoint Presentation - Copy.pptx
A Brief Introduction About Julia Allison
Deliverable file - Regulatory guideline analysis.pdf
Business Management - unit 1 and 2
WRN_Investor_Presentation_August 2025.pdf
Stem Cell Market Report | Trends, Growth & Forecast 2025-2034
pdfcoffee.com-opt-b1plus-sb-answers.pdfvi
BsN 7th Sem Course GridNNNNNNNN CCN.pdf
AI-assistance in Knowledge Collection and Curation supporting Safe and Sustai...
Data mining for business intelligence ch04 sharda
unit 2 cost accounting- Tender and Quotation & Reconciliation Statement
Amazon (Business Studies) management studies
5 Stages of group development guide.pptx
Reconciliation AND MEMORANDUM RECONCILATION
Traveri Digital Marketing Seminar 2025 by Corey and Jessica Perlman
Chapter 5_Foreign Exchange Market in .pdf
20250805_A. Stotz All Weather Strategy - Performance review July 2025.pdf
MSPs in 10 Words - Created by US MSP Network
340036916-American-Literature-Literary-Period-Overview.ppt

Fundamental Concepts of React JS for Beginners.pdf

  • 1. Fundamental Concepts of React JS for Beginners Let’s look into the Fundamental concepts of React Js for beginners by Lia Infraservices – The top Mobile App Development Company in Chennai. React is a front-end open source JavaScript library for creating user interfaces (UI) components. Complex user interfaces are broken down into small “components,” which are separate pieces of “reusable codes”. The components are self-contained and reusable. They can be “JavaScript functions” or “JavaScript classes”. Class components provide certain key functions that function components lack, whereas function components are mostly simple JavaScript. /React is designed around Reusable concepts 1. Getting started with React Js: 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
  • 2. 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 {
  • 3. render() { return ( <div className=”App”> <h1>Hello World!</h1> </div> ); } } export default App; Output: If you did not “export default App” export default App; It returns an error. 2. Folder structure: React JS 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 a 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
  • 4. catName(“Tiger”); function catName(name) { console.log(“My cat’s name is ” + name); } Call function using before or after declaration Does not return any error, because of hoisting But,but call before function Expression returns error ex: catName(“Tiger”); // Returns undefined, as only declaration was hoisted, no initialization has happened at this stage Let catName = function(name) { console.log(“My cat’s name is ” + 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. 3. 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. A) 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 Example: B) 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:
  • 5. ● 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
  • 6. Index.js (need to use “this” before using probs) Function based probs: App.js Index.js (pass probs in function)
  • 7. 4. State: State(local container) is a JavaScript object that stores a component’s dynamic data and determines the component’s behaviour. Because state is dynamic, it enables a component to keep track of changing information in between renders and for it to be dynamic and interactive. State can only be used within a class component. Ex: Output: 5) Rendering a component: Ex: code in index.js file function Welcome(props) { return <h1>Hello, {props.name}</h1>;
  • 8. } 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 5.a) 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) 5.b) 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 used for current version componentDidUpdate(): Handle the operations when user interact (state and probs change) componentDidMount():
  • 9. Server side communication can be effectively handled in this phase (call defaultly after constructor execution) Conclusion: Although this article does not cover everything that you need to know about React Js. The Fundamental concepts of React JS for beginners by Lia Infraservices – Leading Mobile App Development Company in Saudi Arabia provides a good starting point for diving into the React JS code. Don’t forget to check the official React JS for more in-depth information.