Adding Pages and Components
Last updated
Last updated
RNS comes with predefined set of components and screens, but we sure you'd love to add your own! And we've tried to make it as simple as possible for you with a help of plop generator:
We our predefined plop templates you can generate 3 different features for your app:
A component.
A stateless module.
A stateful module.
Let's talk about each of them.
As described in , components are stateless (usually), reusable react elements. They are placed under the src/components
folder and simply exports an element from the js file.
So, basically, creating a new component is just:
Create a new file under components
folder.
Create a react element inside the newly created file and export it as a default.
Create a spec file for writing tests.
And we automated this steps with a single command. Open your terminal and type.
This command will:
Create an src/components/MyButton/index.js
file.
And add the following content inside:
3. Create a spec file called src/components/MyButton/index.spec.js
with the following content:
To create a new module, simply run this command in your console:
Then, plop will ask you to if you want statefull or stateless module.
Statefull module has connection to redux store.
Stateless doesn't :)
After you making your choice, the generator will:
Create a new folder under modules
called calendarScreen
Add a new file called CalendarScreenView.js
with a sample view for the new screen.
Add a new file CalendarScreenViewContainer.js
with a connection calendar view to the redux (if you picked a statefull component) and wrapping it with recompose.
If your component is statefull, it will create CalendarScreenState.js
file and fill it with redux-related code (described in Architecture as well).
For statefull components, your screen will be imported into the redux store.
Have a look at example files content:
Have a loot at what's module in our documentation.
Further documentation on Plop could be found on