JSX (JavaScript and XML) in React

Element

ReactDOM.render()

Function and Class

State

Props

setState()

use arrow function to wrap around an event handler and pass parameters:
<button onClick={() => this.handleClick(id)} />

Refs

Virtual DOM

shadow and Virtual

React Fiber

React.createElement()

Initialization,Mounting,Updating, UnMounting

An upper order component is a function that takes a component and returns a new component.

A component that controls the input elements within the forms on subsequent user input is called Controlled Component, That is every state mutation will have an related handler function.

Uncontrolled Components are the ones that store their own state within, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

A Youngster class constructor can’t make use of this orientation until the super () method has been called. The same applies for ES6 sub classes. The reason of passing props parameter to super () call is to access this props in your child constructors.

When a components props or state change, React decides whether an real DOM update is necessary by comparing the newly returned element with the before rendered one. When they not equal, React will inform the DOM. This process is called reconciliation.

Class is the keyword in JavaScript,JSX is an extension of JavaScript. That is the principal reason why React uses class Name instead of class. Pass a string as the class Name prop.

Its mutual pattern in React which is used for a component to return multiple elements. Fragments let group a list of children without adding extra nodes to the DOM.

Portal is a suggested way to render children into a DOM node that exists outside the DOM order of the parent component.

If behavior is independent of its state then it can be a displaced component. You can use either function or class for creating stateless components. But unless we need to use a lifecycle hook in our components, we should go for function components. There are a lot of benefits if decide to use function components here, they are easy to write, understand, and test, a little faster, and Every one can avoid the this keyword altogether.

If the behavior of a component is reliant on the state of the component then it can be termed as a stateful component. These stateful components are always class components and have a state that gets modified in the constructor.

The react-dom package provides DOM-specific methods that can be used at the highest level of our app. Most of components are not required to use this module. Some of the methods of this package are:
render()
hydrate()
unmountComponentAtNode()
findDOMNode()
createPortal()

The React DOM Server object enables us to render components to static markup . This object is mostly used for server-side rendering (SSR). The below methods can be used in both the server and browser environments:
renderToString()
renderToStaticMarkup()

When you use set State(), then apart from assigning to the object state React also re renders the component and all its children. We would get error like this: Can only update a mounted or mounting component. Hence we need to use this. stateto initialize variables inside constructor.

If the props on the component are changed without the component being revitalized, the new prop value will never be displayed because the constructor function will never update the current state of the component. The starting of state from props only runs when the component is first created.

The lifecycle methods are called in the below order when an instance of a component is being created and inserted into the DOM.
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

We can listen to the resize event in component Did Mount() and then update the dimensions (width and height). we should remove the listener in component Will Unmounts() method.

When we use setState() the current and previous states are merged. replaceState() throws out the current state, and replaces it with only what we provide. Usually setState() is used unless we really need to remove all previous keys for some reason. we can also set state to false/null in setState() instead of using replaceState().

we can use React.version to get the version.const REACT_VERSION = React.version ReactDOM.render( <div>{`React version: ${REACT_VERSION}`}</div>, document.getElementById(‘app’))

We just need to use HTTPS=true configuration. we can edit our package.json scripts section:
“scripts”: { “start”: “set HTTPS=true && react-scripts start”}

React’s appeasement algorithm assumes that without any information to the contrary, if a custom component appears in the same place on consequent renders, it’s the same component as before, so reuses the previous instance moderately than making a new one.

React Motion and React Transition Group are popular animation packages in React ecosystem.

React Router is a authoritative routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what’s being displayed on the page.

History instance has two methods for navigation purpose.
push()
replace()
If we think of the history as an array of visited locations, push() will add a new location to the array and replace() will replace the current location in the array with the new one.

While navigating we can pass props to the history object:
this.props.history.push({pathname:’/template’,search:’?name=sudheer’,state: { detail:response.data }})

ReactTestUtils are providing in the with-addons package and allowto perform actions against a simulated DOM for the purpose of unit testing.

React is for view layer of the app so we still need the help of others to get a complete tooling set for development. It Is using parallel tempting and JSX. It can seem difficult to some developers. The library is (React) too large. Its (React) Learning curve may be steep.

