React is a JavaScript library building user interface
Developed Facebook and released in 2013
Mainly it focuses on reusable components
It is component-based arch
Spa
Setting up
1. Node ? npm? (node package maanger)
2. npx / npm (you create react by using one of two ways which mentioned
here)
3.
-------- npx
npx create-react-app <project_name>
4. -- npm
npm install create-react-app -g - first install
create-react-app <project_name> - create project
Set-ExecutionPolicy -Scope Process -ExecutionPolicy(use this if you are
getting security error)
5. Navigate to project app
cd project_name
6. npm start
http://localhost:3000.
Whenever we hit the above url the development server defaultly looks
for index.js, inside index.js we asked to render </APP> i.e.., app
component, then the server looks for app component nothing but app.js
Lets create a component called OverView.js and try to render it
1. create a Overview.js component in the src directory
2. import React from "react";
3.
4. function Overview() {
5.
6. return(
7.
8. <div>
9. <h1> What is React?</h1>
10. <p>React is a JavaScript Library for building
user interface</p>
11. </div>
12.
13. );
14.
15. }
16.
17. export default Overview;
2. export the Overview component by adding a line export default
OverView;
3. then import and use the above the component in app.js
App.js
import logo from './logo.svg';
import './App.css';
import Overview from './Overview';
function App() {
return (
<div className="App">
<h1>hello this is my first page</h1>
<Overview></Overview>
</div>
);
}
export default App;
JSX Basics:
JavaScript XML(JSX) is a syntax extension for JavaScript, used with react to
describe what the UI should look like
1. Syntax:
const element = <h1>Hello,MRV Tech!</h1>;
2. Embedding expression in JSX
const name=’mrv tech’;
const ele= <h1>Hello, {name}</h1>
3. JSX is an expression
function greet(param)
{
If(param)
{
return <h1>Hello, {param} </h1>}
} return <h1> Hello, Guest ! </h1>}
4. JSX attributes:
const element= <img src={param.url} alt={param.name}/>
5. JSX Children
Const element={
<div>
<h1>hello !</h1>
<h2> good to see you</h2>
</div>
}
Component and Props:
They are two main types of components are in React
Class components
1. These are ES6 classes that extend from ‘React.Component’ and must
include a `render()` method that returns JSX.
Class ClassComponentDemo extends Component
{
render(){
return(
<div><h1>Hello this is from class component</h1></div>
);}}
export default ClassComponentDemo
Functional components
1. Functional Components are simpler and are written as functions
2. They take props as arguments and return jsx
Function component created by using arrow function
const FunctionComponentDemo= () => {
return(
<div>
<h1>Hello this is from functional component</h1>
</div>
);
}
Normal function component
const FunctionComponentDemo(){
return(
<div>
<h1>Hello this is from functional component</h1>
</div>
);
}
Prospective and we make comparisons (Class vs Functional Components)
1. Syntax
Class components use ES6 class syntax and extend ‘React.Component’
Functional components use plain javascript functions
2. State Management
Class components can hold and manage state using ‘this.state’ and
this.setState()
Functional components use hooks like useState to manage state
3. LifeCylce Methods
Class components have lifecyle methods
componentDidMount, componentDidUpdate, ComponentWillMount
Functional components can manage lifecycle using useEffect
4. Performance
Generally functional components were considered as less performant
than class components, but with the introduction of React hooks and
optimizations and this difference has largely shown to use functional
components
Conclusion:
While both class and functional components can accomplish the same
tasks, but functional components are now generally preferred due to their
simplicity and the power of hooks
Functional components with props
import React from 'react'
function PropsFunDemo(props)
{
return <h1>Hello, {props.name}</h1>
}
export default PropsFunDemo;
Class components with props
import React,{ Component } from "react";
class PropsClassDemo extends Component
{
render()
{
return <h1>Hello, {this.props.rollNumber}</h1>
}
}
export default PropsClassDemo;
Passing the props from child to parent
