React JS
What is React JS?
- React JS is java script frontend library. And also it is developed and maintained by Facebook and Instagram.
- It is an open-source, component based frontend library responsible only for the view layer of the application.
- React first deployed on Facebook's newsfeed in 2011 on Instagram in 2012.
- It suitable for large web application which use data and change over the time without reloading the entire page.
- It aims at Speed, Simplicity and Scalability.
- It is currently one of the most popular JS libraries and has a strong foundation and large community behind it.
- It encourages the creation of reusable UI components, which present data that changes over time.
- React implements one-way react data flow, which reduces the boilerplate and is easier to reason about than traditional data binding.
React Advantages
- It uses virtual DOM which is a JavaScript object. This will improve apps performance, since JavaScript virtual DOM is faster that the regular DOM.
- It can be used on client and server side as well as with other frameworks.
- Component and data patterns improve readability, which helps to maintain larger applications.
- React is,
- Simplicity - React JS is just simpler to grasp right away.
- Easy to learn - Basic previous knowledge in programming can easily understand.
- Data binding - It uses one-way data binding .
- Performance - Does not offer any concept of a built-in container for dependency.
- Testability - React JS applications are super easy to test.
- Native approach - Can be used to create mobile applications.
React Features
One-Way data flow
- Data flow is going to parent component to the child component. But Action flow is going to child component to the parent component.
- Data is initiated and kept in one place, and data is cannot change anyone (immutable).
- But can pass a call back function with the help of which we can do modification of originated data.
Virtual DOM
- The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.
- DOM manipulation is cost instead react create a virtual DOM.
- React creates an in-memory data structure cache which computed the changes made and then updates the browser.
JSX
- If like HTML tag syntax is neither a string nor HTML, it is called JSX, and it is a basically syntax extension to regular JavaScript and is used to React elements. These elements are then rendered to the React DOM.
- EX:
const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>- JSX allows us to write HTML elements in JS and place them in the DOM without any createElement() and/or appendChild() methods.
- JSX convert HTML tags into react elements.
- do not require to use JSX.
Props and State
Props
- Props are used to pass data and behaviors from container components to child components.
- They are read only (Immutable).
- We can get better performance by using Props.
State
- State is used to keep data which can be updated.
- We can read and write states. (Mutable).
- The state can be initialized by props.
- Has setState() Method to modify properties.
- Changes to state can be asynchronous.
- Can only be passed as prop.
Props Example:
class Welcome extends React.Component
render() {
return <h1>Hello {this.props.name}</h1>
}
}
Welcome.defaultProps = {
name: "world",
};
State Example:
class Button extends React.Component {
constructor() {
super();
this.state = {
count: 0,
};
}
updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1 }
});
}
render() {
return (<button
onClick={() => this.updateCount()}
>
Clicked {this.state.count} times
</button>);
}
Comments
Post a Comment