Build a Slim React starter from the ground up in 2020

Gavin Chan — Thu, 20 Feb 2020 09:22:59 +0000

Nowadays, React become the very most popular and powerful javascript library for building UI, surpassing Vue and Angular. I have switched from Angular to React for less than 1 month and was astonished by its flexible JSX syntax and strong render capability.

Angular is a framework for building scalable enterprise-level apps with Typescript while React is focused on building View. At the very beginning, you guys may feel confused about how to configure a React starter for real web development.

Actually, Create-react-app is great and well-designed but is not 100% suitable for your business case. So let’s configure a react starter and really learn a lot from it.

In this article, you will go over the process to use React, Webpack, Babel, Eslint, Prettier to build a development-ready react starter.

Prerequisite

Get Started

create project folder and package.json

install webpack & webpack-cli

yarn add -D webpack webpack-cli

Note: without installing webpack-cli, your webpack command will not work

create src, public, src/index.html, src/main.js, webpack.config.js

as follows:

let's have a test, and run this app

cd src folder, create a module named Greeter.js
import Greeter module, create a node, and append to <div id="root"></div>
configure webpack in webpack.config.js (in development mode)
add "build": "webpack" to npm scripts in package.json
npm run build, build output will be printed on Terminal console

we should serve this project, not static html

yarn add -D webpack-dev-server
configure in webpack.config.js
enable HMR as well
add "start:dev": "webpack-dev-server" to npm script
npm run start:dev
what a mess! we need silent webpack output by adding stats: 'minimal'

before:

after:

Okay, React is coming

yarn add react react-dom
yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react
configure babel in .babelrc
use babel-loader
clear main.js and remove Greeter.js, let's write a React Component

configure eslint

yarn add -D eslint eslint-plugin-import eslint-config-airbnb-base eslint-plugin-react
./node_modules/.bin/eslint --init to generate eslint default configuration
add "extends": "airbnb-base" to .eslintrc
add eslint plugin to code editor, for me, sublimeLinter and subimeLinter-eslint

formate your code with Prettier

yarn add husky lint-staged prettier
add the following fields to your package.json
"formate": "./node_modules/.bin/prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'" to your package.json
add JsPrettier plugin to sublime
give your first git commit, and Bingo!

source code: https://github.com/cnscorpions/react-slim-starter
My Blog: https://oh-jeez-rick.netlify.com/

Feel free to comment and share your opinion.

DEV Community: Gavin Chan