What is React?
React is a very ingenious library that is conceived around the idea of reusable components and state management. A “component” is just a chunk of code that you can call, use or render when needed and can also be removed from view when not needed. This keeps the code very modular and allows flexibility in scaling an application, while also maintaining a simpler way to debug and troubleshoot your code without running through hundreds or thousands of lines of code.
JSX and Babel
JSX is a lot more readable to humans, though it does not necessarily mean it can be understood by the browsers. Babel would reconfigure the code, or transpile the code, into something that the browser can completely understand and render.
What’s also cool is that React has a built in feature to run code in a virtual DOM, which saves you time. The purpose of the virtual DOM within React is to create a virtual rendering in the in-memory data structure cache, so it can compare what is currently rendered on a page versus what to render next. React is smart enough to detect only the differences and re-render what is necessary, without changing anything that is the same. This virtual DOM feature saves you re-rendering time because the application just doesn’t have to re-render every single element of the page.
User Interfaces and Components
React’s main purpose is to help front end developers create user interfaces that dynamically changes as it interacts with its users. In traditional front end development, pages typically have to refresh or redirect to a new link or page in order to repopulate data or show a different feature of the site. Using React, front end developers can now build web pages that will never (if rarely) have to refresh or redirect to a different URL because the same page can be used to show different features.
Imagine that your user doesn’t have to wait for a new page to load just to access your contact form or view a new section of your site. This is done through the power and magic of state management.
Since users are interacting and moving about on a single website, it’s important to have a way to track what the site is currently rendering and what to render next. This “tracking” is called state and React has a beautiful state management feature built into the library. Without getting too deep and technical, state management allows developers to assign different values to a component’s state depending on what a user is presently doing. Whether its a simple to-do application or a full stack Netflix clone, users will engage with the website in a way that needs to change values of some sort and cause the site to re-render the appropriate state or component.
Why Build with React?
React is a client-side solution for building web applications. While traditional applications that require a back end server still exist, the benefits of having a client-side web application is that it would shorten processing and rendering time of the application.
Think of all those times you’ve waited for a page to load after clicking a link. The delay can be attributed to a number of possible reasons such as a large number of users are requesting the page at once, or the server being busy processing other things on its bandwidth.
In React, you can sidestep this by providing the application all it’s necessary code, components and routes on the client side. Since the information is already available on the user’s end, the change of state, rendered components or even linking to another “page” is all happening on their machine.
React has a great tool called React Router. React Router allows developers to build applications and simulate back end routes without actually having a back end. As a developer, you would write routes and assign them to numerous components that are to be rendered, while disabling the browser from actually making a page refresh or requiring it to make a call to a server. This is totally awesome and doesn’t restrict you from only building “one page” applications. You can build a single-page-application (or SPA) that mimics a full website with multiple pages and routes all from the same page.