by React which is also called ReactJS or React.js is a JavaScript Library. You use it to build user interfaces and more. ReactJs is developed and maintained by Facebook as well as a community of developers and organizations.
ReactJS official documentation has it that “React is a rich JavaScript library for building composable User interfaces(UI). It encourages the development of re-usable UI components that displays dynamic data”
React is used as the View in Model-View-Controller architectures.
React somehow abstracts the DOM (Document Object Model) away from the developer, thereby providing for better performance and simpler programming model.
Additionally, React can also render on the server using Node.js. It can also be used for native apps(React Native).
React is very suitable for Single-Page applications and Mobile Applications. However, complex React applications require adopting additional libraries. For example, routing, state management and API interaction.
Features of React
1. Virtual DOM – As you know DOM is simply a data structure that represents the content of the dynamic web page. So React, create a second DOM in-memory(Virtual DOM). Then it computes what has changed in the page as the difference between the real DOM and the Virtual DOM. Then it updates only the changes instead of the whole DOM. This make it very efficient
2. JSX – This is also called JavaScript XML. It is an extension of the JavaScript language. Adds some additional enhancements to the syntax. It kinds of a mix between HTML and JavaScript. JSX has the following aspects:
- Attributes
- Nexted Elements
- JavaScript expressions
- Conditional statements
3. Components – These are entities that make up a React code. Components can be rendered to particular DOM elements. This is achieved using the React DOM library.
4. Functional Components – This are components declared as a function. It returns some JSX.
5. Class-based Components – These are components declared using EcmaScript 6 (EC6) libraries.They are also referred to as ‘stateful components’. This is because, they can keep their values throughout the component
6. Lifecycle Methods – These are methods that determine if a code should execute (or not) at set points in a components lifetime. Some of them are:
- render
- setInterval()
- shouldComponentUpdate
- componentWillUnmount
- componentDidMount
7. One-way data flow – This means simplifies communication with the application and reduces the boilerplate code written. (this is unlike AngularJS bi-directional flow)
8. Flux Architecture – This is an attempt to mimic the MVC architecture. it allows actions to be sent through a central dispatcher to a store. Then changes are sent back to the view.
Benefits of ReactJS
Some of the benefits of ReactJS includes:
- Relatively easy to build mobile applications and SPA
- Code readability made possible by the component pattern
- Can be used for both client and server sided development
- Based on JavaScript
[…] ReactJS – Introduction to React […]