Add a New Page to ReactGo

Adding a new page to your reactGo project can be a lengthy process.  I’m hoping to write a yeoman generator to do this for me in the near future but for now…  Here are the steps.

Steps:

  1. Add a new route to your app >routes.js
    Add Something like: <Route path="routeName" component={page} onEnter={requireAuth} fetchData{[fetchItemData, fetchCartData]} />
    to the Route section.
    Add the necessary supporting imports.
  2. Add a new entry to the navigation.
  3. Create a new page in the pages folder.
    Duplicate existing page, then open.  Update references to new component name.
  4. Add reference to app > pages > index.js
    export { default as ContianerName } from 'pages/ContainerName';
  5. Create a new data fetcher (if necessary)
    Duplicate existing and update path to get data from server and action type to dispatch.
  6. Update the app > fetch-data > index.js with the new reference.
    export { default as fetchMyData } from './fetchMyData';
  7. If a new data set is needed follow these steps: Add a New Dataset to the Store
  8. Create a new Container
    Duplicate an existing component then design and build your page.
  9. After your pages design is complete componentatize what you should.

Questions for yeoman generator:

  • Provide Route name: String
  • Provide page/component name: String
  • Does the page already exist? Boolean
  • If No => Provide Page Description: String
  • Would you like to generate a new CSS Module for the page? Boolean
  • Auth required? Boolean
  • Does it need to fetch any data? Boolean
    • If yes => How many? Number
    • For count:
      • Provide Data Fetcher name: String
      • Does it already exist? Boolean
      • If No => Does dataset exist?

Tell me what you REALLY think...

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>