generator-pauls-easy-react-webpack
v0.1.4
Published
A generator to create a simple React project with Webpack
Downloads
3
Readme
generator-pauls-easy-react-webpack
This is a generator to create a simple React 16 project with Webpack
Installation
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
About the generator
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...).
How to run your project
I use yarn in these examples, but this obviously works too for npm.
Running webpack dev server:
yarn dev
Building for production:
yarn build
Creating Components
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.
Collaborating
Feel free to open issues, send me a pull request or contact me