kwzm / React Mobx React Router Boilerplate
Licence: mit
A simple boilerplate based on create-react-app and add mobx, react-router, linter, prettier and so on. 一个简单的 react 脚手架依赖于 create-react-app 新增了 mobx react-router,linter,prettier 等。
Stars: ✭ 12
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Mobx React Router Boilerplate
React Mobx React Router4 Boilerplate
React, React-Router 4, MobX and Webpack 2-boilerplate with async routes.
Stars: ✭ 566 (+4616.67%)
Mutual labels: boilerplate, react-router, mobx
React Mobx State Tree
Create React App with MobX State Tree, Styled Components and GraphQL
Stars: ✭ 127 (+958.33%)
Mutual labels: create-react-app, boilerplate, mobx
Create React App Redux
React Router, Redux, Redux Thunk & Create React App boilerplate
Stars: ✭ 885 (+7275%)
Mutual labels: create-react-app, boilerplate, react-router
React Redux Auth0 Kit
Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Stars: ✭ 115 (+858.33%)
Mutual labels: create-react-app, boilerplate, react-router
Starter React Flux
Generate your React PWA project with TypeScript or JavaScript
Stars: ✭ 65 (+441.67%)
Mutual labels: prettier, create-react-app, react-router
React Ssr Starter
All have been introduced React environment
Stars: ✭ 20 (+66.67%)
Mutual labels: prettier, stylelint, react-router
Web
⚡️ Supercharged version of Create React App with all the bells and whistles.
Stars: ✭ 594 (+4850%)
Mutual labels: create-react-app, boilerplate, react-router
Nextjs Ts
Opinionated Next JS project boilerplate with TypeScript and Redux
Stars: ✭ 134 (+1016.67%)
Mutual labels: prettier, stylelint, boilerplate
React Cool Starter
😎 🐣 A starter boilerplate for a universal web app with the best development experience and a focus on performance and best practices.
Stars: ✭ 1,083 (+8925%)
Mutual labels: prettier, boilerplate, react-router
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (+166.67%)
Mutual labels: prettier, boilerplate, react-router
React Redux Saucepan
A minimal and universal react redux starter project. With hot reloading, linting and server-side rendering
Stars: ✭ 86 (+616.67%)
Mutual labels: prettier, boilerplate, react-router
react-mobx-router
Create React App with React Router 4 and MobX + Internationalization
Stars: ✭ 90 (+650%)
Mutual labels: react-router, mobx, create-react-app
Patternfly React Demo App
DEPRECATED: This project is no longer active. See https://github.com/patternfly/patternfly-react-seed for PF4 demos.
Stars: ✭ 26 (+116.67%)
Mutual labels: create-react-app, react-router
React Firebase Starter
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
Stars: ✭ 4,366 (+36283.33%)
Mutual labels: create-react-app, boilerplate
Favesound Mobx
🎶 A SoundCloud Client in React + MobX running in production. Live Demo and Source Code to explore React + MobX. Refactored from favesound-redux
Stars: ✭ 532 (+4333.33%)
Mutual labels: react-router, mobx
React Social Network
Simple React Social Network
Stars: ✭ 409 (+3308.33%)
Mutual labels: create-react-app, boilerplate
React Redux Saga Boilerplate
Starter kit with react-router, react-helmet, redux, redux-saga and styled-components
Stars: ✭ 535 (+4358.33%)
Mutual labels: boilerplate, react-router
Redux Webpack Es6 Boilerplate
A starter project for modern React apps with Redux
Stars: ✭ 566 (+4616.67%)
Mutual labels: boilerplate, react-router
React App
Create React App with server-side code support
Stars: ✭ 614 (+5016.67%)
Mutual labels: create-react-app, boilerplate
React 2048 Game
🎮 A fancy 2048 game build with react, redux best practices.
Stars: ✭ 401 (+3241.67%)
Mutual labels: prettier, stylelint
React-Mobx-React-router-Boilerplate
A simple boilerplate based on create-react-app but add mobx, react-router, stylelint and so on.
Provide two demos help you quick start.
Preview
Home view
Todos demo view
A products CRUD Demo view
Features
Router
- Add react-router use hash router
Data storage
- Mobx
- Mobx-react
Engineering
- All features in create-react-app
- HMR for react
- Mock support(use mockjs)
- Use eslint-config-airbnb instead of eslint-config-react-app
- lint code in pre-commit by husky and lint-staged
- prettier
- eslint
- stylelint
- Add .editorconfig
- You can import folders in src directly instead of relative paths like
import SomeComponent from '@/Components/SomeComponent'
- Code spliting by react-loadable
- Drop console when build
Style
- Support less
- Add reset css
Syntax
- Support decorators
UI
- Use antd as UI library
- Use antd import on demand
- Add basic layout
- Add exception component to handle 403, 404, 500 error(copy ant-design-pro)
Compatibility
- Add isIe9 utility function
Demo
- Add two demos help you quick start
Git commit
- Use commitizen to format your commit message
- Use commitlint to lint your commit message
- Use conventional-changelog-cli to generate CHANGELOG.md
Stack
Directory structure
my-app
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── .babelrc
├── .editorconfig
├── .eslintrc.json
├── .stylelintrc.json
├── .prettierrc.json
├── .prettierignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── config (webpack config)
├── scripts
└── src
├── assets (global assets)
├── components (global components)
├── config (global config)
├── layouts (global layouts)
├── routes (first level routes)
│ ├── 404
│ ├── demo
| │ ├── routes (second level routes)
| | | ├── products
| | | ├── todo
| | | └── todoDetail
| │ ├── Demo.js
| │ └── index.js
│ └── home
├── stores (global stores)
├── utils (global utils)
├── App.js
├── index.css
└── index.js
Browser support
- IE9+
- Modern browsers
Getting started
Installation
git clone https://github.com/kwzm/react-mobx-react-router-boilerplate.git
npm start
Runs the app in development mode with mock data. Open http://localhost:3000 to view it in the browser.
npm run start:no-mock
Runs the app in development mode without mock data.
npm run build
Builds the app for production to the build
folder.
Note
- IE9~IE10 don't support dev enviroment.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].