This project will no longer be updated, in favor of focusing my efforts on the Scalable React Boilerplate and Generator Scalable React. Feel free to keep using it!
The hardest part about React is getting setup. This project aims to help anyone quickly get bootstrapped with the latest versions of React, Redux, Webpack, etc. It uses Hot Module Reloading and has a few optional add-ons like React Foundation, Redux Form, etc.
It follows best practices, including the AirBnb JS & JSX style guides and uses the FTF (file-type first) organizational pattern.
If you're looking for something with a bit more features, take a look at the Scalable React Boilerplate project!
To try the example application out or to use the project, follow the instructions below.
-
Clone repo
git clone https://github.com/RyanCCollins/react-redux-simple-starter.git
-
Install dependencies
npm run setup
-
Run development server
npm run start
Development server should be running at http://localhost:8080/
-
Make build
npm run build
- Some files left out for brevity. Please reference the files in the React Redux Simple Starter project for information about the file structure.
.
├── README.md
├── LICENSE
├── index.html
├── package.json
├── webpack.config.js
├── app/
| ├── fonts
| ├── images
| ├── src
| | ├── actions
| | ├── components
| | | ├── MyComponent
| | | ├── MyOtherComponent
| | | ├── App.js
| | | ├── Main.js
| | | └── index.js
| | ├── containers
| | | ├── MyContainer
| | | └── index.js
| | ├── pages
| | ├── reducers
| | ├── store
| | ├── utils
| | └── index.js
| ├── styles
| └── tests
| | ├── actions
| | ├── components
| | ├── reducers
| | └── test_helper.js
├── .eslintignore
├── .eslintrc
├── .gitattributes
└── .gitignore
-
npm run setup
Installs the application's dependencies
-
npm run test
Runs unit tests
-
npm run test:watch
Watches for changes to run unit tests
-
npm run build
Bundles the application
-
npm run dev
Starts webpack development server
-
npm run lint
Runs the linter
-
npm run deploy
Creates the production ready files
-
npm run clean
Removes the bundled code and the production ready files
- Node - JS runtime environment
- npm - package manager
- Babel - ES6 transpiler
- Webpack - module bundler & task runner
- React - interfaces
- react-hot-loader - hot reloading for react
- react-router - react application router
- react-redux - react bindings for redux
- react-css-modules - React CSS Modules implement automatic mapping of CSS modules.
- react-foundation - Foundation React components, use or don't use.
- Immutable - data structures
- Redux - awesome flux architecture
- Redux Form- works with React Redux to enable an html form in React to use Redux to store all of its state.
- redux-thunk - thunk middleware for redux
- isomorphic-fetch - API fetch network requests
- redux-devtools - redux development tool
- SASS - styles
- ESLint - linter
- Mocha - unit tests
- jsdom - vdom to test React without browser
- Expect - assertion library
- Chai / Immutable - assertion library for Immutable JS
- A bunch of useful scripts
- Write README file
- Setup Filetype First organization
- Add better demonstration of included libraries (run the test application)
- Write unit tests and setup folder structure for testing (See tests directory for examples)
- Migrate to Feature First file organization as noted in this article and in the React Boilerplate (See here)
- Write component tests using Jest and / or Enzyme
- Write wiki / other documentation
- Implement a Rails like component generator
This project is loosely based on: This boilerplate.
Thank you to @mezod for their hard work and inspiration.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent