React Build Workflow
Published: 2020-12-23 22:10:04

###### *This article is sponsored by [Flutterwave](https://dashboard.flutterwave.com/signup?referrals=RV686851) - Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!*

React is a library with lots of features. These features are due to the *build-in dependencies* or *packages* made available by the React team. These dependencies rely on one another during the *compilation process* for an extensive workflow irrespective of whether it is a *single-page* (recommended) or a *multi-page application*.

### Why Build a React Workflow?
#### Optimal Code
React makes it possible to write minimum code in a complex application. The effect is that it makes the app faster with a high-performance rate.

#### Next-generation JavaScript Feature
*Next-generation JavaScript* features are features from ES6+. React supports next-generation JavaScript because it has tools that ship code to work across all browsers irrespective of the version (**Browser Compatibility** and **CSS auto-prefix**). This makes code linear, readable, faster, less error-prone, and maintainable. Babel is such a tool that allows the use of **JSX** to support the next-gen JavaScript features.

### How to Build a React Workflow?
#### Dependency Management Tool
*Package manager tools* such as **NPM** (**Node Package Manager**) and **Yarn** are tools to install dependencies. React comes with dependencies like *react*, *react-dom*, *webpack*, etc.

#### Bundler
*Bundlers* are used to split up files into a couple of files during the compilation process. *Split up files are tiny files reserved for tiny request* where each file rely on one another. After a successful request, these files are **bundled** together into fewer files because *modern browsers do not support split-up files*. An example of a common and recommended bundler is **webpack**.

> Babel supports JSX

#### Compiler
*Babel with Presets* is hooked in the webpack configuration for the bundling and optimization process.

#### Development Server
*React dependencies* provide a server that runs on a PC. This allows developers to test apps on the fly. The module *react-script* is responsible for running the server.

#### Linting
React allows *linting* to save time to find errors when the server is running. ESLint (**Babel ESLint**) is such a feature that warns when an error occurs. *It highlights where the errors are* for easier debugging. 

These tools are set-up by the React Community for an effective web app.

React will be installed in the next article with a package or tool called *Create React App* and will notice a finite loop of dependency within another dependency because dependencies rely on one other. The good news Is you do not have to worry about the configuration. This is taken care of by the React community. Just do the installation!

**Happy Coding!!!**

<a href="https://www.buymeacoffee.com/bellotech" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

{% user bello %}

#### Techstack | Flutterwave 
Techstack article, sponsored by Flutterwave. Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!  Also, you get a Flutterwave dollar barter card when you [signup](https://dashboard.flutterwave.com/signup?referrals=RV686851). Open an online store and take your business anywhere in the world.

{% youtube ClXVUM3Rf7A %}

[Sign up today to get started](https://dashboard.flutterwave.com/signup?referrals=RV686851)

[Support](https://dashboard.flutterwave.com/donate/3lo9klliqwbu) what I do and push me to keep making free content.