It is the architecture of an application that Facebook uses for developing client side web applications. Facebook uses within when working with React. React is not a library or a framework. This is just a new technique that complements React and the idea of Uni-directional Data Flow.

Jest – JavaScript unit testing framework created by Facebook based on Jasmine and provides automated mock creation and a jsdom environment. It’s often used for testing components.

Flux is designed paradigm used as an alternate for the more traditional MVC pattern. It is not a framework or a library but a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Facebook use this pattern inside when working with respond.

Redux is an expected state container for JavaScript apps based on the Flux design pattern. Redux can be used mutually with React, or with any other view library. It is a little size (about 2kB) and has no dependency.

We can use Context in our application directly and is going to be great for passing down data to acutely nested components that what it was designed for. Whereas Redux is much more potent and provides a large number of skin textures that the Context API doesn’t provide. Also, React Redux uses context internally but it doesn’t render this fact in the public API.

React -JavaScript library, supporting both front-end web and being run on the server, for building user interfaces and web applications.
React Native – mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use React to build your components, and implements React under the hood.

JSX is a XML like syntax addition to ECMAScript (the acronym stands for JavaScript XML). mainly it provides syntactic sugar for the React.createElement() function, giving us articulacy of JavaScript along with HTML like template syntax.
In the example below text inside <h1> tag return as JavaScript function to the render function.
classAppextendsReact.Component {render() {return(<div><h1>{‘Welcome to React world!’}</h1></div> ) }}

Element – a plain object describing what we want to appear on the screen in terms of the DOM nodes / other components. Elements can contain other Elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.

The object representation of React Element as follows:

constelement=React.createElement(‘div’, {id:’login-btn’},’Login’)
The above React.createElement() function returns an object:
{type: ‘div’,props: {children: ‘Login’,id: ‘login-btn’ }}
And last renders to the DOM using ReactDOM.render():
<divid=’login-btn’>Login</div>

component – declared in several ways. Component can class with a render() method.
Alternatively it can be defined as a function. Component takes props as an input, and returns an JSX tree as the

Output:

constButton= ({ onLogin }) =><div id={‘login-btn’} onClick={onLogin} />
Then JSX gets transpiled to React.createElement() function tree:
constButton= ({ onLogin }) =>React.createElement(‘div’,{ id:’login-btn’, onClick:onLogin },’Login’)

There are 2 ways to create a component.

Function Components:This is the one way to create a component. Function components are JavaScript functions that accept props object as first parameter and return React elements:
ii. functionGreeting({ message }) { iii. return<h1>{`Hello, ${message}`}</h1>?}
Class Components:we can also use ES6 class to define a component. The above function component can be written as below:
v. classGreetingextendsReact.Component { vi. render() { vii. return<h1>{`Hello, ${this.props.message}`}</h1> viii. }}

React is an open-source front-end JS library developed by Facebook in 2011. It facilitates the creation of interactive, stateful & reusable UI components. React is using to create large interactive web applications and mobile application. It changes over time without reloading the page. It is covering for ‘View’ in MVC (Model-View-Controller).

React Js is a front-end JavaScript library and gives a part based methodology that causes fashioners to manufacture reusable segments. Respond has following recorded highlights:

• React utilizes virtual DOM as opposed to genuine DOM,
• React utilizes Server-side rendering,
• Uni-directional information stream or information restricting is utilized in React.

Respond is a standout amongst the most utilized libraries and has following recorded worthwhile highlights:

• Application execution is expanded by React
• It can be utilized on customer andserver-sidee
• Code coherence is expanded due to JSX
• The client can without much of a stretch coordinate React with different systems like Angular, Meteor, and so forth.
• UI test cases can be effectively composed by utilizing React

In spite of the fact that React is a well-known apparatus however has a few impediments that are recorded underneath:

• React isn’t a structure yet a lot of libraries.
• Designers set aside the opportunity to comprehend this library as it is substantial in size
• For fledgling software engineers, it very well may be hard to comprehend this library
• Inline templating and JSX makes the coding to some degree complex

