Skip to content

Latest commit

 

History

History
161 lines (101 loc) · 4.48 KB

README.md

File metadata and controls

161 lines (101 loc) · 4.48 KB
Raw

THIS GENERATOR IS IN BETA-TESTING, PLEASE WAITING FOR A FIRST MAJOR VERSION (V1.0.0) BEFORE INSTALL IT.

generator-react-awesome

A generator for a complete react app. Include (React, Redux, React-Router, i18next, Jest, Eslint, Flow, Webpack, ES6+ (Babel)...)

Installation

  • Install yeoman

    npm install -g yo

  • Install react-awesome

    npm install -g generator-react-awesome

    yo react-awesome

  • Install dependences (Don't forget to have a NODE_ENV set in development or refer)

    npm install

How it works

React Awesome try to use the best package to start a React App.

React Awesome include :

Dev tools

Commands

  • Launch a development server

    npm run dev

  • Build a production bundle

    npm run build

  • Launch a production server

    npm start

  • Launch test with flow, jest and lint !

    npm test

  • Launch jest

    npm run jest

  • Launch jest with watch parameters (useful to update snapshot)

    npm run jest:watch

  • Launch jest

    npm run flow

  • Launch lint

    npm run lint

Get started

To start, edit the file in src/containers/App.js

const App = () => (
  <Provider store={store}>
    <I18nextProvider i18n={i18n}>
      <Router>
        <Switch>
          <Route
            path="/"
            render={() => <h1>{i18n.t("global:hello-world")}</h1>}
          />
        </Switch>
      </Router>
    </I18nextProvider>
  </Provider>
);

You can also start to edit files in translations folder.

You should know

Server (in development and production), render the folder public in a static path /assets, you can load file by 2 ways

Best way:

    <img
      alt="kitten"
      src={require("../public/images/kitten.jpg")}
    />

Other way:

    <img
      alt="kitten"
      src="/assets/images/kitten.jpg"
    />

Advice

  • Keep the window-state in the redux-store could be useful.

  • Keep the AppPromise, without it promise the app could be loaded before translation. Don't forget that Google use the first rendering for referencing. If you don't need i18next, you could update app.js

    	    AppPromise().then(() => {
		    ReactDOM.render(<App />, document.getElementById("app"));
	    });

To

ReactDOM.render(<App />, document.getElementById("app"));
  • Husky is a great package to writte some hooks in package.json. I recommend to keep it.

Contributors

Use Github issues for requests

generator-react-awesome is a community project and wouldn't be what it is without contributions! We encourage and support contributions. The generator-react-awesome source code is released under the MIT License.

Feel free to fork and improve/enhance generator-react-awesome any way you want. If you feel that generator-react-awesome will benefit from your changes, please open a pull request.

PS: Sorry if my english isn't perfect :p You can propose a merge request to correct some faults

Getting To Know Yeoman

  • Yeoman has a heart of gold.
  • Yeoman is a person with feelings and opinions, but is very easy to work with.
  • Yeoman can be too opinionated at times but is easily convinced not to be.
  • Feel free to learn more about Yeoman.

License

MIT © Bastien Chevallier