#### Repository https://github.com/facebook/react #### What Will I Learn? **I will learn :** * Setting up route based transitions within our React application. * Creating our First Custom Component * Dynamically Fetching Authors. #### Requirements * https://nodejs.org/ * https://npmjs.com/ * https://yarnpkg.com/ * https://github.com/ * https://reactjs.org/ #### Difficulty * Advanced #### Setting up Route Based Transitions We can do this by using the transition group properties present within React Router. We'll be adding a fade transition for our app. Let's head over to `src/containers/App/index.js` and get to work. For starters, we'll import the TransitionGroup component from react-transition-group. We also need to import the yet to be created FadeTransition component from `src/components/Transitions/fade.js` ```import { TransitionGroup } from "react-transition-group"; import FadeTransition from "../../components/Transitions/fade"; ``` Next, we'll update the render method of the App class to use our imports. We wrap everything in our TransitionGroup and we also use our to be created FadeTransition component. ```

``` Next, let's create `src/components/Transitions/fade.js` and add some code. We'll be basically wrapping the children components of this class within react-transition-group's CSSTransition method. We also specify a timeout and a CSS class for it. ```import React from "react"; import { CSSTransition } from "react-transition-group"; export const FadeTransition = ({ children, ...props }) => { return ( {children} ); }; export default FadeTransition; ``` Finally, we'll add a little CSS to src/index.js just for effect. ``` ``` #### Creating our First Custom Component In our AddLine class, we imported the Textarea class which we are yet to create. Let's handle that now. Create `src/components/Form/Textarea.js` and we'll get started. First, I am import our dependencies. We are using the space and theme methods from styled system. This will give us access to the default spacings and theme setting that come with styled system. ```import React from 'react'; import styled from 'styled-components'; import { space, theme } from 'styled-system' ``` Next, I do something of great importance, I define a function that returns the styles for the borders that will surround our Text box. This function also accepts the color and theme objects and makes them accessible to us. I am also write code that provide defaults in the event that the function received no arguments. I am then return an object with our styles intact. ```const borders = ({ color, theme }) => { const borderColor = color ? theme.colors[color] : theme.colors.borderGray const focusColor = color ? borderColor : theme.colors.gray return { 'border-color': borderColor, 'box-shadow': `0 0 0 1px ${borderColor}`, ':focus': { outline: 0, 'border-color': focusColor, 'box-shadow': `0 0 0 2px ${focusColor}` } } } ``` Next, I am define the styles for our Textarea in a new ES6 proposal called 'tagged template literals'. We write regular CSS here except for the theme function calls. Calling the theme method with an argument here will return a value. ```const Textarea = styled('textarea') appearance: none; display: block; width: 100%; font-family: inherit; color: inherit; font-size: ${theme('fontSizes.1')}px; background-color: transparent; border-radius: ${theme('radius')}; border-width: 0px; border-style: solid; border-color: ${theme('colors.borderGray')}; padding-top: 14px; padding-bottom: 14px; padding-left: 12px; padding-right: 12px; margin: 0; ::placeholder { color: ${theme('colors.gray')}; } ::-ms-clear { display: none; } ${borders} ${space}; ' ``` Fire up your browser and head to http://localhost:300/add #### Dynamically Fetching Authors. We'd like to add a means of keeping our authors list dynamic. This is important, because along in this series, we'll be adding functionality that allows us to create authors dynamically. * Game Plan We need to fetch our authors immediately our app starts. This means using a lifecycle event method to run the action that fetches our authors. That means we'll be modifying the App root component a little to allow us add new behavior. Let's edit `src/containers/App/index.js` and get to work. We'll be adding some new dependencies. We'll be using the withRouter method from react-router as we'd like to be able to access some router based properties within our component. We'll also be importing the fetchAuthorsRequest from the Home screen actions. ```import { withRouter } from 'react-router'; import { connect } from 'react-redux'; import { fetchAuthorsRequest } from '../../screens/Home/actions'; ``` We'll need to add the componentDidMount lifecycle method. We'll be calling `this.props.fetchAuthors` in this method. We'll define this method below. ```class App extends React.Component { componentDidMount() { this.props.fetchAuthors() } ``` Next, we'll run the usual `mapStateToProps` and `mapDispatchToProps` where we get to define the `fetchAuthors` method that will make the request to our saga telling it, "Hey, we want all the authors you've got". ```const mapStateToProps = (state) => { return {} } const mapDispatchToProps = (dispatch) => { return { fetchAuthors: data => dispatch(fetchAuthorsRequest(data)) } } export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App)); ``` Next, we must define the recently used `fetchAuthorsRequest` action dispatcher. We'll add the `fetchAuthorsRequest` method to the `actions.js` file at `src/screens/Home` We're simply importing a couple of constants and we then define our action object. This will dispatch the `ADD_AUTHORS_REQUEST` action to our saga. ```import { ADD_LINER_REQUEST, ADD_LINERS_REQUEST, ADD_AUTHORS_REQUEST } from './constants'; export const fetchAuthorsRequest = () => { return { type: ADD_AUTHORS_REQUEST } } ``` Next, we'll add a saga for this request. We'll define the fetchAuthors generator function at `src/screens/Home/saga.js` We'll start off by importing the getAuthorsData method from the Data Service we created previously. We also import a couple of constants we'll be using. We then use the special call method provided by Redux-Saga to resolve the promise returned by the getAuthorsData method. We then call the put method providing it with some required parameters (type and payload). ```import { getAuthorsData } from '../../services/DataService'; import { ADD_AUTHORS_REQUEST } from './constants'; import { SET_AUTHORS_DATA } from '../../containers/App/constants'; export function* fetchAuthors (payload) { const response = yield call(getAuthorsData); return yield put({ type: SET_AUTHORS_DATA, payload: { data: response } }) } ``` We'll quickly define the imported constants. Editing `src/containers/App/constants.js` ```export const SET_AUTHORS_DATA = 'app/SET_AUTHORS_DATA'; Also editing src/screens/Home/constants.js. ``js export const ADD_AUTHORS_REQUEST = 'app/ADD_AUTHORS_REQUEST'; ``` We'll be defining the `getAuthorsData` method at the Data Service. Let's edit `src/services/DataService/index.js`. We'll be creating the `authors.json` file at `src/assets/data` shortly. In the meantime, we import the JSON data from it, and we resolve that data in a promise that we return. ```js import authorsData from "../../assets/data/authors.json"; export const getAuthorsData = (id = null) => { if (id) { let author = authorsData.filter(author => author.id === id); return new Promise(resolve => resolve(author)); } return new Promise(resolve => resolve(authorsData)); }; ``` It's now time to create our authors.json along with the information. Let's use this file as a base to build on. Create `src/assets/data/authors.json` and add test data. ```[{ "name": "Immortal Technique", "government_name": "Sara Youlist Bust", "photo": "immortal-technique.jpg" }, { "name": "Sarayulis", "government_name": "Sara Youlist", "photo": "yulis.jpg" }, { "name": "Sara 3000", "photo": "sara-3000.jpg" }] ``` Great! All we need to do now is add a reducer for this action. We'll start by importing the `SET_AUTHORS_DATA` constant. We then have the authors property of the initial state as being an empty object. We check for our `SET_AUTHORS_DATA` action and if our action was called we simply set the erstwhile empty authors property in the initialState array to the action's payload data. ```import { SET_AUTHORS_DATA } from './constants'; const initialState = fromJS({ // ...Previous code here. authors: [] }) const AppReducer = (state = initialState, action) => { switch (action.type) { case SET_AUTHORS_DATA: return state.set('authors', action.payload.data) // ...Previous code goes here. default: return state } } ``` Heading back to our browser tab at http://localhost:3000, we see our list of authors show up in the select box. That's awesome! If we hit the submit button, we get to see our new entry with the selected author. #### Resources * https://github.com/jamiebuilds/react-loadable * https://reacttraining.com/react-router/web/guides/basic-components #### Proof of Work Done https://github.com/sarayulis/react