3. It is easy to learn and use, has fast rendering capabilities and great third-party integrations/tools.
4. Commonly used for single-page applications (SPAs) and multi-page applications, with Server-Side Rendering available as well through libraries like Next.js or Remix.
5. Benefits of SSR include improved SEO, user experience, social sharing; drawbacks are longer time to interactive and vendor lock-in
History of React
React was developed by Facebook in 2011 to make their websites more dynamic and engaging. The project was started by Jordan Walke, a software engineer at Facebook. Since then, the piece of software has become an open-source library used by developers worldwide. It has a large and active community of developers who contribute to its development.
Released to the public in 2013, it underwent many changes to get to where it’s at now. You may see how the creators envisioned the project would look like in 2013 in a GitHub repository. One thing that you won’t see there are React Hooks. They were added, because the distinction between stateful and stateless components does not function anymore.
Overview of React
What Are the Differences Between React and JSX?
Contrary to popular opinion, React and JSX are two separate projects. JSX is the language extension that allows you to write HTML-like markup in your JS, while React (and React-DOM) is behind rendering everything to the screen.
To put it in other words: JSX provides a concise way to create elements, while React provides the means of outputting those elements. To put it simply, JSX is what you write and React handles what you do with it.
Benefits of React
Easy to Learn and Use
In React’s case, it’s different. The library is (or used to be) the small piece of the web apps cake. You will need to add other libraries, and the way to use them, but you will be able to choose which ones.
(Relatively) Fast Rendering
Great Third-Party Frameworks and Libraries
Remix, Next.js, Gatsby, Create React App, Storybook and so on. Those are only some of the frameworks built on top of React. Each one uses it or expands on it in their way.
In addition to the tools, there is a wider React ecosystem, with libraries, components, and plenty of other resources that will make your life easier when developing a React-based web application. The most popular third-party libraries:
- React Testing Library (Testing)
- Redux & Redux React (State management)
- React Router and React Router DOM (Routing)
- React Helmet (SEO)
- Tailwind CSS (styling)
Application of React in Web Development
Creating Single-Page Applications (SPAs)
These applications are the most common ones you will write using React. We will even go as far as to say that this will be almost exclusively what you will create.
This is the old way of creating websites. You would have multiple HTML files, and the browser had to fetch the contents of the next page, before you would see a new one. This meant you had to see a complete reload of a page before you could see what you wanted to see. Furthermore, when submitting a form, you would also have to wait for the browser to reload the page.
You may still create this kind of websites using e.g., Gatsby, though over the past few years we have seen a steady, and heartbreaking decline in usage of the framework.
React Native Web
When you create your app with React Native (RN), you may also reuse the code, thanks to RN Web. While some libraries won’t work in the web mode, a lot of them will. You won’t have to look far to see an example. Take Twitter’s mobile app, and their mobile version of a site.
For an answer to the question “what is React Native” go here.
Server-Side Rendering with React
Server-side rendering assembles pages on the server before sending them to the client. It can be done using Next.js, Remix or Razzle.
Advantages of SSR
- Reducing the burden on lower-end devices,
- Improves SEO,
- Improves user experience,
- Social sharing
- Longer time to interactive
- Vendor lock-in
- More expensive
Vue vs React, Angular vs React
These comparisons may only be made at a surface level.
With that being said:
- Angular is the most robust framework. It’s also the heaviest, and has the fewest number of third-party integrations
- Vue is conceptually between React and Angular. It allows for some flexibility, and you may use the “normal” HTML-like Vue syntax, or enable the JSX mode
- React is the most minimal of the three. No choices are made for you, but only some. Even though people used to see Redux as almost inseparable from React, it’s not the case anymore.
Why Should You Choose React?
What’s more important: despite being created over ten years ago, the framework hasn't lost popularity or usage at all. In fact, its popularity has only grown steadily over the years!