In the Simplifying React series, I will be going through the basics of React so you can start coding your React app. Today we will start by discussing what is React and why you should learn it.
React is a front end JavaScript library used to build websites and applications. At the time of writing this article, it is one of the most popular JavaScript libraries out there. Many large companies use React, including Airbnb, eBay, Netflix and PayPal to name a few, but why is that?
React has many advantages which are why it has become so popular. Some of these are its simplicity, ingenuity and support.
Advantage #1: Simplicity
React uses a component-based architecture to build dynamic user interfaces. It is a library that allows developers to decide what features and components they would like to use in their application. This reduces the barriers to entry to React. Many React libraries are available to handle routing and state management for example.
This is very different from a framework like Angular, which comes with a lot more built-in functionality out of the box.
Modern development patterns have meant that we are moving towards using small libraries in our codebases. This is a move away from the use of huge libraries or frameworks that do it all. React fits into this.
For example, the core React library is used to build web interfaces. ReactDom is used to deal with all things DOM specific. React Native is used to create mobile applications, and so on. So as you can see, React libraries focus on doing one thing and doing it well. If you need that library for your project, pull it in. This also has the benefit of keeping the size of your project as small as possible.
Advantage #2: Ingenuity
The virtual DOM, Javascript XML (JSX) and one-way data flow are some key features of React. These tools deal with common problems that modern JavaScript developers face. Let's take a look at these in a bit more detail.
React approaches making changes to the DOM by creating its own version of the DOM in memory. This means that, when changes are needed, React can update parts of the DOM in memory (virtual DOM) without updating the whole thing. This is a much more efficient way of handling changes to the DOM.
JSX is React's approach to templating. JSX looks like HTML written inside of our JavaScript files. It compiles down to vanilla JavaScript. This means that components can be built in JavaScript.
React also implements a one-way data flow model. That means that data flows from the app down to components and then into their child components. If data is changed then the updated data is sent back down to the application. This maintains a single source of truth for data.
Advantage #3: Support
React is developed and maintained by developers at Facebook for its online platform. They have also created several libraries. For this reason, many developers feel they can rely on React to be maintained and supported for a while to come.
The Create-React-App command makes it easy to get a new React app started. All the initial tooling and working is handled for you. This means that we can focus on learning and building more complex React apps.
React has also incorporated the ES6+ way of writing JavaScript from the beginning. This meant that for those learning JavaScript, React was easy to pick up. If you are already familiar with JavaScript then React is easy to pick up. But it's not necessary to know JavaScript beforehand, but it will definitely make your journey easier.
If you've learnt or are starting to learn React, what were the reasons behind your choice to learn it and what difficulties did you come across? Do you have any advice for people choosing to learn React today?