What is React.js?
In React, you develop your applications by creating reusable components that you can think of as independent Lego blocks. These components are individual pieces of a final interface, which, when assembled, form the application’s entire user interface.
A Brief History of React.js
Back in 2011, Facebook had a massive user base and faced a challenging task. It wanted to offer users a richer user experience by building a more dynamic and more responsive user interface that was fast and highly performant.
Jordan Walke, one of Facebook’s software engineers, created React to do just that. React simplified the development process by providing a more organized and structured way of building dynamic and interactive user interfaces with reusable components.
What does React.js do?
Typically, you request a webpage by typing its URL into your web browser. Your browser then sends a request for that webpage, which your browser renders. If you click a link on that webpage to go to another page on the website, a new request is sent to the server to get that new page.
This back-and-forth loading pattern between your browser (the client) and the server continues for every new page or resource you try to access on a website. This typical approach to loading websites works just fine, but consider a very data-driven website. The back and forth loading of the full webpage would be redundant and create a poor user experience.
This pattern is known as client-side routing because the client doesn’t have to reload the full webpage to get a new page each time a user makes a new request. Instead, React intercepts the request and only fetches and changes the sections that need changing without having to trigger a full page reload. This approach results in better performance and a more dynamic user experience.
React relies on a virtual DOM, which is a copy of the actual DOM. React’s virtual DOM is immediately reloaded to reflect this new change whenever there is a change in the data state. After which, React compares the virtual DOM to the actual DOM to figure out what exactly has changed.
React then figures out the least expensive way to patch the actual DOM with that update without rendering the actual DOM. As a result, React’s components and UIs very quickly reflect the changes since you don’t have to reload an entire page every time something updates.
How to Use React.js
In contrast to other frameworks like Angular, React doesn’t enforce strict rules for code conventions or file organization. This means developers and teams are free to set conventions that suit them best and implement React however they see fit. With React, you can use as much or as little as you need due to its flexibility.
Using React, you can create a single button, a few pieces of an interface, or your entire app’s user interface. You can gradually adopt and integrate it into an already existing application with a sprinkle of interactivity or, better yet, use it to build full-fledged powerful React applications from the ground up, depending on your need.
Plugging React Into a Website
You can plug React into an already existing web app over a content delivery network (CDN) to add some interactivity to that HTML page. By doing so, React gains control over that specific portion of that website, like a sidebar, widget, or something else entirely. These are just reusable and interactive React components with a sprinkle of React functionality.
You can achieve just that in three simple steps.
The first step is to add the two main CDN scripts to your website’s HTML index file. You need these scripts to load React into your app over a CDN service.
<!-- The first link is that of the core React library API itself". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<!-- The second link is that of the React DOM needed to render to the DOM". -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- The 3rd link is that of Babel, which is needed to compile our React code so it is understood by all browsers". -->
<!-- Load the React component file. -->
<script type="text/babel" src="like_widget.js"></script>
<!-- ... Your existing HTML markup ... -->
<!-- ... Your existing HTML markup ... -->
// Custom React component function that returns a JSX syntax
const ActualWidget = () => <h1>Hello World</h1>;
// Select the container
const container = document.getElementById("like_widget_container");
// Render the component to the DOM
ReactDOM.render(<ActualWidget />, container);
If you run the application, it will render “Hello World” to the browser in the exact spot you marked as shown below.
Creating a Fully-Fledged React App
Although you can easily drop React into an existing web application to create small pieces of an interface, it is more practical to use React to build fully-fledged web applications. However, React arguably has heavy tooling configuration requirements that are typically daunting and tedious to set up when creating new React applications.
Luckily, you don’t need to learn this build setup or configure the build tools yourself. Facebook has created a Node package command-line tool called create-react-app to help you generate a boilerplate version of a React application. This package benefits you from working out of the box and provides a consistent structure for React applications that you will recognize when moving between React projects.
Creating a new React project is as simple as running the following commands in your terminal:
npx create-react-app my-new-app
Because of its ability to create fast, efficient, and scalable web applications, React has gained stability and popularity. Thousands of web applications use it today, from well-established companies to new start-ups. A few notable mentions are:
- The New York Times
- Khan Academy
- WhatsApp Web
React has also grown more robust and can now be used to build native mobile applications using React Native and Desktop apps using Electron.js.
Getting Started With React.JS