This is a generator to create a simple React 16 project with Webpack
Obvious dependencies: Yeoman and node.js.
If you've already have those, install the generator:
npm install -g generator-pauls-easy-react-webpack
Then generate your new project:
mkdir myAwesomeProject
cd myAwesomeProject
yo pauls-easy-react-webpack
This generator is aimed towards my personal preferences when creating React apps, so maybe it will not be really useful to you, but here are some of its features:
- React 16 and Material-UI as the main tools for development.
- Babel for ES6 and React.
- Webpack with webpack-dev-server, css-loader and style-loader for dev and extract-text-webpack-plugin for production.
- ESLint with a lot of settings for React and ES6 "best practices".
- Directory structure pretty similar to the one described in this Medium article
- Basic component generation
Important Notice: As you can see in the webpack config files, the
entry
option is set toAPP_DIR + '/scenes/App/App.jsx'
instead of the usualindex.js
. This is because I usually just start the app from the main component, so there's no need for anindex.js
. I will surelly add an option to the generator in order to make this customizable, but for the moment you may change it by hand.
Future features:
- New generators to create components and similar scaffolding elements.
- Support for Redux (maybe...).
I use yarn in these examples, but this obviously works too for npm.
Running webpack dev server:
yarn dev
Building for production:
yarn build
You can create a really basic component by running
yo pauls-easy-react-webpack:component
on the root directory of your project.
The generator is going to ask you if you need a component
or a scene
and it will use the dir src/components
or src/scenes
, respectively. For the moment, it just creates a basic component inside one of these directories. It will be able to create sub-components in future releases.
Feel free to open issues, send me a pull request or contact me