https://github.com/alexcambose/react-boilerplate
React boilerpate based on Webpack. Features React, ES2017 and SASS support.
https://github.com/alexcambose/react-boilerplate
browser dom react-router react-router-dom reactjs redux sass webpack webpack-boilerplate webpack4
Last synced: 3 months ago
JSON representation
React boilerpate based on Webpack. Features React, ES2017 and SASS support.
- Host: GitHub
- URL: https://github.com/alexcambose/react-boilerplate
- Owner: alexcambose
- Created: 2018-04-17T11:54:15.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-23T21:02:35.000Z (over 7 years ago)
- Last Synced: 2025-03-05T18:56:23.525Z (over 1 year ago)
- Topics: browser, dom, react-router, react-router-dom, reactjs, redux, sass, webpack, webpack-boilerplate, webpack4
- Language: JavaScript
- Homepage:
- Size: 556 KB
- Stars: 2
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-boilerplate
Boilerpate
| Features
| -------------
| [**ES2017 Javascript**](https://babeljs.io/docs/plugins/preset-es2017/)
| [**React**](https://reactjs.org/)
| [**React router**](https://reacttraining.com/react-router/)
| [**React router redux**](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)
| [**Redux**](https://redux.js.org/)
| [**Eslint**](https://eslint.org/)
| [**Webpack**](https://webpack.js.org/)
| [**Sass**](https://sass-lang.com/)
## Installation
[Clone](https://git-scm.com/docs/git-clone) or download this repository.
```bash
cd react-boilerplate && npm install
```
## Usage
`npm run build` - Builds in *development* mode
`npm run build:prod` - Builds in *production* mode
`npm run watch` - Watches and builds in *development* mode
`npm run serve` - Starts *webpack-dev-server*
`npm run analize` - Builds in *development* mode and opens [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) report file
`npm run analize:prod` - Builds in *production* mode and opens [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) report file
## Other notes
#### Defining routes
This boilerplate offers a clear and simple way of writing code and because of this I decided that the current way of defining routes using *react router* it's a bit ambiguous and not scalable (including a `` component in each component). All the routes are specified in `routes/index.js` and are rendered using a **recursive** function (so that it can also handle infinite nesting) just like other frameworks like [Angular](https://angular.io/guide/router#configuration), [Vue](https://router.vuejs.org/en/essentials/nested-routes.html).
```jst
//...component imports...
// example component, nested routes are rendered inside the parent component with children
const SomeComponent = ({ children }) => (
Hello
{children}
);
export default [
{
path: '/',
component: SomeComponent,
routes: [
{
path: 'home',
component: SomeComponent,
routes: [
{
path: 'stats',
component: SomeOtherOtherComponent
},
],
},
{
path: 'user',
component: SomeComponent,
routes: [
{
path: 'profile',
component: SomeOtherOtherComponent
},
],
},
],
},
];
```