├── .gitignore
├── 10.PureComponent.md
├── 00.Introduction.md
├── 07.01.Reconciliation.md
├── 11.Refs.md
├── 07.03.Constants-elements.md
├── 08.Lifecycle.md
├── 01.React.createElement.md
├── 03.Rendering.md
├── LICENSE
├── 02.JSX.md
├── 09.PropTypes and DefaultProps.md
├── 06.State.md
├── 07.02.shouldComponentUpdate.md
├── 04.Components.md
├── README.md
├── 05.Props.md
├── 07.04.Anonymous-references.md
└── 12.Routing.md


/.gitignore:
--------------------------------------------------------------------------------
1 | _site/
2 | .sass-cache/
3 | .jekyll-metadata
4 | 


--------------------------------------------------------------------------------
/10.PureComponent.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # React.PureComponent
 4 | 
 5 | When you know a component will always render the same result given the same props and state you can extend from `React.PureComponent` instead of `React.Component` which implements `shouldComponentUpdate()` with a shallow compare on them.
 6 | 
 7 | 
 8 | ### References
 9 | 
10 | - [React.PureComponent](https://facebook.github.io/react/docs/react-api.html#react.purecomponent)
11 | 


--------------------------------------------------------------------------------
/00.Introduction.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # Introduction
 4 | 
 5 | React is a library to build scalable web applications fully rendered in JavaScript.
 6 | 
 7 | To accomplish this, it exposes methods and constructors to declare your views by dividing them into reusable and encapsulated parts we are going to call _components_ from now on.
 8 | 
 9 | ### References
10 | 
11 | - [React official site](https://facebook.github.io/react/)
12 | - [Thinking in React](https://facebook.github.io/react/docs/thinking-in-react.html)
13 | 


--------------------------------------------------------------------------------
/07.01.Reconciliation.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # Reconciliation
 4 | 
 5 | React provides an easy way to declare how a component will be structured and it will later take care of updating it when a state or a prop has changed generating a new render tree, comparing it with the previous one and only modifying what's necessary.
 6 | 
 7 | This task is called **Reconciliation** and it's hard to accomplish in an efficient way.
 8 | 
 9 | Understanding that we need to help React figure out which parts of our components are more likely to change is one of the keys of building a performant React web application.
10 | 
11 | ### References
12 | 
13 | - [Reconciliation article from React official site](https://facebook.github.io/react/docs/reconciliation.html)
14 | 


--------------------------------------------------------------------------------
/11.Refs.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # Refs
 4 | 
 5 | So far, the only way that parent components can trigger changes within their child components is to pass new props. Another way to communicate with child components is through _refs_.
 6 | 
 7 | Through the ref attribute, the parent component can gain access to the child component or element.
 8 | 
 9 | Here the property `this.textInput` holds the input element.
10 | 
11 | ``` jsx
12 | <input type="text" ref={(input) => { this.textInput = input; }} />
13 | ```
14 | 
15 | When passed as a _prop_ to a custom component its callback argument would be the mounted instance of the component.
16 | 
17 | ```jsx
18 | <CustomInput ref={(input) => { this.textInput = input; }} />
19 | ```
20 | 
21 | As a rule of thumb, try to use _props_ before trying to use _refs_, so as to make it clear where the state of a component is owned.
22 | 
23 | 
24 | ### References
25 | 
26 | - [Refs and the DOM](https://facebook.github.io/react/docs/refs-and-the-dom.html)
27 | 


--------------------------------------------------------------------------------
/07.03.Constants-elements.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # Avoid unnecessary element reconciling
 4 | 
 5 | Every change on a parent component will trigger a new `React.createElement` call for its children, adding a new reconciling step for each of them as a consequence which makes no sense if we know that our component or part of it will always remain constant.
 6 | 
 7 | To mitigate this, declare inner components as a constants.
 8 | 
 9 | ```jsx
10 | const icon = <Icon/>;
11 | 
12 | class SearchButton extends React.Component {
13 |   constructor(props) {
14 |     super(props);
15 |   }
16 | 
17 |   render() {
18 |     return (
19 |       <button disabled={ this.props.disabled }>
20 |         { icon } Search
21 |       </button>
22 |     );
23 |   }
24 | }
25 | ```
26 | 
27 | You can get similar behaviors by returning false when the component should update or extending from `PureComponent` class as mentioned before, something that might not be possible when component doesn’t belong to your project codebase.
28 | 


--------------------------------------------------------------------------------
/08.Lifecycle.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # Lifecycle callbacks
 4 | 
 5 | For class based components, we have a set of methods available to call during its mounting, unmounting and update cycles.
 6 | 
 7 | This is what gets called when a component gets rendered for the first time:
 8 | 
 9 | - `constructor()`
10 | - `componentWillMount()`
11 | - `render()`
12 | - `componentDidMount()`
13 | 
14 | When its state changes or a new prop is passed:
15 | 
16 | - `componentWillReceiveProps()`
17 | - `shouldComponentUpdate()`
18 | - `componentWillUpdate()`
19 | - `render()`
20 | - `componentDidUpdate()`
21 | 
22 | Finally, before the component gets remove from the DOM `componentWillUnmount()` is called.
23 | 
24 | 
25 | ### References
26 | 
27 | - [Adding Lifecycle Methods to a Class](https://facebook.github.io/react/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class)
28 | - [The Component Lifecycle](https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle)
29 | - [Understanding the React Component Lifecycle](http://busypeoples.github.io/post/react-component-lifecycle/)
30 | 


--------------------------------------------------------------------------------
/01.React.createElement.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # React.createElement
 4 | 
 5 | Components are composed by _elements_, other components or a combination of both.
 6 | 
 7 | Elements we create will be reflected as nodes in our web app and we do it by calling `React.createElement` like this:
 8 | 
 9 | ```js
10 | import React from 'react';
11 | 
12 | React.createElement(
13 |   'div',
14 |   { className: 'wrapper' },
15 |   [ React.createElement('p', null, 'Lorem ipsum') ]
16 | );
17 | ```
18 | 
19 | Notice the first argument of this method is the HTML tag name of the element, the second one an object containing attributes and _props_ and the third one a child element or an array of them. The output of the sample code from above should look like this.
20 | 
21 | ```html
22 | <div class="wrapper">
23 |   <p>Lorem Ipsum</p>
24 | </div>
25 | ```
26 | 
27 | Since `class` and `for` are reserved words in JavaScript `className` and `htmlFor` are used respectively to avoid parsing errors.
28 | 
29 | 
30 | ### References
31 | 
32 | - [React Top Level API](https://facebook.github.io/react/docs/react-api.html#createelement)
33 | 


--------------------------------------------------------------------------------
/03.Rendering.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # Rendering an Element into the DOM
 4 | 
 5 | In order to mount a element to DOM, firstly we need an empty tag in our document:
 6 | 
 7 | ```html
 8 | <!DOCTYPE html>
 9 | <html lang="en">
10 | <head>
11 |   <meta charset="UTF-8">
12 |   <title>React Lessons</title>
13 | </head>
14 | <body>
15 |   <div id="root"></div>
16 | </body>
17 | </html>
18 | ```
19 | 
20 | Now we call `ReactDOM.render` and pass an element or a component and the DOM node we will for mounting it:
21 | 
22 | ```jsx
23 | const element = <h1>Hello world</h1>;
24 | 
25 | ReactDOM.render(
26 | 	element,
27 |   document.getElementById('root')
28 | );
29 | ```
30 | 
31 | Everything inside this element will be managed by React DOM.
32 | 
33 | [Try this on CodePen](http://codepen.io/gaearon/pen/rrpgNB?editors=1010)
34 | 
35 | React compares the DOM with the updated elements and only applies the DOM updates with the necessary changes.
36 | This is what makes React really fast.
37 | 
38 | 
39 | ### References
40 | 
41 | - [Rendering Elements from React official site](https://facebook.github.io/react/docs/rendering-elements.html)
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Jam3
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/02.JSX.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # JSX
 4 | 
 5 | First of all, JSX is **neither** a string **nor** HTML but an extension to JavaScript to simplify the nested declaration of React elements.
 6 | 
 7 | ```jsx
 8 | <Welcome size="huge">
 9 |   <p>Hey, you!</p>
10 | </Welcome>
11 | ```
12 | 
13 | The JSX definition you find above become this after being transpiled.
14 | 
15 | ```js
16 | React.createElement(
17 |   Welcome,
18 |   { size: 'huge' },
19 |   [ React.createElement('p', null, 'Hey, you!') ]
20 | );
21 | ```
22 | 
23 | 
24 | ## Use capitalized names for user-defined components
25 | 
26 | `React` will interpret elements starting with a lowercase letter as native HTML elements and elements starting with a capital letter as components defined by you.
27 | 
28 | This is how `React` distinguishes a built-in elements from user-defined components.
29 | 
30 | 
31 | ## Expression interpolation
32 | 
33 | You can embed any JavaScript expression in JSX by wrapping it in curly braces:
34 | 
35 | ```JSX
36 | const sizes = ['small', 'medium', 'large', 'huge'];
37 | const langs = ['Hello', 'Hola'];
38 | 
39 | <Welcome size={ sizes[3] }>
40 |   { langs[0] }, you!
41 | </Welcome>
42 | ```
43 | 
44 | 
45 | ### References
46 | 
47 | - [Introducing JSX](https://facebook.github.io/react/docs/introducing-jsx.html)
48 | - [JSX In Depth](https://facebook.github.io/react/docs/jsx-in-depth.html)
49 | 


--------------------------------------------------------------------------------
/09.PropTypes and DefaultProps.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # PropTypes and DefaultProps
 4 | 
 5 | ## Prop Types
 6 | 
 7 | During development React can do type checking for _props_ components are receiving.
 8 | 
 9 | The propTypes typechecking happens after defaultProps are resolved,
10 | so typechecking will also apply to the defaultProps.
11 | 
12 | ```jsx
13 | class Lesson extends React.Component {
14 |   constructor(props) {
15 |     super(props);
16 |   }
17 | 
18 |   render() {
19 |     return (
20 |       <div className="">
21 |         <h2>{this.props.title}</h2>
22 |         <p>{this.props.description}</p>
23 |         <button onClick={ this.props.action }>{ this.props.actionText }</button>
24 |       </div>
25 |     );
26 |   }
27 | }
28 | 
29 | Lesson.propTypes = {
30 |   title: React.PropTypes.string.isRequired,
31 |   description: React.PropTypes.string,
32 |   action: React.PropTypes.func.isRequired,
33 |   actionText: React.PropTypes.string
34 | };
35 | ```
36 | 
37 | After specifying the type of the _prop_ you can add `isRequired` to prevent a component from being instantiated without it.
38 | 
39 | 
40 | ## Default Props
41 | 
42 | You can also provide a default value for a _prop_ as a fallback.
43 | 
44 | ```js
45 | Lesson.defaultProps = {
46 |   description: 'There is no description for this lesson.'
47 | }
48 | ```
49 | 
50 | ### References
51 | 
52 | - [List of PropTypes](https://facebook.github.io/react/docs/typechecking-with-proptypes.html#react.proptypes)
53 | - [Default Props](https://facebook.github.io/react/docs/typechecking-with-proptypes.html#default-prop-values)
54 | 


--------------------------------------------------------------------------------
/06.State.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # State
 4 | 
 5 | The states are used to reflect the changing data.
 6 | 
 7 | We set the initial states in the constructor of the component like this:
 8 | 
 9 | ```js
10 | class NameForm extends React.Component {
11 |   constructor(props) {
12 |     super(props);
13 | 
14 |     this.state = {
15 |       name: ''
16 |     };
17 |   }
18 | 
19 |   handleChange(e) {
20 |     this.setState({ name: e.target.value });
21 |   }
22 | 
23 |   render() {
24 |     return (
25 |       <form action="?">
26 |         <h3>Welcome { this.state.name }</h3>
27 |         <input onChange={ this.handleChange.bind(this) } placeholder="Your name"/>
28 |         <button type="submit">Continue</button>
29 |       </form>
30 |     );
31 |   }
32 | }
33 | ```
34 | 
35 | Notice that instead of modifying `this.state`, we used `this.setState` method and pass down one or more states we want to change in an object. The only place where you can assign `this.state` is the constructor.
36 | 
37 | Also, _state updates are asynchronous_. That's why is recommended to change states passing down a function.
38 | 
39 | ```js
40 | this.setState((prevState, props) => ({ count: prevState.count + 1 }));
41 | ```
42 | 
43 | ### References
44 | 
45 | - [Using State Correctly](https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly)
46 | - [Lifting State Up](https://facebook.github.io/react/docs/lifting-state-up.html)
47 | - [Using a function in setState instead of an object](https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1#.dd532hyfa)
48 | 


--------------------------------------------------------------------------------
/07.02.shouldComponentUpdate.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # shouldCompoentnUpdate
 4 | 
 5 | Knowing how our components behave might also unveil when they actually need to be rendered again.
 6 | 
 7 | Given this loading bar component, it’s noticeable that unless its hidden state changes after being mounted, we won’t need to update it.
 8 | 
 9 | ```jsx
10 | class LoadingBar extends React.Component {
11 |   render() {
12 |     return (
13 |       <div className='loading-bar' hidden={ this.props.hidden }>
14 |         <div className='loading-bar-progress'></div>
15 |       </div>
16 |     );
17 |   }
18 | }
19 | ```
20 | 
21 | To make our component update cycle smarter we can use `shouldComponentUpdate` and compare the upcoming _props_ and _state_ from the current one.
22 | 
23 | ```jsx
24 | class LoadingBar extends React.Component {
25 |   shouldComponentUpdate(nextProps, nextStates) {
26 |     return this.props.hidden !== nextProps.hidden;
27 |   }
28 |   render() {
29 |     return (
30 |       <div className='loading-bar' hidden={ this.props.hidden }>
31 |         <div className='loading-bar-progress'></div>
32 |       </div>
33 |     );
34 |   }
35 | }
36 | ```
37 | 
38 | With a simple and straight forward line of code our component gets smarter.
39 | 
40 | ## No updates at all
41 | 
42 | If the component doesn’t contain any dynamic data we can just return `false` inside `shouldComponentUpdate` and it will only get rendered once.
43 | 
44 | ### References
45 | 
46 | - [shouldComponentUpdate from React official site](https://facebook.github.io/react/docs/optimizing-performance.html#shouldcomponentupdate-in-action)
47 | 


--------------------------------------------------------------------------------
/04.Components.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # Components
 4 | 
 5 | Components allows you to split UI into small independent and reusable pieces.
 6 | 
 7 | ## Functional Components
 8 | 
 9 | This is simplest way of defining Components. `Lesson` is function that always returns an `<div>` tag with a text node as its children.
10 | 
11 | ```jsx
12 | function Lesson() {
13 |   return <div>This is a lesson!</div>;
14 | }
15 | ```
16 | 
17 | 
18 | ## Pure (Stateless) Functional Components
19 | 
20 | This type of components has no _state_, and just shows received _props_. Therefore, it allows a developer to have loosely coupled component, which is more reusable and unit testing friendly.
21 | 
22 | ```jsx
23 | const Lesson = (props) => {
24 |   return (
25 |     <div>{ props.text }</div>
26 |   );
27 | };
28 | ```
29 | 
30 | 
31 | ## Class Components
32 | 
33 | You can also create a new component by extending the `React.Component` class which comes with useful methods to grasp more control while the component is _alive_.
34 | 
35 | ```jsx
36 | class Lesson extends React.Component {
37 |   constructor(props) {
38 |     super(props);
39 |   }
40 | 
41 |   render() {
42 |     return (
43 |       <div>{ this.props.text }</div>
44 |     );
45 |   }
46 | }
47 | ```
48 | 
49 | Not mandatory, but it's recommended for class based components to call `super` passing down the received props.
50 | 
51 | 
52 | ### References
53 | 
54 | - [Components references](https://facebook.github.io/react/docs/components-and-props.html)
55 | - [Stateless Components](https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d#.dkm84h7pq)
56 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Jam3 Lessons - React
 2 | 
 3 | Quick and brief reference for React development
 4 | 
 5 | ## Content
 6 | 
 7 | 00. [Introduction](https://github.com/Jam3/jam3-lessons-react/blob/master/00.Introduction.md)
 8 | 01. [React.createElement](https://github.com/Jam3/jam3-lessons-react/blob/master/01.React.createElement.md)
 9 | 02. [JSX](https://github.com/Jam3/jam3-lessons-react/blob/master/02.JSX.md)
10 | 03. [Rendering Elements](https://github.com/Jam3/jam3-lessons-react/blob/master/03.Rendering.md)
11 | 04. [Components](https://github.com/Jam3/jam3-lessons-react/blob/master/04.Components.md)
12 | 05. [Props](https://github.com/Jam3/jam3-lessons-react/blob/master/05.Props.md)
13 | 06. [State](https://github.com/Jam3/jam3-lessons-react/blob/master/06.State.md)
14 | 07. [Reconciliation](https://github.com/Jam3/jam3-lessons-react/blob/master/07.01.Reconciliation.md)
15 |   01. [shouldComponentUpdate](https://github.com/Jam3/jam3-lessons-react/blob/master/07.02.shouldComponentUpdate.md)
16 |   02. [Constants Elements](https://github.com/Jam3/jam3-lessons-react/blob/master/07.03.Constants-elements.md)
17 |   03. [Anonymous references](https://github.com/Jam3/jam3-lessons-react/blob/master/07.04.Anonymous-references.md)
18 | 08. [Lifecycle](https://github.com/Jam3/jam3-lessons-react/blob/master/08.Lifecycle.md)
19 | 09. [PropTypes and DefaultProps](https://github.com/Jam3/jam3-lessons-react/blob/master/09.PropTypes%20and%20DefaultProps.md)
20 | 10. [PureComponent](https://github.com/Jam3/jam3-lessons-react/blob/master/10.PureComponent.md)
21 | 11. [Refs](https://github.com/Jam3/jam3-lessons-react/blob/master/11.Refs.md)
22 | 12. [Routing](https://github.com/Jam3/jam3-lessons-react/blob/master/12.Routing.md)
23 | 


--------------------------------------------------------------------------------
/05.Props.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # Props
 4 | 
 5 | React uses one-way data flow, data can only be passed from the parent component to the child component using _props_.
 6 | 
 7 | ```jsx
 8 | class Welcome extends React.Component {
 9 |   render() {
10 |     return <div>Hello, { this.props.name }</div>;
11 |   }
12 | }
13 | 
14 | ReactDOM.render(
15 |   <Welcome name="Mark" />
16 |   document.getElementById('root')
17 | );
18 | ```
19 | 
20 | The child-parent communication and sibling communication is more complex and not recommended though it can be achieved by passing methods through _props_ and keeping the content pointing to the parent or the sibling.
21 | 
22 | ```jsx
23 | class Button extends React.Component {
24 |   render() {
25 |     return <button onClick={ this.props.handleClick }></button>;
26 |   }
27 | }
28 | 
29 | class Welcome extends React.Component {
30 |   salute(event) {
31 |     alert(`Hello, ${ this.props.name }`);
32 |   }
33 | 
34 |   render() {
35 |     return (
36 |       <div>
37 |         <p>Hello, { this.props.name }</p>
38 |         <Button handleClick={ this.salute.bind(this) } />
39 |       </div>);
40 |   }
41 | }
42 | 
43 | ReactDOM.render(
44 |   <Welcome name="Mark"/>,
45 |   document.getElementById('root')
46 | );
47 | ```
48 | 
49 | Remember to `bind` the method passed to the current component, if you use `this` inside the method.
50 | 
51 | Note that:
52 | 
53 | 1. _props_ are **read-only**
54 | 2. you can [spread attributes](https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes)
55 | 
56 | 
57 | ### The `children` prop
58 | 
59 | The content between the opening and closing tag of a component is passed as a `prop` called `children`, you can access it through `this.props.children`.
60 | 
61 | ### References
62 | 
63 | - [Components and Props](https://facebook.github.io/react/docs/components-and-props.html)
64 | - [Children in JSX](https://facebook.github.io/react/docs/jsx-in-depth.html#children-in-jsx)
65 | 


--------------------------------------------------------------------------------
/07.04.Anonymous-references.md:
--------------------------------------------------------------------------------
 1 | **Jam3 Lessons - React**
 2 | 
 3 | # Avoid anonymous references
 4 | 
 5 | Not only returning React elements, other computational operations like loops can happen inside a render function.
 6 | 
 7 | This power in combination with some short hand allowed from JavaScript itself can become a double-edge sword.
 8 | 
 9 | ```jsx
10 | class Movies extends React.Component {
11 |   render() {
12 |     const movies = this.props.movies;
13 | 
14 |     return (
15 |       <div className="movies">
16 |         { (movies || []).map(mov => <MovieBox data={ mov }/>) }
17 |       </div>
18 |     );
19 |   }
20 | }
21 | ```
22 | 
23 | Remember this render function might get called several times. On every call we are defaulting to an empty array in case no movie prop was passed. Doing `[]` equals to new Array, as `{}` is the same as `Object.create(null)`.
24 | 
25 | Not only these are expensive operations, but they also generate anonymous references on memory making our application slower on each update. Quick solution, create a constant reference with a default value.
26 | 
27 | ```jsx
28 | const noMovies = [];
29 | 
30 | class Movies extends React.Component {
31 |   render() {
32 |     const movies = this.props.movies;
33 | 
34 |     return (
35 |       <div className="movies">
36 |         { (movies || noMovies).map(m => <MovieBox data={ m }/>) }
37 |       </div>
38 |     );
39 |   }
40 | }
41 | ```
42 | 
43 | The same occurs with the arrow function inside map. Though it looks great, it is better to move it outside to avoid new memory allocations on each render.
44 | 
45 | ```jsx
46 | const noMovies = [];
47 | 
48 | function renderMovie(movie) {
49 |   return <MovieBox data={ movie }/>;
50 | }
51 | 
52 | class Movies extends React.Component {
53 |   render() {
54 |     const movies = this.props.movies;
55 | 
56 |     return (
57 |       <div className="movies">
58 |         { (movies || noMovies).map(renderMovie) }
59 |       </div>
60 |     );
61 |   }
62 | }
63 | ```
64 | 
65 | For the same reason, you should avoid using `bind` inside render.
66 | 
67 | ### References
68 | 
69 | - [Improve control and performance for render functions in React](https://jeremenichelli.github.io/2016/10/better-control-and-speed-react-render/)
70 | 


--------------------------------------------------------------------------------
/12.Routing.md:
--------------------------------------------------------------------------------
  1 | **Jam3 Lessons - React**
  2 | 
  3 | # Routing
  4 | 
  5 | ## General Concepts and Introduction
  6 | 
  7 | 'react-router' is an npm module. It keeps the UI in sync with the URL. In the below example, going to '/' will load App. Going to '/home' will load App and Home.
  8 | 
  9 | React Router module is the most popular implementation to create Single Page Apps with React.
 10 | 
 11 | To configure the routes of your app, `JSX` notation can be used among with `Router` and `Route` components provided by React Router.
 12 | 
 13 | ```jsx
 14 | import { Router, Route } from 'react-router';
 15 | 
 16 | <Router>
 17 |   <Route path="/" component={App}>
 18 |     <Route path="home" component={Home} />
 19 |     <Route path="about" component={About} />
 20 |   </Route>
 21 | </Router>
 22 | ```
 23 | 
 24 | Each route receives a component to display and a corresponding path that will trigger the view rendering.
 25 | 
 26 | 
 27 | ## Creating and displaying views
 28 | 
 29 | Each of the views, in this case **Home** and **About**, and what will wrap them, **App** are components we pass through _props_ to our routes.
 30 | 
 31 | ```jsx
 32 | import React from 'react';
 33 | import { render } from 'react-dom';
 34 | import { Router, Route } from 'react-router';
 35 | 
 36 | function App() {
 37 |   return (
 38 |     <div className="app">
 39 |       { this.props.children }
 40 |     </div>
 41 |   );
 42 | }
 43 | 
 44 | function Home() {
 45 |   return <h1>Home</h1>;
 46 | }
 47 | 
 48 | function About() {
 49 |   return <h1>About</h1>;
 50 | }
 51 | 
 52 | render(
 53 |   document.getElementById('app'),
 54 |   <Router>
 55 |     <Route path="/" component={App}>
 56 |       <Route path="home" component={Home} />
 57 |       <Route path="about" component={About} />
 58 |     </Route>
 59 |   </Router>
 60 | );
 61 | ```
 62 | 
 63 | Inside the **App** component, the `children` _prop_ acts as a placeholder for the views that are going to be rendered.
 64 | 
 65 | 
 66 | ## The Link element
 67 | 
 68 | ```jsx
 69 | import { Link } from 'react-router';
 70 | 
 71 | 
 72 | <Link to="/home">Home</Link>
 73 | ```
 74 | 
 75 | The `Link` component is used to navigate through the application. A `Link` is considered active when its content in `to` matches one of the previously defined routes or any of its children routes.
 76 | 
 77 | For example, you can use `activeClassName` to put a class on a Link that is being visited
 78 | 
 79 | ```jsx
 80 | import React from 'react';
 81 | import { render } from 'react-dom';
 82 | import { Link, Router, Route } from 'react-router';
 83 | 
 84 | function App() {
 85 |   return (
 86 |     <div className="app">
 87 |       <nav>
 88 |         <Link to="home" activeClassName="active">Home</Link>
 89 |         <Link to="about" activeClassName="active">About</Link>
 90 |       </nav>
 91 |       { this.props.children }
 92 |     </div>
 93 |   );
 94 | }
 95 | 
 96 | function Home() {
 97 |   return <h1>Home</h1>;
 98 | }
 99 | 
100 | function About() {
101 |   return <h1>About</h1>;
102 | }
103 | 
104 | render(
105 |   document.getElementById('app'),
106 |   <Router>
107 |     <Route path="/" component={App}>
108 |       <Route path="home" component={Home} />
109 |       <Route path="about" component={About} />
110 |     </Route>
111 |   </Router>
112 | );
113 | ```
114 | 
115 | 
116 | ## browserHistory and hashHistory
117 | 
118 | You can configure how you want the url and history of your app to work.
119 | 
120 | `browserHistory` uses the native History API to manipulate the URL, though it might require additional server configuration to make it handle URLs such as `/` such as `/home/messages`.
121 | 
122 | ```jsx
123 | import { Router, browserHistory } from 'react-router';
124 | 
125 | <Router history={ browserHistory }>
126 |   ...
127 | </Router>
128 | ```
129 | 
130 | `hashHistory` uses URL hashes like `example.com/#/some/path` and query keys. It requires no additional server configuration.
131 | 
132 | ```jsx
133 | import { useRouterHistory } from 'react-router'
134 | import { createHashHistory } from 'history'
135 | 
136 | const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });
137 | 
138 | <Router history={ appHistory }>
139 |   ...
140 | </Router>
141 | ```
142 | 
143 | Usually `browserHistory` is preferred over `hashHistory`.
144 | 
145 | 
146 | ### References
147 | 
148 | - [History API on MDN](https://developer.mozilla.org/en-US/docs/Web/API/History)
149 | - [React Router](https://github.com/ReactTraining/react-router)
150 | 


--------------------------------------------------------------------------------