Virtual DOM is only it is only a duplicate of genuine DOM. In the hub tree of Virtual DOM, all components, qualities, and substance are recorded as articles and its properties. Through render work, a hub tree is made by the React segments. After transformation, the tree gets refreshed and it might occur because of framework client’s activity.

Respond and Angular are two of the most prominent libraries for JavaScript and let us have a speedy take a gander at contrasts between them:

• Angular can actualize finish MVC, while through React we can just execute View of MVC.
• Angular gives customer side rendering while React give server-side rendering.
• Angular can give two-way information official while React can give just a single way information authoritative.
• Angular is given by the Google and React is given by the Facebook.
• Angular utilizes run-time troubleshooting and React utilizes aggregate time investigating.
• Angular utilizes Real Dom while React utilizes virtual DOM.

The building squares of the React application UI are called parts. Whole UI is separated into a few parts that are littler in size and are reusable also. At that point every one of these parts is rendered freely without influencing rest of the UI.

In React, Props is utilized for Properties. These are permanent parts of React that must be kept unadulterated. These parts are constantly passed to the youngster segments from parent segments and can’t be sent back to the parent segment. It makes the information stream unidirectional and powerfully created information is rendered through this idea.

Following are a couple of recognizable focuses for a brisk correlation of prop and state:

• Both Props and State get beginning an incentive from the parent part
• In State, the parent segment can change the esteem, while if there should be an occurrence of props it isn’t so.
• Default qualities can be set in both state and prop
• Components can be changed from inside if there should be an occurrence of State while this is impossible in Props
• The starting worth can be set for tyke segment in both of the cases

