Building a Custom React Toolchain from Scratch
Understanding the Power of React
One essential thing to grasp is that you can use as much or as little React as you want on your website. This means you can apply React to specific portions of your site where you need it, without committing to a full-scale React project.
Setting Up a Weekend Project
Imagine setting up a new React app toolchain for a weekend project, with only the necessary packages to get started. You could include features like bundling, linting, formatting, and more, without the burden of abstract and opinionated tools. This approach allows you to learn how the tools work behind the scenes and how to combine them to create something substantial.
Our Toolchain
We’ll be building a toolchain that includes:
- Bundling (with Parcel)
- Linting and Formatting (with ESLint and Prettier)
- Transpiling (with Babel)
- Styling (CSS/SCSS/Styled Components)
- Data Fetching (with fetch)
Getting Started
To begin, clone the react-app-toolchain repo, which contains the necessary folders and files to get started.
git clone https://example.com/react-app-toolchain.gitIncluding React
First, include the two necessary dependencies for React: react and react-dom. This will update the package.json file to include the added dependencies.
{
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}Adding a Bundler
Next, we’ll add a bundler using Parcel, a zero-config, lightweight, and fast web application bundler. Update the public/index.html file and src/App.js accordingly, and add a start script to package.json that instructs Parcel on the entry point of your app.
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return <h1>Hello World!</h1>;
};
ReactDOM.render(<App />, document.getElementById('root'));Formatting
To format our files, we’ll use Prettier, an opinionated code formatter that works with technologies like HTML, CSS, and JavaScript. Add two config files: .prettierrc and .prettierignore, and update the package.json scripts to include a format command.
{
"scripts": {
"format": "prettier --write ."
}
}Linting
To enforce formatting rules, we’ll use ESLint, a JavaScript linter that helps you find problems in your code. Add the necessary dependencies, update the .eslintrc file with the configs, and add a lint script to package.json.
{
"scripts": {
"lint": "eslint ."
}
}Styling
We’ll explore three styling options: CSS, SCSS, and Styled Components. Update the app.css and app.scss files, and add the necessary classes to the h1 in App.js.
.app {
background-color: #f0f0f0;
padding: 20px;
}import React from 'react';
import './app.css';
const App = () => {
return <h1 className="app">Hello World!</h1>;
};Data Fetching
Finally, we’ll add data fetching using the fetch API. Update App.js and Users.js accordingly.
import React, { useState, useEffect } from 'react';
const App = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('https://api.example.com/users')
.then(response => response.json())
.then(data => setUsers(data));
}, []);
return (
<div>
{users.map(user => (
<div key={user.id}>{user.name}</div>
))}
</div>
);
};The Final Code
The final code is available in the final branch. By building a custom React toolchain from scratch, you gain a deeper understanding of how the tools work together, allowing you to tailor your development environment to your specific needs.
Why Bother?
You might wonder why you should bother building a custom toolchain when you could use an existing one. The answer lies in the power of knowledge and control. By understanding the inner workings of your toolchain, you can make informed decisions about which resources are essential to your development and vice versa.
What’s Next?
Now that you’ve set up your custom React toolchain, you can explore additional features like routing and form management. Remember, your toolchain is yours to use and mutate as you see fit. So, why not create one?