Introduction to React –
React:
1.React is a JavaScript library used to build the user interface for web applications.
2.React was initially developed and maintained by the people at Facebook, which was later used in their products (WhatsApp & Instagram, Netflix, Amazon and Flipkart ).
3.Now it is basically an open source project with an active developer community where anyone could contribute towards upgrading React with new features.
4.Some of the popular websites like Netflix, Airbnb, Yahoo!Mail, KhanAcademy, Dropbox and many more use React to build their User Interfaces.
5.Nowadays modern websites are built using MVC which basically stands for (model view controller) architecture. React is the ‘V’ in the MVC which stands for view, whereas the architecture is provided by Redux or Flux. React native is used to develop mobile apps, the Facebook mobile app is built using React native.
For Free Demo classes Call: 8237077325
Registration Link: Click Here!
6.It is basically a javascript library used for creating User Interfaces.
7.React basically creates attractive UI using the concept of Components.
8.A Component in React is nothing but a Javascript Function or a Javascript Class which we basically call as Functional Components and Class Components respectively.
9.React library really makes it painless for the front-end developers to create interactive and productive UIs.You basically design simple views for each component present in your application, and React will efficiently update and render just the right component automatically when the data gets changed.
const element = <h1>Hello, world!</h1>;
The above one is a pure HTML
But React uses something call as JSX(HTML + JAVASCRIPT) which looks something like this:
const name = ‘Josh Perez’;
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById(‘root’)
);
10.Every element on the webpage will normally treated as a component by React.
For Free Demo classes Call: 8237077325
Registration Link: Click Here!
11.Workflow of React Application:
Start Server –> Index.js –> Index.html –> App component –> on to the Browser.
To render a React element into a root DOM node, we need to call render() function present inside ReactDOM module as shown below:
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById(‘root’));
12.You basically using React you build a application that is a collect of large number of components that manage their own state, then you combine it together to form a good looking User Interface.
13.Mainly the creation of the Component logic is written in JavaScript (or) Typescript, you can easily pass data from parent component to child component and vice versa throughout your app and keeping the state active by using the concept of props which basically stands for properties.
14.React basically makes use of the Declarative approach instead of the Imperative approach. It means to React we should tell how the User Interface has to look, the rest of everything will be automatically taken care of by React itself.
15.React class components basically contain a render() method that takes input data and returns the output on the webpage. This example basically uses an XML(Xtensible Markup Language)-like syntax called JSX which is the combination of HTML and Javascript. Basically the Input data that is passed into the component which can be function component or a class component that can be accessed by render() function via the statement this.props.
16.Using the concept of props and state, we can put together to create a small Todo application. This example basically uses the state to track the current list of items added into the application as well as the text that the user has entered into the input box. Although the event handlers we create also assume to be present to inline, they will be first collected and then later implemented using the concept of event delegation.
17.The best way to create a new react application is:
npx create-react-app my-app
cd my-app
npm start
Where my-app can be replaced with a application name, then we need to take help of node js to start the server to run react application by using the command npm start!
–>we can either use yarn or npm(node package manager)
For Free Demo classes Call: 8237077325
Registration Link: Click Here!
React Hooks:
1)useState() = This is a hook that basically acts as a short term memory.
Syntax:
const [variable name, function name] = useState(Initial Value)
2)useEffect() = The React hook useEffect helps in adding componentDidUpdate and componentDidMount combined lifecycle in React’s functional component which is already present in class component.
Syntax:
import React, { useEffect } from ‘react’;
const tutorials=(props)=>{
useEffect( ()=>{
console.log(‘hello’);
setTimeout( ()=>{ alert(‘hello’); }, 2000);
});
}
3)useContext() = This hook helps to pass the data from one component to another component without traversing any of the intermediate components.
Syntax:
const authContext = useContext(initialValue);
Ex:
const authContext = React.createContext({
auth: null,
login: () => {},
logout: () => {},
});
export default authContext;
Author:-
| SevenMentor Pvt Ltd.
© Copyright 2021 | Sevenmentor Pvt Ltd.