Why I use ReactUpdated: October 11, 2019
React is my tool of choice for building modern websites. Before exploring a couple of reasons why to use React, let's talk about what actually is React.
What is React?
In React, we can use the same approach, but instead of getting a value in return, we can get a UI component.
With a given set of inputs, the output (how the component looks on the page) will always be the same.
React was built with the idea of one-way data flow, which means that data changes come from the top of the app and are propagated downwards through its various components.
In order to build predictable apps, it's vital to know when and how the state of your app changes.
Instead of the source of truth of the state of your app living inside of the DOM, it lives inside your React component. So we can decide when the state should change and how to the UI should change when the state changes.
Basically, the UI updates only if the state updates, according to what is called one-way dataflow.
Declarative UI means that React allows you to describe what the UI should look like and not how it gets updated. While the library will take care of updating the DOM, we can focus on how the state inside a component changes and what the UI will look like once the state has been updated.
An example of the declarative approach is the
The imperative approach, instead, consists in writing:
React itself is a UI library. However, to get a simple React app up and running, you need the right combination of different technologies, like: NPM, Babel, and Webpack. Moreover, you need to choose a router (if you need one), since React doesn't come with a built in router. Then, you have to consider how to style your app, use or not to use css-in-js and finally how to manage the state.
Let's now have a look on how all these pieces fit together.
Webpack is a module bundler. Instead of importing the scripts in the index.html, it bundles together all our modules in order to create a single file that the browser can read.
Even if React doesn't have a build-in router, the most popular one is React Router. The job of a router is to render specific components based on the current Url.
If the user is in the home page (
/), the router will render the Home component. When the user visits the
/about, the router will render the About component.
The classic way of styling a React application is to use a CSS file, or SASS or any other CSS pre-processor where you have classes and the cascading effect. However, if we want to fully embrace the whole component model idea, we could write CSS inside our JS file (css-in-js) in order to have all the styles for a component live in the component itself and in this way avoid the problem of overwriting classes with the cascading effect.
One of the most popular libraries for writing CSS in JS is Styled Components and below you can see how to style a button with it:
Despite being created with different philosophies in mind, React and Redux have been used frequently together in the last 2-3 years. More recently, with the new features added to React (i.e. Hooks), developers are starting to realize that Redux is not always necessary in a React application and you may never need Redux, unless working on some big application with several moving parts.
Many applications and tools have been built using React or on top of React. For instance, we have my favorite open source framework Gatsby.js, based on React that allows developers to build blazing fast websites and apps and Styled Components, which helps developers to style apps, while using the best of ES6 and CSS.
Facebook has invested and is investing heavily in React's development, while focusing and solving the right problems. Moreover, the React community is always welcoming newcomers and ready to help. I guarantee you that any time you will encounter a problem in one of your projects, there will always be someone else who faced and solved the same problem before you.
If you are interested in getting started with React or simply want to keep up with the ecosystem, check the following links: React.js Official Documentation, React.js Newsletter and React.js Subreddit.