create-react-app
doesn't always cut it, but I can never remember how to set up a React project from scratch... This repo contains some super minimal boilerplate code for a starter React project. This template uses yarn
instead of npm
, but if you'd like to use npm
, just delete yarn.lock
.
- eslint and prettier (along with some opinionated formatting rules)
- Husky and lint-staged, to format and lint files with pre-commit hooks
- Webpack 5 and the other 700 dev dependencies needed to run a single JS file
- SCSS out of the box, along with postcss and autoprefixer
- Some simple but yet somehow still confusing webpack configuration
- Includes hot reload
- Support for importing SVG and PNG
- Support for importing raw text files (along with markdown and shader code because why not?)
package.json
scripts to format JS and SCSS files and a script to lint JS files
In order to use this TypeScript template, you'll need to clone the repo. Use this template will create a template from the master branch.
mkdir some_folder && cd $_
git clone https://github.com/ctcuff/react-starter-template.git .
rm -rf .git
(Remove starter version control)git init
(Initialize your own git repo)yarn
(ornpm install
) (Install dependencies)
From there, you probably want to rename the react-starter-template
folder to whatever the name of your new project is. Don't forget to rename it in package.json too!
In case you were wondering why there's so much stuff in package.json
react
,react-dom
: Necessary React packages
@babel/core
,@babel/preset-env
,@babel/preset-react
,babel-loader
: Used to transpile JS/React files and allows JSX syntax@babel/preset-typescript
Includes@babel/plugin-transform-typescript
to add support for types syntax@babel/plugin-transform-runtime
: Allows the use ofasync
andawait
autoprefixer
,postcss
,sass
: Automagically adds vendor prefixes and transpiles future CSS syntax.sass
allows SCSS to be used.css-loader
,postcss-loader
,sass-loader
,style-loader
: Allows CSS and SCSS files to be imported from JS files. Also allows webpack to process CSS with postcss.eslint
(and other eslint plugins),prettier
: Linting and formattinghusky
,lint-staged
: Runs custom hooks like linting and formatting before commitsbabel-eslint
,eslint-webpack-plugin
: Allows webpack to throw errors and display warnings in the console if eslint rules are brokenhtml-webpack-plugin
: Offers customization over webpack's HTML entry pointwebpack
,webpack-cli
,webpack-dev-server
: Necessary webpack packages. Allows you to run a configurable development server that auto-reloads when files change.