React Nano Kit

A minimalistic kit to bootstrap a React application with a set of preconfigured tools.

Included tools

• yarn for managing our packages
• react (obviously)
• redux for managing application state
• redux-thunk for managing async actions in Redux
• redux-devtools-extension for debugging your Redux state
• webpack for module bundling

Loaders

• babel-loader to use ES6+ JavaScript features
• sass-loader to compile Sass files
• postcss-loader to process compiled CSS

Others

• eslint for JavaScript linting
• eslint-config-airbnb for lint configuration
• flow for static type checking
• jest for testing
• prettier for auto formatting our code
• webpack-dev-server for running a local dev server

Usage

Clone the repo, using your own project name

git clone https://github.com/kyleshevlin/react-nano-kit <project-name>
cd <project-name>

If Yarn is not already installed globally on your machine, install it.

npm install -g yarn

Now we can run a script to do some initial setup of your project.

yarn run setup

This script does the following:

• Removes previous .git directory and README
• Installs all dependencies with Yarn
• Initializes a new git repo
• Touches a README file and adds some text to the file for you to edit, with a reminder to also edit your package.json file with your new project's information
• Echoes instructions for your next steps

Now, we can start the app in two ways. First, we can build the app into a build/ directory:

yarn build

Or we can start it using webpack-dev-server at http://localhost:8080:

yarn start