Bonjour React 😉

How it all started?

Have you ever heard the term Single-page application? If not then keep reading. For a moment let's go back in time before Single-page application's existed. Websites and web applications in the past were rendered from the server, meaning when a user requests something in the browser an HTML file and all its associated files will be granted back from the web server. The user sees the rendered HTML in the browser and can interact with it. Now let's say he makes another request from the same page then the same events of request and response would initiate again. Now you can notice something here, most of the crucial thing is done by the server whereas the browser plays a minimal role i.e just rendering pages. Ever heard of server-side rendering? You can google it to learn more as my main focus is on client-side rendering.

The Modern Era

Let's return to the modern era of JavaScript where the focus has shifted from server to client. A user visits a URL and requests one HTML file and one large JavaScript file. After some time the user sees the JavaScript Rendered HTML in the browser and starts to interact with it. Now every additional page requests the user makes wouldn't request more files from the web server, but it would use the initially requested JavaScript file to render the new page. The HTML file then takes the responsibility to execute all linked JavaScript files to render the whole application. Now the entire process above is what is termed client-side rendering.

React.js

There are several solutions for client-side rendering and React one among all those makes this possible. React is a JavaScript library for building user interfaces (that's what you see when you visit the official react.js page). It is maintained by Facebook and a community of individual developers and companies.

Now with the rise of React, the concept of components also became well-known. Every component define's its design and functionality. After defining it once, we can reuse it again and build a complete arrangement of components for building an entire application.

One of the key features of React is its use of a virtual DOM (Document Object Model). The virtual DOM is a representation of the actual DOM, which is the structure of a webpage. When a component's state changes, React will update the virtual DOM and then make the necessary changes to the actual DOM. This allows for efficient updates and rendering, making React well-suited for building large and complex applications that need real-time updates.

Another key feature of React is its use of JSX. JSX is a special syntax that allows you to write HTML-like elements in your JavaScript code. This can make it easier to understand and work with your components, as the structure of your components is clearly defined in the code.

In addition to the core features of React, several additional tools and libraries can be used in conjunction with React to build web applications. For example, React Router is a popular library for handling client-side routing, and Redux is a library that can be used to manage the state of your application.

In summary, React.js is a powerful JavaScript library for building user interfaces. It allows developers to create reusable components and utilizes a virtual DOM for efficient updates and rendering. Its use of JSX makes it easy to work with and understand the structure of components. With the help of additional tools and libraries, React can be used to build large and complex web applications that update in real-time.