If you are a control freak like me, you are going to like this post!
Devs generally favor create-react-app when bootstrapping a new react project, and this is because 'create-react-app' is a reliable and simple tool to use when building SPA's (also made and backed by Facebook)
It works great for projects that are:
- Big in scope
- Single Page Apps
- Using redux, global state management
(But) There are a family of small apps, base/extendable components, or embedded components that don't need the amount of boilerplate and opinions that 'create-react-app' provides, moreover these components and apps could benefit from a smaller, and less sophisticated react starter.
Enter the lean react starter
In this post we are going to create a very lean and modern react starter that can get you going really quick on your next project, let's get started.
Go to your dev directory and say:
mkdir lean-react-starter && cd lean-react-starter
npm init
npm init is a cool tool to create package.json files
Set the name as whatever you want (or lean-react-starter), and leave everything else as default.
Now you have a package.json that looks like this:
Project structure
Now that we have our package.json created, we are going to use it to install all types of dependencies that we will need to run a react project. But first, let's come up with a directory structure that makes sense. Modify the 'main' attribute in package.json to be:
"/src/index.js"
then
touch index.js && mkdir src && mv index.js src
We are going to use src as our development directory. Now let's add a directory where we can put the stuff that our app publicly needs, namely index.html
Do:
touch index.html && mkdir public && mv index.html public
Webpack
If you are not familiar with webpack, this is a tool that allow us to build our react app into a packaged file, which we can use to load as a script anywhere. let's do a:
npm install --save-dev webpack webpack-cli webpack-dev-server
We also need the CLI to run webpack, and we like to also use their development server so we can run something locally and see what we are building
Babel
Another interesting tool that will allow us to write "very fancy" JavaScript and 'make' all browsers understand our code. Babel also help us to access the latest classes, and functions that are available using something called polyfill. Let's do:
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev babel-loader
The presets are a predefined set of functionality that we know we are going to need for react support, also we need a loader to instruct webpack on how to deal with babel
React
Well, this is a react starter after all, we surely need the main protein at this point. Do:
npm install react react-dom
Notice that we didn't say --save-dev this time, that's because this is a dependency that we want to ship along with our amazing codes, the other installs (webpack, babel) were dependencies that we only need to develop our magic.
Time to run this app
This is what we have done to our package.json so far.
Also, our project structure now fashions a node_modules directory that is housing all of our dev-dependencies and react. With this we are ready to start our project, but first we need a couple of things. Do:
touch .babelrc
This is a configuration file for babel to know what to use, this is where we are going to declare the 'presets' that we previously installed
Add this code to .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}We also have a couple of instructions for webpack, do:
touch webpack.config.js
And add this to its configuration file:
module.exports = {
mode: "development"
}Lastly, we want our package.json to know what to do when we want to run our app. Do this:
"scripts": {
"start": "webpack serve",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
}Here we are instructing package.json to run webpack when we want to 'run' the app (start), and also when we are ready to build it (build)
For the moment let's output something silly on the browser, just to see that our setup makes sense. Do: echo '<h1>Lean react starter</h1>' >> public/index.html
And:
npm start
To stop the server use CTRL - C
It's time to reactify this react starter
touch src/App.js
Write this:
import React from 'react';
const App = (props) => {
return (
<div>{props.title}</div>
)
}
export default App;Webpack needs to change a bit to know how to load the react stuff
module.exports = {
mode: "development",
module: {
rules: [
{
loader: "babel-loader"
}
]
}
}Now time to tell index.js how to render our app.
import React from 'react';
import ReactDom from 'react-dom/client';
import App from './App';
ReactDom.createRoot(document.querySelector(".container")).render(<App title="The leanest react starter"/>);Lastly, let's tell index.html that our app is ready to rock-n-roll:
<!DOCTYPE html>
<html>
<head>
<title>Lean react starter</title>
</head>
<body>
<div class="container"></div>
<script src="main.js"></script>
</body>
</html>Let's run it once again
npm start
The webpack server now listens to code changes and reloads the app for you, now you don't need to re-run the app (npm start) to see the changes on the view
Now for the build
npm run build
Set your webpack.mode to 'production' to allow webpack to optimize your code and have a lean bundle at the end
And voila!, this is all you need to get a 'production' ready react project started from scratch. You can also find the code for this on github.