React Boilerplate
You can try out this project here
Requirements
Quick Start
Setup
npm install
for Development
npm start
for Production
npm install -g serve
npm run build
npm run serve
for Deployment (using surge)
npm install -g surge
npm run build
npm run deploy
# You may have to create an account
Other Commands
npm test
npm run test:watch
npm run test:verbose
npm run test:coverage
npm run lint
npm run lint:fix
Setup Instructions
To setup your own project, you will need to copy the contents of this project into a new repo. You will need to update the content in these files to names of your project and yourself:
- package.json: name, version, description, repository, author, bugs, homepage
- LICENSE: (update to your preferred license)
- client/index.html: description and title
- this README.md
This is also a good time to go through the included libraries to add or remove features that you want.
After this you can commit the files into a new repository and push up to your github. You can now start updating files in your client to begin working on your own project!
Features
- Webpack conveniently bundles your code for you.
- Babel lets you use ES6/7 features.
- Hot Module Reloading for JS and CSS makes development quick and easy.
- CSS pre-processor setup for LESS and SASS lets you keep your styles clean and organized.
- ESLint helps you maintain a high level of code quality.
- Jest and Enzyme give you a robust testing frame work to make sure your code works.
Code Structure
- config
- scripts
- client
- assets
- images
- icons
- components
- atoms
- molecules
- organisms
- templates
- pages
- environment
- hooks
- store
- actions
- reducers
- thunks
- tests
- styles
- utils
Component Heirarchy:
Environment > Pages > Templates > Organisms > Molecules > Atoms
This is based on atomic design. Learn more about atomic design.
Technologies
React - View Library
React-Router - Routing Library for React
Redux - State Manager
Redux-Persist - Persistent State
Webpack - Module Bundler
Bulma - CSS Framework
React Bulma Companion - Bulma Component Library
Material-UI - React Component Library
FontAwesome - Icons
Ramda - Functional Library
date-fns - Date Functions Library
ESLint - Code Linter
Jest - Testing Framework
Surge - Static Web Deployment