1) React is all about ReusableComponents
Separate basic components (catches, structure fields, format segments, and so on) into reusable parts with all around characterized interfaces when planning interfaces. That way, the next time you need to create some UI, you’ll be able to write a lot less code. This means less time spent on development, fewer bugs, and fewer bytes sent down the wire.
2) React Lifecycle Methods
Let’s look at the react life cycle method and how we can use it in our react projects.
React, like everything else, goes through a cycle of birth, growth, and death. Each React component has a lifecycle that includes three major phases: mounting, updating, and unmounting.
Mounting – Birth of your component
Mounting is the process of inserting elements into the DOM. React uses virtual DOM to store all of the elements in memory. It has four built-in methods for mounting a component, which are as follows:
Updating – Growth of your component
The second stage of the React lifecycle. When there is a change in state or props, the component is updated. React has five built-in methods that are called when the components are updated.
Unmounting – Death of your component
Unmounting is the final or final stage of the react lifecycle. When a component is removed from the DOM, this is used. When a component is unmounted, React calls only one built-in method.
3) React State
React components has a built-in state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders.
setState()
To schedule an update to a component’s state object use SetState. The component responds by re-rendering when the state changes. In the example below, we made one class that has a constructor where we store our state value called count. We use this to fetch and update state value such as this.state.count to show state variable value and in setState we use it to update the same value.
class add extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}4) Growing Community
ReactJS has grown in popularity as a result of its added simplicity and flexibility you can find tons of plugins and . ReactJS is used by over 1,300 developers and 94,000 websites, according to figures.
React was originally created by Jordan Walke. Today, React has over a thousand open source contributors.
March 31, 2021
5) Great UI Component Libraries
Material UI
Material is a plan framework made by Google to help groups construct top notch advanced digital experience for Android, iOS, Flutter, and the web.
Material Design is inspired by the actual world and its textures, including how they reflect light and cast shadows. Material surfaces rethink the mediums of paper and ink.
Material Components are interactive building blocks for creating a user interface, and include a built-in states system to communicate focus, selection, activation, error, hover, press, drag, and disabled states. Component libraries are available for Android, iOS, Flutter, and the web.
Ant Design
It gives a lot of UI components to enhance your web applications, and will improve components experience reliably. They also suggest some great third-party Libraries. Ant designs aim to modularize layout, color, shapes, and a series of design guidelines also offer dark mode.
React Bootstrap
React Bootstrap replaces the Bootstrap JavaScript. Every segment has been worked without any preparation as a genuine React part, without unneeded conditions like jQuery.
As one of the most famous React libraries, React-Bootstrap has advanced and developed close by React, settling on it a superb decision as your UI ecosystem..
Worked in view of similarity, which embrace our bootstrap center and endeavor to be viable with the world’s biggest UI environment.
By depending completely on the Bootstrap template, React-Bootstrap simply works with the large number of Bootstrap subjects you as of now love.
6) React Native as a Bonus
Once you know how to code in react you can find easier to understand react native. Another great thing of react native it can be use for desktop, mobile and web app with one code.
