React Pages
Okay so now we've got a gist of the framework folder structure, so lets GET SOME PAGES!
Create a Page Component
In directory src/routes/Root create the folder RecipeForm with the following files inside it: index.js and RecipeFormPage.js
In file RecipeFormPage.js, insert the following code (snippet: rc):
/* @flow */
import React, {Component} from 'react';
export default class RecipeFormPage extends Component {
static propTypes = {
};
render() {
return (
<div>
Recipe form page
</div>
);
}
}
In file index.js, insert the following code (snippet: imi):
/* @flow */
import RecipeFormPage from './RecipeFormPage';
export default RecipeFormPage;
Link Page to a URI
Now that we have the page container, let's connect it to a specific URI to access from. For our RecipeForm page, we'll use the following URI: http://localhost:3000/recipes/create
In file routes /Root/Routes.js, we'll import the RecipeForm page:
import RecipeForm from 'routes/Root/RecipeForm';
and add it to the list of routes:
<Switch>
...
<RouteLayout path="/recipes/create" component={Todos} />
</Switch>
Check Result
If you don't have api and web running, hit $ npm start on both. In the browser, go to http://localhost:3000/recipes/create. If all goes well, you should see 'Recipe form page' (or whatever you have in the RecipeFormPage render function) in the body area.