Contents
About ................................................................................................................................................................................... 1
Chapter 1: Getting started with React ............................................................................................................... 2
Section 1.1: What is ReactJS? ........................................................................................................................................ 2
Section 1.2: Installation or Setup .................................................................................................................................. 3
Section 1.3: Hello World with Stateless Functions ....................................................................................................... 4
Section 1.4: Absolute Basics of Creating Reusable Components ............................................................................. 5
Section 1.5: Create React App ...................................................................................................................................... 6
Section 1.6: Hello World ................................................................................................................................................. 7
Section 1.7: Hello World Component ........................................................................................................................... 8
Chapter 2: Components ........................................................................................................................................... 11
Section 2.1: Creating Components ............................................................................................................................. 11
Section 2.2: Basic Component ................................................................................................................................... 13
Section 2.3: Nesting Components .............................................................................................................................. 14
Section 2.4: Props ........................................................................................................................................................ 16
Section 2.5: Component states - Dynamic user-interface ...................................................................................... 17
Section 2.6: Variations of Stateless Functional Components ................................................................................. 19
Section 2.7: setState pitfalls ....................................................................................................................................... 20
Chapter 3: Using ReactJS with TypeScript .................................................................................................... 22
Section 3.1: ReactJS component written in TypeScript ........................................................................................... 22
Section 3.2: Installation and Setup ............................................................................................................................ 22
Section 3.3: Stateless React Components in TypeScript ......................................................................................... 23
Section 3.4: Stateless and property-less Components ............................................................................................ 24
Chapter 4: State in React ...................................................................................................................................... 25
Section 4.1: Basic State ............................................................................................................................................... 25
Section 4.2: Common Antipattern ............................................................................................................................. 25
Section 4.3: setState() ................................................................................................................................................. 26
Section 4.4: State, Events And Managed Controls ................................................................................................... 28
Chapter 5: Props in React ...................................................................................................................................... 30
Section 5.1: Introduction .............................................................................................................................................. 30
Section 5.2: Default props .......................................................................................................................................... 30
Section 5.3: PropTypes ............................................................................................................................................... 31
Section 5.4: Passing down props using spread operator ....................................................................................... 32
Section 5.5: Props.children and component composition ....................................................................................... 33
Section 5.6: Detecting the type of Children components ........................................................................................ 34
Chapter 6: React Component Lifecycle .......................................................................................................... 35
Section 6.1: Component Creation ............................................................................................................................... 35
Section 6.2: Component Removal ............................................................................................................................. 37
Section 6.3: Component Update ................................................................................................................................ 38
Section 6.4: Lifecycle method call in dierent states .............................................................................................. 39
Section 6.5: React Component Container ................................................................................................................. 40
Chapter 7: Forms and User Input ....................................................................................................................... 42
Section 7.1: Controlled Components .......................................................................................................................... 42
Section 7.2: Uncontrolled Components ..................................................................................................................... 42
Chapter 8: React Boilerplate [React + Babel + Webpack] ................................................................... 44
Section 8.1: react-starter project ............................................................................................................................... 44
Section 8.2: Setting up the project ............................................................................................................................. 45
,Chapter 9: Using ReactJS with jQuery ............................................................................................................. 48
Section 9.1: ReactJS with jQuery ................................................................................................................................ 48
Chapter 10: React Routing ..................................................................................................................................... 50
Section 10.1: Example Routes.js file, followed by use of Router Link in component ............................................. 50
Section 10.2: React Routing Async ............................................................................................................................ 51
Chapter 11: Communicate Between Components ...................................................................................... 52
Section 11.1: Communication between Stateless Functional Components ............................................................ 52
Chapter 12: How to setup a basic webpack, react and babel environment ................................ 54
Section 12.1: How to build a pipeline for a customized "Hello world" with images ............................................... 54
Chapter 13: React.createClass vs extends React.Component ............................................................. 58
Section 13.1: Create React Component ...................................................................................................................... 58
Section 13.2: "this" Context .......................................................................................................................................... 58
Section 13.3: Declare Default Props and PropTypes ............................................................................................... 60
Section 13.4: Mixins ...................................................................................................................................................... 62
Section 13.5: Set Initial State ....................................................................................................................................... 62
Section 13.6: ES6/React “this” keyword with ajax to get data from server ........................................................... 63
Chapter 14: React AJAX call .................................................................................................................................. 65
Section 14.1: HTTP GET request .................................................................................................................................. 65
Section 14.2: HTTP GET request and looping through data ................................................................................... 66
Section 14.3: Ajax in React without a third party library - a.k.a with VanillaJS ..................................................... 66
Chapter 15: Communication Between Components .................................................................................. 68
Section 15.1: Child to Parent Components ................................................................................................................. 68
Section 15.2: Not-related Components ..................................................................................................................... 68
Section 15.3: Parent to Child Components ................................................................................................................ 69
Chapter 16: Stateless Functional Components ............................................................................................ 71
Section 16.1: Stateless Functional Component .......................................................................................................... 71
Chapter 17: Performance ........................................................................................................................................ 74
Section 17.1: Performance measurement with ReactJS .......................................................................................... 74
Section 17.2: React's di algorithm ............................................................................................................................ 74
Section 17.3: The Basics - HTML DOM vs Virtual DOM ............................................................................................ 75
Section 17.4: Tips & Tricks ........................................................................................................................................... 76
Chapter 18: Introduction to Server-Side Rendering ................................................................................. 77
Section 18.1: Rendering components ......................................................................................................................... 77
Chapter 19: Setting Up React Environment ................................................................................................... 78
Section 19.1: Simple React Component ..................................................................................................................... 78
Section 19.2: Install all dependencies ........................................................................................................................ 78
Section 19.3: Configure webpack ............................................................................................................................... 78
Section 19.4: Configure babel ..................................................................................................................................... 79
Section 19.5: HTML file to use react component ...................................................................................................... 79
Section 19.6: Transpile and bundle your component .............................................................................................. 79
Chapter 20: Using React with Flow .................................................................................................................... 80
Section 20.1: Using Flow to check prop types of stateless functional components ............................................. 80
Section 20.2: Using Flow to check prop types ......................................................................................................... 80
Chapter 21: JSX ............................................................................................................................................................ 81
Section 21.1: Props in JSX ............................................................................................................................................ 81
Section 21.2: Children in JSX ....................................................................................................................................... 82
Chapter 22: React Forms ........................................................................................................................................ 85
Section 22.1: Controlled Components ........................................................................................................................ 85
,Chapter 23: User interface solutions ................................................................................................................ 87
Section 23.1: Basic Pane .............................................................................................................................................. 87
Section 23.2: Panel ...................................................................................................................................................... 87
Section 23.3: Tab ......................................................................................................................................................... 88
Section 23.4: PanelGroup ............................................................................................................................................ 88
Section 23.5: Example view with `PanelGroup`s ....................................................................................................... 89
Chapter 24: Using ReactJS in Flux way ........................................................................................................... 91
Section 24.1: Data Flow ............................................................................................................................................... 91
Chapter 25: React, Webpack & TypeScript installation ......................................................................... 92
Section 25.1: webpack.config.js .................................................................................................................................. 92
Section 25.2: tsconfig.json .......................................................................................................................................... 92
Section 25.3: My First Component ............................................................................................................................. 93
Chapter 26: How and why to use keys in React .......................................................................................... 94
Section 26.1: Basic Example ........................................................................................................................................ 94
Chapter 27: Keys in react ....................................................................................................................................... 95
Section 27.1: Using the id of an element ................................................................................................................... 95
Section 27.2: Using the array index ........................................................................................................................... 95
Chapter 28: Higher Order Components .......................................................................................................... 97
Section 28.1: Higher Order Component that checks for authentication ................................................................ 97
Section 28.2: Simple Higher Order Component ....................................................................................................... 98
Chapter 29: React with Redux .............................................................................................................................. 99
Section 29.1: Using Connect ....................................................................................................................................... 99
Appendix A: Installation ......................................................................................................................................... 100
Section A.1: Simple setup .......................................................................................................................................... 100
Section A.2: Using webpack-dev-server ................................................................................................................. 101
Appendix B: React Tools ....................................................................................................................................... 103
Section B.1: Links ....................................................................................................................................................... 103
Credits ............................................................................................................................................................................ 104
You may also like ...................................................................................................................................................... 106
, Chapter 1: Getting started with React
Version Release Date
0.3.0 2013-05-29
0.4.0 2013-07-17
0.5.0 2013-10-16
0.8.0 2013-12-19
0.9.0 2014-02-20
0.10.0 2014-03-21
0.11.0 2014-07-17
0.12.0 2014-10-28
0.13.0 2015-03-10
0.14.0 2015-10-07
15.0.0 2016-04-07
15.1.0 2016-05-20
15.2.0 2016-07-01
15.2.1 2016-07-08
15.3.0 2016-07-29
15.3.1 2016-08-19
15.3.2 2016-09-19
15.4.0 2016-11-16
15.4.1 2016-11-23
15.4.2 2017-01-06
15.5.0 2017-04-07
15.6.0 2017-06-13
15.6.1 2017-06-14
15.6.2 2017-09-25
16.0.0 2017-09-26
16.1.0 2017-11-09
16.1.1 2017-11-13
16.3.0 2018-03-29
16.3.1 2018-04-03
16.3.2 2018-04-16
Section 1.1: What is ReactJS?
ReactJS is an open-source, component based front end library responsible only for the view layer of the
application. It is maintained by Facebook.
ReactJS uses virtual DOM based mechanism to fill in data (views) in HTML DOM. The virtual DOM works fast owning
to the fact that it only changes individual DOM elements instead of reloading complete DOM every time
A React application is made up of multiple components, each responsible for outputting a small,
reusable piece of HTML. Components can be nested within other components to allow complex
applications to be built out of simple building blocks. A component may also maintain internal state - for
example, a TabList component may store a variable corresponding to the currently open tab.
2
About ................................................................................................................................................................................... 1
Chapter 1: Getting started with React ............................................................................................................... 2
Section 1.1: What is ReactJS? ........................................................................................................................................ 2
Section 1.2: Installation or Setup .................................................................................................................................. 3
Section 1.3: Hello World with Stateless Functions ....................................................................................................... 4
Section 1.4: Absolute Basics of Creating Reusable Components ............................................................................. 5
Section 1.5: Create React App ...................................................................................................................................... 6
Section 1.6: Hello World ................................................................................................................................................. 7
Section 1.7: Hello World Component ........................................................................................................................... 8
Chapter 2: Components ........................................................................................................................................... 11
Section 2.1: Creating Components ............................................................................................................................. 11
Section 2.2: Basic Component ................................................................................................................................... 13
Section 2.3: Nesting Components .............................................................................................................................. 14
Section 2.4: Props ........................................................................................................................................................ 16
Section 2.5: Component states - Dynamic user-interface ...................................................................................... 17
Section 2.6: Variations of Stateless Functional Components ................................................................................. 19
Section 2.7: setState pitfalls ....................................................................................................................................... 20
Chapter 3: Using ReactJS with TypeScript .................................................................................................... 22
Section 3.1: ReactJS component written in TypeScript ........................................................................................... 22
Section 3.2: Installation and Setup ............................................................................................................................ 22
Section 3.3: Stateless React Components in TypeScript ......................................................................................... 23
Section 3.4: Stateless and property-less Components ............................................................................................ 24
Chapter 4: State in React ...................................................................................................................................... 25
Section 4.1: Basic State ............................................................................................................................................... 25
Section 4.2: Common Antipattern ............................................................................................................................. 25
Section 4.3: setState() ................................................................................................................................................. 26
Section 4.4: State, Events And Managed Controls ................................................................................................... 28
Chapter 5: Props in React ...................................................................................................................................... 30
Section 5.1: Introduction .............................................................................................................................................. 30
Section 5.2: Default props .......................................................................................................................................... 30
Section 5.3: PropTypes ............................................................................................................................................... 31
Section 5.4: Passing down props using spread operator ....................................................................................... 32
Section 5.5: Props.children and component composition ....................................................................................... 33
Section 5.6: Detecting the type of Children components ........................................................................................ 34
Chapter 6: React Component Lifecycle .......................................................................................................... 35
Section 6.1: Component Creation ............................................................................................................................... 35
Section 6.2: Component Removal ............................................................................................................................. 37
Section 6.3: Component Update ................................................................................................................................ 38
Section 6.4: Lifecycle method call in dierent states .............................................................................................. 39
Section 6.5: React Component Container ................................................................................................................. 40
Chapter 7: Forms and User Input ....................................................................................................................... 42
Section 7.1: Controlled Components .......................................................................................................................... 42
Section 7.2: Uncontrolled Components ..................................................................................................................... 42
Chapter 8: React Boilerplate [React + Babel + Webpack] ................................................................... 44
Section 8.1: react-starter project ............................................................................................................................... 44
Section 8.2: Setting up the project ............................................................................................................................. 45
,Chapter 9: Using ReactJS with jQuery ............................................................................................................. 48
Section 9.1: ReactJS with jQuery ................................................................................................................................ 48
Chapter 10: React Routing ..................................................................................................................................... 50
Section 10.1: Example Routes.js file, followed by use of Router Link in component ............................................. 50
Section 10.2: React Routing Async ............................................................................................................................ 51
Chapter 11: Communicate Between Components ...................................................................................... 52
Section 11.1: Communication between Stateless Functional Components ............................................................ 52
Chapter 12: How to setup a basic webpack, react and babel environment ................................ 54
Section 12.1: How to build a pipeline for a customized "Hello world" with images ............................................... 54
Chapter 13: React.createClass vs extends React.Component ............................................................. 58
Section 13.1: Create React Component ...................................................................................................................... 58
Section 13.2: "this" Context .......................................................................................................................................... 58
Section 13.3: Declare Default Props and PropTypes ............................................................................................... 60
Section 13.4: Mixins ...................................................................................................................................................... 62
Section 13.5: Set Initial State ....................................................................................................................................... 62
Section 13.6: ES6/React “this” keyword with ajax to get data from server ........................................................... 63
Chapter 14: React AJAX call .................................................................................................................................. 65
Section 14.1: HTTP GET request .................................................................................................................................. 65
Section 14.2: HTTP GET request and looping through data ................................................................................... 66
Section 14.3: Ajax in React without a third party library - a.k.a with VanillaJS ..................................................... 66
Chapter 15: Communication Between Components .................................................................................. 68
Section 15.1: Child to Parent Components ................................................................................................................. 68
Section 15.2: Not-related Components ..................................................................................................................... 68
Section 15.3: Parent to Child Components ................................................................................................................ 69
Chapter 16: Stateless Functional Components ............................................................................................ 71
Section 16.1: Stateless Functional Component .......................................................................................................... 71
Chapter 17: Performance ........................................................................................................................................ 74
Section 17.1: Performance measurement with ReactJS .......................................................................................... 74
Section 17.2: React's di algorithm ............................................................................................................................ 74
Section 17.3: The Basics - HTML DOM vs Virtual DOM ............................................................................................ 75
Section 17.4: Tips & Tricks ........................................................................................................................................... 76
Chapter 18: Introduction to Server-Side Rendering ................................................................................. 77
Section 18.1: Rendering components ......................................................................................................................... 77
Chapter 19: Setting Up React Environment ................................................................................................... 78
Section 19.1: Simple React Component ..................................................................................................................... 78
Section 19.2: Install all dependencies ........................................................................................................................ 78
Section 19.3: Configure webpack ............................................................................................................................... 78
Section 19.4: Configure babel ..................................................................................................................................... 79
Section 19.5: HTML file to use react component ...................................................................................................... 79
Section 19.6: Transpile and bundle your component .............................................................................................. 79
Chapter 20: Using React with Flow .................................................................................................................... 80
Section 20.1: Using Flow to check prop types of stateless functional components ............................................. 80
Section 20.2: Using Flow to check prop types ......................................................................................................... 80
Chapter 21: JSX ............................................................................................................................................................ 81
Section 21.1: Props in JSX ............................................................................................................................................ 81
Section 21.2: Children in JSX ....................................................................................................................................... 82
Chapter 22: React Forms ........................................................................................................................................ 85
Section 22.1: Controlled Components ........................................................................................................................ 85
,Chapter 23: User interface solutions ................................................................................................................ 87
Section 23.1: Basic Pane .............................................................................................................................................. 87
Section 23.2: Panel ...................................................................................................................................................... 87
Section 23.3: Tab ......................................................................................................................................................... 88
Section 23.4: PanelGroup ............................................................................................................................................ 88
Section 23.5: Example view with `PanelGroup`s ....................................................................................................... 89
Chapter 24: Using ReactJS in Flux way ........................................................................................................... 91
Section 24.1: Data Flow ............................................................................................................................................... 91
Chapter 25: React, Webpack & TypeScript installation ......................................................................... 92
Section 25.1: webpack.config.js .................................................................................................................................. 92
Section 25.2: tsconfig.json .......................................................................................................................................... 92
Section 25.3: My First Component ............................................................................................................................. 93
Chapter 26: How and why to use keys in React .......................................................................................... 94
Section 26.1: Basic Example ........................................................................................................................................ 94
Chapter 27: Keys in react ....................................................................................................................................... 95
Section 27.1: Using the id of an element ................................................................................................................... 95
Section 27.2: Using the array index ........................................................................................................................... 95
Chapter 28: Higher Order Components .......................................................................................................... 97
Section 28.1: Higher Order Component that checks for authentication ................................................................ 97
Section 28.2: Simple Higher Order Component ....................................................................................................... 98
Chapter 29: React with Redux .............................................................................................................................. 99
Section 29.1: Using Connect ....................................................................................................................................... 99
Appendix A: Installation ......................................................................................................................................... 100
Section A.1: Simple setup .......................................................................................................................................... 100
Section A.2: Using webpack-dev-server ................................................................................................................. 101
Appendix B: React Tools ....................................................................................................................................... 103
Section B.1: Links ....................................................................................................................................................... 103
Credits ............................................................................................................................................................................ 104
You may also like ...................................................................................................................................................... 106
, Chapter 1: Getting started with React
Version Release Date
0.3.0 2013-05-29
0.4.0 2013-07-17
0.5.0 2013-10-16
0.8.0 2013-12-19
0.9.0 2014-02-20
0.10.0 2014-03-21
0.11.0 2014-07-17
0.12.0 2014-10-28
0.13.0 2015-03-10
0.14.0 2015-10-07
15.0.0 2016-04-07
15.1.0 2016-05-20
15.2.0 2016-07-01
15.2.1 2016-07-08
15.3.0 2016-07-29
15.3.1 2016-08-19
15.3.2 2016-09-19
15.4.0 2016-11-16
15.4.1 2016-11-23
15.4.2 2017-01-06
15.5.0 2017-04-07
15.6.0 2017-06-13
15.6.1 2017-06-14
15.6.2 2017-09-25
16.0.0 2017-09-26
16.1.0 2017-11-09
16.1.1 2017-11-13
16.3.0 2018-03-29
16.3.1 2018-04-03
16.3.2 2018-04-16
Section 1.1: What is ReactJS?
ReactJS is an open-source, component based front end library responsible only for the view layer of the
application. It is maintained by Facebook.
ReactJS uses virtual DOM based mechanism to fill in data (views) in HTML DOM. The virtual DOM works fast owning
to the fact that it only changes individual DOM elements instead of reloading complete DOM every time
A React application is made up of multiple components, each responsible for outputting a small,
reusable piece of HTML. Components can be nested within other components to allow complex
applications to be built out of simple building blocks. A component may also maintain internal state - for
example, a TabList component may store a variable corresponding to the currently open tab.
2
