ReactJS was invented by Jorden walke at Facebook
in 29 May 2013
What is React.JS?
React.JS is an open-source JavaScript library used for the view layer of the application by Facebook. React allow developers to reusable UI Component that efficiently update, and render based on changes in data providing a responsive and interactive user experience.
Advantage and Features of ReactJS
01: virtual DOM: - React utilizes a virtual DOM (document object Model) that efficiently update and renders changes to the UI. the virtual DOM manipulations,leading to improve performance and a smoother user experience.
Component-Based-Architecture:- React promotes the concept of reusable components making it easier to build and maintain complex UIs. Component can be composed together, allowing for code reusability and modularity
Unidirectional data flow:- React implements uni-directional data flow, where data flows in single direction from parent component to child components. This makes it easier to track and debug data changes, reducing the likelihood of unexpected side effects.
Declarative Syntax:- React Follows a declarative approach allowing developers to describe how UI should look based on its current state. This makes it easier to understand and reason about the UIs
How to create a React App
!important -> Install node.JS in local environment
01: create a Folder with specific name
02: Open that folder on IDE/CMD
03: Check for node & npm Version
04: For Create react-app use command
- npx create-react-app app-name
- cd app-name (cd stands for change directory)
05: To Run your react-application on web browser use
- npm start
Setting up a Development Environment
To setup a development environment for ReactJS follow these steps
01: Install Node.JS: - ReactJS need Node.JS to start installation so must be install node.JS latest version form node official website: https://nodejs.org/en/download/prebuilt-installer
we can download NodeJS for any platform
Note: - Node.js install with npm (node package manager) which is used to manage dependency of your project
02: Create react application: - Once Node.JS install you can create a react project using create-react-app (CRA) command line tool.
Syntax to create-first-react-app
[npx create-react-app app-name]
This command create a folder called app-name
with basic structure and necessary files for react project
03: Navigate to project directory:- Change the directory after creating react app use command
cd app-name
04: Start development server:- To start dev server use command
npm start
This command helps to start development server and launch react-application on the browser
Any changes made to the code automatically triggered reload. allowing us to see the changes in Real-Time
Component in React
There are two types of components are available in React
01: Functional Based Component
02: Class Based Component
01: Functional-Based Component
function functionName() {
return (
.... JSX....
)
}
export default functionName
02: Class-Based Component
class App extends React.Component {
render(){
return(
....JSX.....
)
}
}
export default App
Difference Between Class based and Function Based Component
01: In Class based component we need to inherit Parent pre-define class name is Component and use render pre-define method to return React element
02: In functional based component is plain JavaScript function which any type like declarative function, expressive function and arrow function and functional based component are not use render method
03: Class based component are stateFull
04: Functional Based component are state-less
05: React class based component have a life-cycle
method
06: In Function Based Component no-life cycle method are use
07: We can not use Hooks concept into a Class based component
08: We can use Hooks concept into a Functional based component from React 16.8 version
Comment in React
Note: Outside the return react use JS Comment
and inside return React use JSC comment
{/*
comment here .........
................. */}
Element rendering in React.js
App.js
import React from 'react
import Header from './pages/Header'
export default function App(){
return (
<div>
<h1>Hello students</h1>
<Header/>
</div>
)
}
pages/Header.js
export default function Header(){
return(
<h1>This is render page</h1>
)
}
Same page's element render without import and export
App.js
import React from 'react
import Header from './pages/Header'
export default App(){
return(
<div>
<Header/>
<Jadu/>
<div/>
)
}
function Jadu(){
return(
<h1>Same page's function rendred</h1>
)
}
How to link CSS in React
There are three ways to link CSS in React.js
01: Inline CSS
syntax:
return (
<h1 style= {{color: "red"}}></h1>
)
02: Internal CSS
const deco = {
color: "red",
background: "black"
}
return(
<h1 style={deco}>Some text here...</h1>
)
03: External CSS
01: Create a file like filename.css
import './filename.css'
How to add image into a react-component
01: Placed the image into a specific folder
02: import that image where you want to add
syntax:
import imageName from './logo.png'
<img src={imageName} alt="" width={150}>
How to add multiple statement into return method
JSX (JavaScript & xml) in React.JS
Note: Inside JSX all JavaScript expressions are enclosing with curly bracket {}
There are three ways to represent JSX in React
01: Empty Div Container
syntax:
return (
<div></div>
)
02: JSX Fragment
return (
<></>
)
03: React Fragment
Import React from 'react'
return (
<React.Fragment>
</React.Fragment>
)
Extensions of react.js
.js
.jsx
Props in react
app.js
function App() {
const name = ["Anubhav",21]
const [a,b] = name
return (
<div>
<Header txt={a} text={b} />
</div>
)
}
Header.js
export default function Header(props){
const {text,txt} = props;
return(
<div>
<h1>Lorem ipsum dolor sit amet. <br />
Student name is : {txt} <br />
Student Age is : {text}
</h1>
</div>
)
}
Component Life-cycle method
Phases
01: Mounting Phase
02: Updating Phase
03: Unmounting Phase
Methods
constructor()
render()
ComponentDidMount()
componentDidUpdate()
componentWillUnmount()
deck
By akash tiwari
deck
- 197
