React is the world’s most popular JavaScript framework. Let’s take a look at 4 core concepts of React.
Manipulating the DOM
The DOM is a tree representation of the page. Before React came along developers had to manipulate the DOM either directly or indirectly through a library. This meant that websites were built in an imperative way — developers would put things like if (user === 'isLoggedIn') into check if the user was logged in and then go change some parts of the page based on that. After a while it becomes difficult to see the relationships between events and all the cases - especially for larger websites.
React came up with a more declarative approach. Instead of directly saying ‘do this when that happens’ etc. Instead we tell React ‘this is the state of our app’ and React can automatically do the DOM manipulation for us. This results in less complexity since all the different ‘states’ are accounted for in one place.
Component architecture
React has this idea that the page is built up of components containing components. Components are just JavaScript functions that receive some sort of input and return a React element.
Components can be used in multiple different places and as a result your app has a consistent look and feel, it’s easier to maintain and grow your code base and future development should be faster than current development since you are more likely to use components you have already built, rather than starting from scratch.
One way data flow
React apps are organized into a series of nested components, and data is only passed down from components to the child components. React uses a virtual DOM, which is a DOM kept in memory. All view changes are first reflected in the virtual DOM. When the state changes in a React component it will trickle down the virtual DOM.
This one way flow makes the application much easier to understand and debug since if there is something wrong with a particular function, we only need to go to the component where the state for the function lives. We don’t need to go outside of the component or look anywhere else, which is very helpful for large projects.
UI library
Often developers use the terms framework and library interchangeably but generally speaking with library you are in charge of the flow of the application, however when you use a framework, the framework is in control of the flow.
React is a library and has fewer things bundled with it than Angular, for example. Many people like this because it allows the developer more freedom to mix and match the other tools they can use but ultimately whether to use a library or a framework comes down to a matter of preference.
