What is React?
React.js, also known as React, is an open-source JavaScript library primarily used in making user interfaces (UIs). It was developed and is maintained by Facebook with a community of developers. React uses a declarative style of programming, meaning the code you write describes your desired outcome and React takes care of the implementation.
Features and Benefits
React's features and benefits include:
- Reusable Components: React allows developers to create reusable UI components which may be used across different parts of an application.
- Virtual DOM: React uses a virtual DOM (document object model), which is a lightweight copy of the real DOM, which is a representation of the UI of a web application. A virtual DOM is faster than a real DOM due to the fact that it cannot directly change elements on the screen.
- One-way data flow: React follows a unidirectional data flow, which means that data flows in a single direction, from parent to child. This makes it easier to manage state and debug applications.
- JSX syntax : React uses JSX, which is a syntax extension that allows developers to write HTML-esque code in their JavaScript.
React can be used to build applications for the web, mobile, and desktop platforms, and can be used in combination with other libraries and frameworks. It has become a popular choice for building modern web applications due to its ease of use, performance, and flexibility
The React Ecosystem
The React ecosystem consists of a variety of evolving tools and libraries which can be used for building applications. Some popular libraries and tools in the React ecosystem include:
- React Router: A library that synchronizes the UI and URL of the application, helping to handle routing.
- Redux: An extremely lightweight, predictable state container for JavaScript applications with consistent behavior across client and server environments. More simply put, it provides a location to store the state–an object containing data on a specific component–of an application for individual components to access. Redux is mostly used to update data, which is independent of the components, across many components in an application (could have a chapter of its own).
- Jest: A testing framework for React applications.
- Webpack: A module bundler for JavaScript applications, which can be used to bundle React applications for deployment.
Before We Start: A Review
Before getting into the rest of this chapter, let's quickly review how your user interface is rendered.
When you visit a webpage, the server returns an HTML file to your browser. Your browser reads this file and constructs a Document Object Model, a representation of the HTML elements. We can use DOM methods to listen to user events and change elements in the User Interface to reflect on the DOM. We can also change the content in the User Interface by changing the DOM.
Here is an example of the DOM for some basic HTML code:
Next Section
3.2 Setting up the development environmentCopyright © 2021 Code 4 Tomorrow. All rights reserved.
The code in this course is licensed under the MIT License.
If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.