React: A JavaScript Library
What is React?
React is an open-source, component-based, and currently most popular front-end JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It was created by Jordan Walke, a software engineer at Facebook, in 2011. As React is a front-end library, it is responsible for the application’s view layer (how the application looks and feels).
React is Component-Based
As mentioned above, React is component-based, meaning that it divides the user interface (UI) into components, each of which has its own property and function. This feature makes applications written in React easier to debug.
Features
The features of React include the JSX (JavaScript Syntax Extension), a virtual DOM, performance, one-way data binding, extensions, and debugging.
JSX (JavaScript Syntax Extension)
JSX is a syntax extension to JavaScript that is used along with React to dictate the appearance of the application. JSX extension files allow HTML elements to be written in the same file along with JavaScript code. This fact makes code easy to understand and debug in addition to avoiding the usage of complex DOM structures. The code below is an example of how JSX is implemented in React, as it is neither a string nor HTML but instead is HTML embedded into JavaScript code.
const name = 'Rachel';
const greeting = <h1>Hello, {name}!</h1>Virtual DOM
Referred to as the ‘virtual DOM’ (VDOM), React keeps a lightweight representation of the DOM in memory. The usage of the VDOM increases the speed of the manipulation of the DOM compared to manipulating the real DOM because nothing is drawn on the screen, in that when the state of an object is changed, the VDOM only updates that individual object and updates the real DOM accordingly instead of updating all of the objects.
Performance
As discussed above, performance of an application written in React is streamlined in terms of readability and debugging by the fact that the working pieces of the application are broken down into components. Additionally, as also discussed above, the presence of the VDOM speeds up the performance of the application.
Extensions
As a library, React goes beyond just UI design in that it offers extensions that offer the developer complete application architectural support. React provides server-side rendering, which, when connected to the client-side, can send a fully rendered page to the client. React also employs Flux, Redux, and React Native.
One-way Data Binding
One-way data binding means that the in the development of the design of a React application, child components are often nested in parent components. This feature keeps everything modular, organized, and fast, in addition to the fact that the developer is better able to discern where and when an error occurs, which enhances the developer’s control over the application.
Debugging
React has an extensive developer community, leading to the development of a debugger extension that is accessible via a tab in Chrome’s developer tools. By using this tab, you can inspect React components directly.
Important Concepts: Components, State, & Props
Components
Components are the building blocks of a React application. A React application will typically contain many components, each of which has its own function and property. This method of division of labor increases readability and the ease of debugging. A react component falls into one of two categories: Stateless Functional Components and Stateful Class Components. Functional components have no state of their own, deriving data from other components as properties (props), and only contain a render function.
function Greeting(props) {
return <h1>Welcome to {props.name}!</h1>;
}Stateful or class components hold and manage their own state and have their own render method for returning JSX on the screen.
class Greeting extends React.Component {
render() {
return <h1>Welcome to {this.props.name}</h1>}!;
}
}State
The state is a built-in object in React. It is used to contain data about the component. Each component’s state can change over time. When it does change due to user action or system-generated events, the component will re-render. The code below shows state in React.
class Greetings extends React.Component {
state = {
name: "World"
};updateName() {
this.setState({ name: "Rachel" });
}render() {
return(
<div>{this.state.name}</div>
)
}
Props
Short for properties, props is another built-in object in React. This object stores the value of a tag’s attributes and functions similarly to the HTML attributes. Additionally, it provides a way to pass data from component to component similarly to how arguments are passed in a function.
Top Frameworks (not ranked)
- Redux
- Create React App
- React Bootstrap
- Material Kit React
- Semantic UI
- React Toolbox
- Ant Design
- React Foundation
- Shards React
- Styled React
Why Use React?
- React is easy to learn and use.
- Creating dynamic web applications becomes easier.
- React has reusable components.
- React improves performance due to virtual DOM.
- React has handy support tools like React Developer Tools.
- React is known to be SEO (search engine optimization) friendly.
- React is chosen by many developers because it has a very rich JavaScript library.
- React code is easy to test and debug.
Conclusion
Since its conception in 2011 and release as open source in 2013, React has only gained in popularity. It is a very versatile JavaScript library with many frameworks available to it, and is now being used by large platforms such as Facebook, Instagram, AirBnB, and Netflix.
Sources
https://da-14.com/blog/its-high-time-reactjs-ten-reasons-give-it-try