React is a Open - Source Frontend JavaScript library which is used for building user interface especially for Single Page Applications.
- It is used for web and mobile apps.
- React was created by Jordan Walke, a software engineer working for Facebook .
- React was first deployed on Facebook's News feed in 2011 and on Instagram in 2012.
Specific part of code which we can use .
- Why use Component ? → Every React.js component acts separately, so you can change one section of the app without needing to update everything.
- Types of Component ?
→ A Class Component must include the
extends React.Component
statement. This statement creates an inheritance to React.Component, and gives your component access to React. Component's functions.
The component also requires a render()
method, this method returns HTML.
class Car extends React.Component {
render() {
return`<h2>`Hi, I am a Car!`</h2>`;
}
}
→ A Function component also returns HTML, and behaves much the same way as a Class component, but Function components can be written using much less code, are easier to understand, and will be preferred in this tutorial.
function Car() {
return`<h2>`Hi, I am a Car!`</h2>`;
}
-
It allows us to write HTML inside javascript and place them in the DOM without using functions like appendChild() or createElement().
-
As started int the official docs of React, JSX provides syntactic sugar for React.createElement () function.
-
JSX makes it easier to write and add HTML in React. With JSX :-
const myElement =
<h1>
I Love JSX!</h1>
;const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
WITHOUT JSX :-
const myElement = React.createElement('h1', {}, 'I do not use JSX!');
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
- Props are arguments passed into React components.
- Props are passed to components via HTML attributes.
- Props allow us to pass data into the components.
props
stands for properties.
- Why use props ? The data can be passed from one component to another component using these props, similar to how the arguments are passed in a function.
- The state is a built-in React object that is used to contain data or information about the component. State can only be used in class components
- Just like HTML DOM events, React can perform actions based on user events.
- React has the same events as HTML: click, change, mouseover etc.
React events are written in camelCase syntax:
onClick
instead of onclick
.
React event handlers are written inside curly braces:
onClick={shoot}
instead of onClick="shoot()"
.
<button onClick={shoot}>Take the Shot!</button>
<button onclick="shoot()">Take the Shot!</button>
Put the shoot
function inside the Football
component:
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
An arrow function expression is a compact alternative to a traditional function expression :-
- Arrow functions don't have their own bindings to
this
,arguments
, orsuper
, and should not be used asmethods
. - Arrow functions cannot be used as constructors. Calling them with
new
throws aTypeError
They also don't have access to thenew.target
keyword. - Arrow functions cannot use
yield
within their body and cannot be created as generator functions.
hello = function() {
return "Hello World!";
}
hello = () => {
return "Hello World!";
}
The handling of this
is also different in arrow functions compared to regular functions.
In short, with arrow functions there are no binding of this
.
In regular functions the this
keyword represented the object that called the function, which could be the window, the document, a button or whatever.
With arrow functions the this
keyword always represents the object that defined the arrow function.
In my words, life - cycle methods is like A Person :-
- Born
- Study
- Job
- Marriage
- Death
These methods one person will followed by same as in life cycle methods there are some life cycle methods in React Like:-
1. Component banta hai
2. Update hota hai
3. Kuch data ko recieve krta hai
4. or phir vo unmount hota hai
These methods are called in the following order when an instance of a component is being created and inserted into the DOM:
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
This method is called when a component is being removed from the DOM:
componentWillUnmount()
These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.
static getDerivedStateFromError()
componentDidCatch()
- Hooks allow function components to have access to state and other React features.
-
Although Hooks generally replace class components, there are no plans to remove classes from React.
- Example shown in the BasixHooks.js file.
There are 3 rules for hooks:
- Hooks can only be called inside React function components.
- Hooks can only be called at the top level of a component.
- Hooks cannot be conditional
- The React
useState
Hook allows us to track state in a function component.
- We initialize our state by calling
useState
in our function component.
useState
accepts an initial state and returns two values:
- The current state.
- A function that updates the state.
- The
useState
Hook can be used to keep track of strings, numbers, booleans, arrays, objects, and any combination of these! - We could create multiple state Hooks to track individual values.
When state is updated, the entire state gets overwritten.
What if we only want to update the color of our car?
If we only called setCar({color: "blue"})
, this would remove the brand, model, and year from our state.
We can use the JavaScript spread operator to help us.
Because we need the current value of state, we pass a function into our setCar
function. This function receives the previous value.
We then return an object, spreading the previousState
and overwriting only the color.
- The
useEffect
Hook allows you to perform side effects in your components. - Some examples of side effects are: fetching data, directly updating the DOM, and timers.
useEffect
accepts two arguments. The second argument is optional.useEffect(<function>, <dependency>)
useEffect
runs on every render. That means that when the count changes, a render happens, which then triggers another effect.