/react-starter-template

Super minimal boiler plate code for most of my React projects, because I can never remember how to set up webpack... but lets be honest here, does anyone really know how to set up webpack 🤔

Primary LanguageJavaScript

Yet Another React App

Why

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.

What's Included

  • 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

Usage with git clone

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.

  1. mkdir some_folder && cd $_
  2. git clone https://github.com/ctcuff/react-starter-template.git .
  3. rm -rf .git (Remove starter version control)
  4. git init (Initialize your own git repo)
  5. yarn (or npm 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!

Explanation of dependencies

In case you were wondering why there's so much stuff in package.json

dependencies

  • react, react-dom: Necessary React packages

devDependencies

  • @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 of async and await
  • 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 formatting
  • husky, lint-staged: Runs custom hooks like linting and formatting before commits
  • babel-eslint, eslint-webpack-plugin: Allows webpack to throw errors and display warnings in the console if eslint rules are broken
  • html-webpack-plugin: Offers customization over webpack's HTML entry point
  • webpack, webpack-cli, webpack-dev-server: Necessary webpack packages. Allows you to run a configurable development server that auto-reloads when files change.