What is React React is an open-source javascript library for building user interfaces(UI) of web applications. React has also been extended as React Native for building UI for native mobile applications. React is in the list of most famous and capable front-end technologies. Because it allows to create interactive, rich and responsive UI in a very easy and convenient way. Inside a web application React is only reasposible for the look and feel of the UI because it is only reasposible for application`s view layer. HISTORY In 2011, the React comes into the picture when it was deployed on Facebook`s news feed. React is a open-source library and it is created by Jordan Walke at Facebook. In the initial days they called it "FaxJS". In 2012 it was deployed on Instagram web application and gradually it becomes more famous due to its capabilities and simple learning curve. Now-a-days it is used by the most famous companies like NetFlix, Airbnb, Discord, Skype, Pintrest etc. FEATURES SIMPLE LEARNING CURVE:- React has a small and simple learning curve. Anyone with good understading of front-end technologies can grab it easily as well as it is also easy to learn for beginners with basic understanding of some prerequisites. React supports the ES6 and Typescript so programmers who comes from the object-oriented-programming backgrond learns it easily. DECLARATIVE:- React follows the declarative approch rather than imperative. Declarative approach makes it easy for developers to predict the functionality and also makes it easy to debug. This feature of react allows to design views in a easy way. React inside a application is only responsible for the look and feel of the application as it is only dedicated for view of application. COMPONENT BASED:- Any React application is usually a collection of all its components. Components are the basic building blocks for any UI developed with React. Component based approach is one of the biggest plus with React library. Because at any instance when the UI has to be updated then only those components are updated which has the changes and not the whole page is loaded like conventional UI. This idea for updating the UI makes the React faster and efficient comparitively. CODE REUSABILITY:- React components are reusable. We can write the code for a component once and we can use the component at multiple places inside a React application. Code reusability reduces the development time and effort. A component in react has its own state and logic which make it easy to reuse components independently. There are some concepts like Higher Order Components (HOC) in react which helps it easy to reuse code. BETTER PERFORMANCE AND EFFICIENCY:- React performs better than its competative frameworks and libraries. The performance improvement in react is result of using the concept of Virtual DOM(Document Object Model). A react application does not directly interacts with its Real DOM rather than it first interact with a copy of Real DOM stored in memory called Virtual DOM. When some changes in the state of the UI occurs then first they are compared with Virtual DOM and after that only those components which have changes are updated in Real DOM. DATA FLOW:- React follows the unidirectional data flow paradigm. This means in react the data is always flows in one direction (Form Parent Components to Child Components). The unidirection data flow makes is easier to debug react application. Unidirection data flow also helps in designing logical part for UI in a simple manner. COMMUNITY & SUPPORT:- React is developed and maintain by Facebook and currently it is used by most successfull and established companies. Moreover it is also open-source, So these are the reasons React has a big community of contributers and has a good support. In React update in the library often occurs with backward compatibility . As well as react has large support for dependencies and UI libraries for making innovative and responsive UI. Why should we choose React React is a famous, high in demand, efficient and one of the latest frontend library. It allows us to create rich user interfaces and it is also easy to learn. React is created and maintained by one of the famous Tech Giant and it is used and trusted by famous companies. React has many aspects with its learning curve as React Native is derived and developed on the principles of React, So one can easily switch to cross-platform native mobile app development. React is also growing towards the next level app development solutions. As PWA (Progressive Web Applications) are developed on React. PWA are hybrid of web application and native mobile application which comsumes minimal space on device and provides better performance.

The state is a built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders. State is an object that holds some information, which can be used across requests. React Class component is by default configured with state. It can use the state object of “React.Component” base class. Functional components are not configured with state. A state can be modified based on user action or network changes. State object must be defined with an initial value. State must be initialized. Every time the state of an object changes, React re-renders the component to the browse The state object can store multiple properties It must be configured in “Constructor” You can set value into state by using “setter” method “setState()” The setState() Method:- State can be updated in response to event handlers, server responses, or prop changes. This is done using the setState() method. The setState() method enqueues all of the updates made to the component state and instructs React to re-render the component and its children with the updated state. EX:- class CarsComponent extends React.Component { constructor(props) { super(props); this.state = { title: 'Cars Name', { Brand: 'Hyundai', Fueltype: 'petrol'}, } updateName() { this.setState({ title: 'Cars Brands' }); } render() { return( <div> {this.state.title} {this.state.Brand} {this.state.Fueltype} </div> ) } } export default CarsComponent

Properties [props] in Components Properties are used to store data. Properties can change the structure according to state and situation. Component uses properties to change the behaviour according to state and situation. You can re-use the component with different data. Properties are configured in Functional Components and Class Component Properties in Functional Components: Functional components configure properties as “Parameter” Parameter can be any type, object, string, number, array etc. Syntax: function Welcome(props) { return( <> props.PropertyName </> ) } Ex: function Welcome(props) { return <h2> Hello, {props.name}</h2> } const element =<Welcome name ="Rohit" /> React.Dom.render( element , document.getElementById('root'); Output:- Hello,Rohit Properties in Class Components: Every JavaScript class comprises of properties. The class properties are local and immutable. They can initialize value, which can be access by using “this.propertyName” They will not allow to modify the value. React class properties are defined by using “props” which is a member of “React.Component” “props” allows to dynamically change the value according to state and situation. class Welcome extends React.Component { render() { return <h2>My Name is {this.props.name}!</h2> } } const myelement = <Welcome name="Rohit" />; ReactDOM.render(myelement, document.getElementById('root')); Output:- My Name is Rohit

-JavaScript XML (jsx) Extension to the Javascript language syntax. - write xml - Like code for elements and Components. -JSX tags have a tag name, attribute and children. - jsx is not a neccessity to write React application. JSX in React Component - JSX by default supports only single line element configuration. Example <h2> Heading </h2> // Invalid JSX Code Block <p> Paragraph </p> // Multi Line not allowed - JSX element configuration can be defined in “( )” if it comprises of multiple lines. - Element must be a container to hold multiple lines. <div> <span> <p> etc. Example const element = ( <div> <h2> React.js </h2> <p> Components in React.js </p> </div> ); ReactDOM.render( element, document.getElementById("container") ) - Adding additional container may affect the presentation in HTML. - Hence you have to use empty container. <> Start </> End Example jsx.js const jsx = ( <> <h2>React.js</h2> <p>Components in React.js</p> </> ); ReactDOM.render( jsx, document.getElementById("container") ) JSX Expressions - JavaScript allows embedded expression in a string representation by using “${ }” `<div> ${ dynamicValue } </div>` - JSX expression is embedded by using “{ }” Example import React from 'react'; import ReactDOM from 'react-dom'; const myelement = <h1>React is { 6 + 2 } times better with JSX</h1>; ReactDOM.render(myelement, document.getElementById('root')); JSX will Not allow Void Element - Void element usually will not have end tag. Example <img> - Every element in JSX must have and End tag. Or define as self ending <img> </img> <img /> <img> //invalid