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:
- 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. - Add a new entry to the navigation.
- Create a new page in the pages folder.
Duplicate existing page, then open. Update references to new component name. - Add reference to app > pages > index.js
export { default as ContianerName } from 'pages/ContainerName';
- Create a new data fetcher (if necessary)
Duplicate existing and update path to get data from server and action type to dispatch. - Update the app > fetch-data > index.js with the new reference.
export { default as fetchMyData } from './fetchMyData';
- If a new data set is needed follow these steps: Add a New Dataset to the Store
- Create a new Container
Duplicate an existing component then design and build your page. - 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?
- If No => Start dataset generator
- If Yes => Provide path to fetch data from server.