# Adding Pages and Components

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: <https://plopjs.com/>

We our predefined plop templates you can generate 3 different features for your app:

1. A component.
2. A stateless module.
3. A stateful module.

Let's talk about each of them.

### Adding new Components

As described in [Arhitecture](https://docs.reactnativestarter.com/arhitecture#components), 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:

1. Create a new file under `components` folder.
2. Create a react element inside the newly created file and export it as a default.
3. Create a spec file for writing tests.

And we automated this steps with a single command. Open your terminal and type.

```
plop component MyButton
```

This command will:

1. Create an `src/components/MyButton/index.js` file.
2. And add the following content inside:

{% code title="src/components/MyButton/index.js" %}

```javascript
// @flow
import React from 'react';
import {
  View,
} from 'react-native';

import { colors } from '../styles';

type Props = {}

export default (props: Props) => (
  <View />
);

const styles = StyleSheet.create({});
```

{% endcode %}

&#x20;   3\.  Create a spec file called `src/components/MyButton/index.spec.js`  with the following content:

{% code title="src/components/MyButton/index.spec.js" %}

```
/* eslint-disable no-undef */
import React from 'react';
import { shallow } from 'enzyme';

import {
  MyButton,
} from '../index';

describe('{{properCase name }} Component', () => {
  it('renders as expected', () => {
  const wrapper = shallow(
    <MyButton />,
  );
  expect(wrapper).toMatchSnapshot();
});
```

{% endcode %}

### Adding a new Module

Have a loot at what's module in our [Arhitecture](https://docs.reactnativestarter.com/arhitecture#modules) documentation.

To create a new module, simply run this command in your console:

```
plop module CalendarScreen
```

Then, plop will ask you to if you want statefull or stateless module.

1. Statefull module has connection to redux store.
2. Stateless doesn't :)

After you making your choice, the generator will:

1. Create a new folder under `modules` called `calendarScreen`&#x20;
2. Add a new file called `CalendarScreenView.js` with a sample view for the new screen.
3. 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.
4. If your component is statefull, it will create `CalendarScreenState.js` file and fill it with redux-related code (described in Architecture as well).
5. For statefull components, your screen will be imported into the redux store.

Have a look at example files content:

{% tabs %}
{% tab title="src/modules/calendarScreen/CalendarScreenState.js" %}

```javascript
// @flow
type CalendarScreenStateType = {};

type ActionType = {
  type: string,
  payload?: any,
};

export const initialState: CalendarScreenStateType = {};

export const ACTION = 'CalendarScreenState/ACTION';

export function actionCreator(): ActionType {
  return {
    type: ACTION,
  };
}

export default function CalendarScreenStateReducer(state: {{properCase name }}StateType = initialState, action: ActionType): {{properCase name }}StateType {
  switch (action.type) {
    case ACTION:
      return {
        ...state,
      };
    default:
      return state;
  }
}

```

{% endtab %}

{% tab title="src/modules/calendarScreen/CalendarScreenView\.js" %}

```javascript
// @flow
import React from 'react';
import {
  View,
  Text,
} from 'react-native-ui-lib';

type Props = {};

export default (props: Props) => (
  <View flex centerV centerH>
    <Text>CalendarScreen View</Text>
  </View>
);
```

{% endtab %}

{% tab title="src/modules/calendarScreen/CalendarScreenViewContainer.js" %}

```javascript
// @flow
import { compose } from 'recompose';
import { connect } from 'react-redux';

import CalendarScreenView from './{{properCase name }}View';

export default compose(
  connect(
    state => ({}),
    dispatch => ({}),
  ),
)(CalendarScreenView);
```

{% endtab %}
{% endtabs %}

Further documentation on Plop could be found on <https://plopjs.com/>