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
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'
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.
Top comments (0)