React Hooks Boilerplate with Live Reload & Styled Components

This boilerplate could help you start to play React Hooks APIs with Live Reload and Styled Component

Getting Started

To get you started you can simply clone the repository:

git clone https://github.com/Rajdeepc/react-hooks-boilerplate-styled-components.git

and install the dependencies

npm install

Prerequisites

You need git to clone the repository. You can get git from http://git-scm.com/.

A number of node.js tools is necessary to initialize and test the project. You must have node.js and its package manager (npm) installed. You can get them from http://nodejs.org/. The tools/modules used in this project are listed in package.json and include express, mongodb and mongoose.

Installing

Lint & Build

npm run lint
npm run build

Begin from scratch

Init project

Create a new directory then

npm init -y

Install dependencies

npm install react@latest react-dom@latest react-hot-loader

Install development dependencies

Babel

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

Webpack

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

ESLint Airbnb

npx install-peerdeps --dev eslint-config-airbnb
npm install babel-eslint --save-dev

Cross-env

npm install cross-env --save-dev

Styled-Components

npm install --save styled-components

Set up

Babel config

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

Running the tests

npm test

Deployment

You can use netlify or free github.io for deployments

Built With

• react-hot-loader is now compatible with React Hooks APIs.
• styled-components is compatible with React Hooks

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the GPL License - see the LICENSE.md file for details