class newComponent broadens React.Component{

render(){

return(

<div>

<h1>Welcome</h1>

<Header/></div>

); }

class Header broadens React.Componet{

Render(){return (Header Component </h1>

); }

ReactDOM.render(<newComponent/>, document.getElementById(‘content’));

For this, we can utilize this.setState() work in the accompanying way:

Class newComponent expands React.Component{

Constructor(){

Super();

This.state={name: ‘Maxx’, id: ‘101’} }

Render()

{setTimeout(()=>{this.setState({name:’Denis’, id:’222′})},2000)

Return(

<div>

Welcome {this.state,name}

What is id {this.state.id}

</div>

);}}

ReatDOM.render(<newComponent/>, document.getElementById(‘content’)

Following are the fundamental impressive contrasts among stateful and stateless segments:

• In the two cases, the data about the difference in conditions of the segment is put away
• Stateless parts have the specialist to change the satiate while stateful segments don’t have such expert
• Stateless segments store the data about past, present, and future states, while stateful segments don’t store such data about the parts.

In the lifecycle of React’s segment, there are following three stages:

• Initial Phase: Initial stage is the stage when the segments begin a mind-blowing voyage to advance toward DOM
• Updating Phase: At when parts are added to DOM and refresh and rendered when a state or prop changes happen.
• Unmounting Phase: This is considered last period of the part in which the segment gets annihilated.

In the whole lifecycle of a React part, the accompanying strategies are utilized to achieve the capacities:

• componentWillMount() – On customer and server side this capacity gets executed just before the rendering
• componentDidMount() – After first render it gets executed on the customer side
• componentWillReceiveProps() – This capacity is summoned when the props are gotten from the parent class and another render isn’t being called.
• shouldComponentUpdate() – This Boolean capacity returns genuine or false according to circumstance like in the event that the part should be refreshed, genuine is returned else false is returned
• thecomponentWillUpdate() – It is called when rendering isn’t being called
• componentDidUpdate() – It is called soon after when render work is called
• componentwillUnmount() – When a part gets un-mounted from DOM then this capacity is called

it holds the information about the component and the state is using only inside the component. A state is mutable. By default, a component has no state.

Props mean properties, It’s a way of passing data from parent to child and we can say that props are just a  communication channel between components. Always moving from parent to child component. It’s immutable and read-only.

Only one reason for using props parameter in the super keyword. When you want to access this.props inside the constructor then you need to pass the props parameter in the super keyword and no difference outside the constructor.

The super keyword is used to access & call functions on an object’s parent.

• It is covering for ‘View’ layer in MVC (Model-View-Controller).
• React is only a JavaScript library, Not a system.
• Its library is vast and sets aside opportunity to get it.
• it utilizes inline templating and JSX.

In the lifecycle of React’s part, there are following three stages:

• Initial Phase: Initial stage is the stage when the parts begin an incredible voyage to advance toward DOM
• Updating Phase: At when parts are added to DOM and refresh and rendered when a state or prop changes happen.
• Unmounting Phase: This is known as the last period of the segment in which the part gets wrecked.

In the whole lifecycle of a React part, the accompanying strategies are utilized to achieve the capacities:

• componentWillMount() – On customer and server side this capacity gets executed just before the rendering
• componentDidMount() – After first render it gets executed on the customer side
• componentWillReceiveProps() – This capacity is summoned when the props are gotten from the parent class and another render isn’t being called.
• shouldComponentUpdate() – This Boolean capacity returns genuine or false according to circumstance like on the off chance that the segment should be refreshed, genuine is returned else false is returned
• thecomponentWillUpdate() – It is called when rendering isn’t being called
• componentDidUpdate() – It is called soon after when render work is called
• segments willUnmount() – When a segment gets un-mounted from DOM then this capacity is called

The yield catchphrase is utilized to delay and resume a generator work. That is known as yield catchphrase.

1. Above all else Make beyond any doubt you have to introduce late form of Node.js. You simply need Node >= 6 on your machine.
2. Introduce hub in your framework (you can download from here-https://nodejs.org/en/download/)
3. Pick your task organizer and open cmd direction.
4. Write in direction :- npm introduce make respond application
5. After entire process again compose the :- make respond application your-venture name
6. Proceed to the venture area utilizing direction :- disc your-venture name
7. Presently you can run the respond application utilizing direction (Start the improvement server) :- npm begin
8. On the off chance that you need to make packages the application into static records for generation :- num run manufacture

npm introduce – g make respond application

make respond application your-application name

cd your-application name

npm begin

You may likewise utilize npx

npx make respond application your-application name

cd your-application name

npm begin

A presentational part is a segment that renders HTML as it were. The segment’s capacity is presentational markup. In term of Redux application, a presentational part does not connect with the Redux store.

The presentational segment acknowledges props from a compartment part. The compartment segment indicates the information a presentational segment should render. The compartment part has individualized conduct.

1. Components provide strong encapsulation for reusable components.
2. Components provide a strong declarative library that keeps the DOM in sync with your data.

There are two sorts of information that control a part: State and Props in responding. Props are set by the parent and they are settled all through the lifetime of a part. State information that will change, we need to utilize state.

Constructor(or getInitialState) :- Constructor is utilized to set beginning state for segment.

componentWillMount:- componentWillMount strategy will be called before part render to a program and furthermore it is customer side and also server-side rendering.

Render:- Render strategy you will see part on Browser and this technique ought to be unadulterated. You can not refresh state in this strategy

componentDidMount:- This technique will be called directly after the render strategy. refreshing state in this strategy will re-render part. It’s a customer side rendering.

componentWillReceiveProps:- this technique is called at whatever point segment gets new props.

shouldComponentUpdate:- In this technique, you can check whether re-rendering the part is fundamental or not. return false on the off chance that you would prefer not to re-render part.

a segment will refresh:- this strategy will be called after shouldComponentUpdate(only in the event that it returns genuine). Also, before rendering the render strategy.

In this technique refreshed segment will be rendered to screen. with new data(or changes).

componentDidUpdate:- componentDidUpdate will be called after render technique.

a segment willUnmount:- componentWillUnmount crushed and expelled from the DOM and just a single lifecycle strategy is dynamic.

Redux is an anticipated state holder for JavaScript applications dependent on the Flux configuration design. Redux can be utilized together with React, or with some other view library. It is minor (about 2kB) and has no conditions.

Redux pursues three key standards:

• Single wellspring of truth: The condition of your entire application is put away in a protest tree inside a solitary store. The single state tree makes it less demanding to monitor changes after some time and troubleshoot or assess the application.
• A state is perused just: The best way to change the state is to produce an activity, a question portraying what occurred. This guarantees neither the perspectives nor the system callbacks will ever compose straightforwardly to the state.
• Changes are made with unadulterated capacities: To determine how the state tree is changed by activities, you compose reducers. Reducers are simply unadulterated capacities that make the past state and move as parameters and restore the following state.

Rather than saying drawbacks we can state that there are few bargains of utilizing Redux over Flux. Those are as per the following:

• You should figure out how to maintain a strategic distance from transformations: Flux is un-obstinate about changing information, however Redux doesn’t care for transformations and numerous bundles correlative to Redux accept you never change the state. You can uphold this with dev-just bundles like redux-unchanging state-invariant, Immutable.js, or educating your group to compose non-changing code.
• You will need to deliberately pick your bundles: While Flux expressly doesn’t attempt to take care of issues, for example, fix/re-try, industriousness, or structures, Redux has expansion focuses, for example, middleware and store enhancers, and it has generated a rich environment.
• There is no pleasant Flow incorporation yet: Flux as of now gives you a chance to do extremely amazing static sort checks which Redux doesn’t bolster yet.

Dispatching an activity inside a reducer is an enemy of example. Your reducer ought to be without reactions, just processing the activity payload and restoring another state protest. Including audience members and dispatching activities inside the reducer can prompt binded activities and opposite symptoms.

Truly. You simply need to send out the store from the module where it made with createStore(). Additionally, it shouldn’t dirty the worldwide window question.

store = createStore(myReducer)

vii.    The DOM manipulation is very expensive which causes applications behaves slowly and inefficient.

viii.    Due to circular dependencies, a complicated model was created around models and views.

1. A lot of data changes happens for collaborative applications(like Google Docs).
2. No way to do undo (travel back in time) easily without adding so much extra code.

These libraries are altogether different for altogether different purposes, yet there are some unclear similitudes.

Redux is a device for overseeing state all through the application. It is typically utilized as a design for UIs. Consider it an option in contrast to (half of) Angular. RxJS is a responsive programming library. It is typically utilized as an apparatus to achieve offbeat undertakings in JavaScript. Consider it an option in contrast to Promises. Redux utilizations the Reactive worldview on the grounds that the Store is responsive. The Store watches activities from a separation and changes itself. RxJS additionally utilizes the Reactive worldview, yet as opposed to being an engineer, it gives you fundamental building squares, Observables, to achieve this example.

You have to pursue two stages to utilize your store in your compartment:

Use mapStateToProps(): It maps the state factors from your store to the props that you determine.

Interface the above props to your compartment: The protest returned by the mapStateToProps work is associated with the holder. You can import interface() from respond redux.

import React from ‘respond’

import { associate } from ‘respond redux’

class App broadens React.Component {

render() {

return <div>{this.props.containerData}</div>

}

}

work mapStateToProps(state) {

return { containerData: state.data }

}

send out default connect(mapStateToProps)(App)

The @ image is in certainty a JavaScript articulation used to imply decorators. Decorators make it conceivable to comment on and adjust classes and properties at configuration time.

We should take a precedent setting up Redux without and with a decorator.

Without decorator:

import React from ‘respond’

import * as actionCreators from ‘./actionCreators’

import { bindActionCreators } from ‘redux’

import { interface } from ‘respond redux’

return { todos: state.todos }

}

function mapDispatchToProps(dispatch) {

return { activities: bindActionCreators(actionCreators, dispatch) }

}

class MyApp expands React.Component {

/…characterize your principle application here

}

send out default connect(mapStateToProps, mapDispatchToProps)(MyApp)

With decorator:

import React from ‘respond’

import * as actionCreators from ‘./actionCreators’

import { bindActionCreators } from ‘redux’

import { interface } from ‘respond redux’

function mapStateToProps(state) {

return { todos: state.todos }

}

function mapDispatchToProps(dispatch) {

return { activities: bindActionCreators(actionCreators, dispatch) }

}

@connect(mapStateToProps, mapDispatchToProps)

export default class MyApp expands React.Component {

/…characterize your principle application here

}

The above precedents are relatively comparable with the exception of the use of decorator. The decorator grammar isn’t incorporated with any JavaScript runtimes yet, is as yet test and subject to change. You can utilize babel for the decorators bolster.

You can utilize Context in your application specifically and will be extraordinary for going down information to profoundly settled parts which what it was intended for. Though Redux is substantially more incredible and gives an extensive number of highlights that the Context API doesn’t give. Likewise, React Redux utilizations setting inside yet it doesn’t uncover this reality in the general population API. Q88)For what reason are Redux state capacities called reducers?

Reducers dependably restore the amassing of the state (in view of all past and current activities). Accordingly, they go about as a reducer of state. Each time a Redux reducer is called, the state and activity are passed as parameters. This state is then lessened (or aggregated) in view of the activity, and afterward the following state is returned. You could diminish a gathering of activities and an underlying state (of the store) on which to play out these activities to get the subsequent last state.

You can utilize redux-thud middleware which enables you to characterize async activities.

How about we take a case of bringing explicit record as an AJAX call utilizing get API:

trade work fetchAccount(id) {

return dispatch => {

dispatch(setLoadingAccountState())/Show a stacking spinner

get(‘/account/${id}’, (reaction) => {

dispatch(doneFetchingAccount())/Hide stacking spinner

on the off chance that (response.status === 200) {

dispatch(setAccount(response.json))/Use an ordinary capacity to set the got state

} else {

dispatch(someError)

}

})

}

}

work setAccount(data) {

return { type: ‘SET_Account’, information: information }
}

• Testability :- it is anything but difficult to test, and incorporate a few devices like quip.
• Maintainability :- it guarantees clarity and makes practicality simpler.
• Performance :- it is great execution since it’s utilization virtual-dom.
• Rendering :- it’s render server-side and customer side also.
• Code Reusability :- React about segments. So react JS furnishes designers with the chance to have more opportunity to utilize and make normal reflections, setting up the creation, circulation and utilization of segregated reusable parts.
• Better Combination Technologies :- React makes best utilization of HTML and JavaScript blending them in a perfect world and furthermore consolidates CSS to furnish your business with the best.
• Integrate With Others Framework :- it’s anything but difficult to incorporate with different systems like Backbone.js, Meteor, Angular, and so forth.
• JSX:- JSX makes it simple to peruse the code of your segments. It is likewise extremely simple to see the design, or how segments are stopped/joined with one another.
• Data Binding :- React utilizes one-way information official or uni-directional information stream .

it holds the data about the part and state is utilizing just inside the segment. State is alterable. As a matter of course, the segment has no state

Props implies properties, It’s a method for passing information from parent to kid and we can state that props are only a correspondence channel between parts. Continually moving from parent to kid part. It’s a permanent and perused as it were.

React JS segments split the UI into free reusable pieces that is called segment. parts resemble JavaScript capacities.

Fundamentally, a React part depicts what you have to see on the screen. Not all that fundamentally, a React component is a challenge depiction of some UI.

A React segment is a capacity or a class which then again recognizes information and returns a React segment (usually by methods for JSX which gets transpiled to a create Element summon)

• React JS is an innovation that can be trusted for complex undertakings.
• Developers don’t stress over the bugs since it generally guarantees mistake free results it offers versatile applications.
• It is quick innovation and can basically be trusted for quality results.

Create Element is the thing that JSX gets transpiled to and is the thing that React uses to make React Elements (protest representations of some UI). clone Element is utilized as a part of request to clone a component and pass it new props.

Redux pursues three crucial standards:

• Single wellspring of truth: The condition of your entire application is put away in a protest tree inside a solitary store. The single state tree makes it less demanding to monitor changes after some time and troubleshoot or examine the application.
• State is perused just: The best way to change the state is to produce an activity, a protest portraying what occurred. This guarantees neither the perspectives nor the system callbacks will ever compose specifically to the state.
• Changes are made with unadulterated capacities: To determine how the state tree is changed by activities, you compose reducers. Reducers are simply unadulterated capacities that take the past state and an activity as parameters, and restore the following state.

States are essentially information source in React and are kept as basic as could reasonably be expected. Through states, the rendering and conduct of the parts are distinguished. In contrast to props, they are changeable and can be utilized to make intuitive and dynamic segments. For the most part, this.state() work is utilized to get to them.