کتاب الکترونیکی Learning ReactJS

کتابی که مشاهده می کنید نگارش توسعه دهندگان سایت Stackoverflow است که به زبان انگلیسی منتشر شده است.

کتاب الکترونیکی Learning ReactJS شامل 138 صفحه است که می توانید آن را با فرمت PDF دانلود نمایید.

سرفصل های کتاب

About……………………………………………………. 1

Chapter 1: Getting started with React……………………………………………………. 2
Remarks……………………………………………………. 2
Versions……………………………………………………. 2
Examples……………………………………………………. 3
Installation or Setup……………………………………………………. 3
Hello World Component …………………………………………………….4
Hello World …………………………………………………….5
What is ReactJS?……………………………………………………. 7
Hello World with Stateless Functions …………………………………………………….7
For example: …………………………………………………….8
Create React App …………………………………………………….9
Installation …………………………………………………….9
Configuration …………………………………………………….9
Alternatives……………………………………………………. 9
Absolute Basics of Creating Reusable Components …………………………………………………….10
Components and Props …………………………………………………….10

Chapter 2: Communicate Between Components……………………………………………………. 12
Examples …………………………………………………….12
Communication between Stateless Functional Components …………………………………………………….12

Chapter 3: Communication Between Components …………………………………………………….15
Remarks……………………………………………………. 15
Examples …………………………………………………….15
Parent to Child Components …………………………………………………….15
Child to Parent Components……………………………………………………. 16
Not-related Components …………………………………………………….16

Chapter 4: Components……………………………………………………. 18
Remarks……………………………………………………. 18
Examples……………………………………………………. 18
Basic Component……………………………………………………. 18
Nesting Components …………………………………………………….19
1. Nesting without using children……………………………………………………. 20
Pros……………………………………………………. 20
Cons …………………………………………………….20
Good if …………………………………………………….20
2. Nesting using children …………………………………………………….20
Pros …………………………………………………….21
Cons …………………………………………………….21
Good if …………………………………………………….21
3. Nesting using props …………………………………………………….21
Pros …………………………………………………….22
Cons …………………………………………………….22
Good if …………………………………………………….22
Creating Components……………………………………………………. 22
Basic Structure …………………………………………………….22
Stateless Functional Components …………………………………………………….23
Stateful Components …………………………………………………….23
Higher Order Components …………………………………………………….24
setState pitfalls …………………………………………………….25
Props …………………………………………………….27
Component states – Dynamic user-interface……………………………………………………. 28
Variations of Stateless Functional Components……………………………………………………. 29

Chapter 5: Forms and User Input …………………………………………………….31
Examples …………………………………………………….31
Controlled Components……………………………………………………. 31
Uncontrolled Components……………………………………………………. 31

Chapter 6: Higher Order Components……………………………………………………. 33
Introduction……………………………………………………. 33
Remarks …………………………………………………….33
Examples……………………………………………………. 33
Simple Higher Order Component……………………………………………………. 33
Higher Order Component that checks for authentication …………………………………………………….34
Chapter 7: How and why to use keys in React …………………………………………………….36
Introduction …………………………………………………….36
Remarks……………………………………………………. 36
Examples……………………………………………………. 36
Basic Example …………………………………………………….36

Chapter 8: How to setup a basic webpack, react and babel environment……………………………………………………. 38
Remarks …………………………………………………….38
Examples……………………………………………………. 39
How to build a pipeline for a customized “Hello world” with images…………………………………………………….. 39

Chapter 9: Installation……………………………………………………. 44
Examples……………………………………………………. 44
Simple setup……………………………………………………. 44
Setting up the folders …………………………………………………….44
Setting up the packages……………………………………………………. 44
Setting up webpack …………………………………………………….44
Testing the setup …………………………………………………….45
Using webpack-dev-server……………………………………………………. 46
Setup …………………………………………………….46
Modifying webpack.config.js……………………………………………………. 46

Chapter 10: Introduction to Server-Side Rendering……………………………………………………. 48
Examples …………………………………………………….48
Rendering components …………………………………………………….48
renderToString …………………………………………………….48
renderToStaticMarkup …………………………………………………….48

Chapter 11: JSX……………………………………………………. 49
Remarks …………………………………………………….49
Examples …………………………………………………….50
Props in JSX……………………………………………………. 50
JavaScript Expressions……………………………………………………. 50
String Literals …………………………………………………….50
Props Default Value……………………………………………………. 50
Spread Attributes …………………………………………………….51
Children in JSX …………………………………………………….51
String Literals …………………………………………………….51
JSX Children …………………………………………………….51
JavaScript Expressions …………………………………………………….52
Functions as Children …………………………………………………….53
Ignored Values……………………………………………………. 53

Chapter 12: Keys in react …………………………………………………….55
Introduction …………………………………………………….55
Remarks …………………………………………………….55
Examples …………………………………………………….55
Using the id of an element …………………………………………………….55
Using the array index …………………………………………………….56

Chapter 13: Performance …………………………………………………….57
Examples …………………………………………………….57
The Basics – HTML DOM vs Virtual DOM……………………………………………………. 57
React’s diff algorithm……………………………………………………. 58
Tips & Tricks …………………………………………………….58
Performance measurement with ReactJS …………………………………………………….59

Chapter 14: Props in React …………………………………………………….60
Remarks …………………………………………………….60
Examples …………………………………………………….60
Introduction …………………………………………………….60
Default props …………………………………………………….61
PropTypes …………………………………………………….61
Passing down props using spread operator……………………………………………………. 63
Props.children and component composition …………………………………………………….63
Detecting the type of Children components……………………………………………………. 65

Chapter 15: React AJAX call……………………………………………………. 66
Examples …………………………………………………….66
HTTP GET request …………………………………………………….66
Ajax in React without a third party library – a.k.a with VanillaJS …………………………………………………….67
HTTP GET request and looping through data……………………………………………………. 67

Chapter 16: React Boilerplate [React + Babel + Webpack] …………………………………………………….69
Examples …………………………………………………….69
Setting up the project …………………………………………………….69
react-starter project …………………………………………………….71

Chapter 17: React Component Lifecycle …………………………………………………….74
Introduction …………………………………………………….74
Examples……………………………………………………. 74
Component Creation……………………………………………………. 74
getDefaultProps() (ES5 only) …………………………………………………….74
getInitialState() (ES5 only) …………………………………………………….74
componentWillMount() (ES5 and ES6) …………………………………………………….75
render() (ES5 and ES6)……………………………………………………. 75
componentDidMount() (ES5 and ES6) …………………………………………………….75
ES6 Syntax …………………………………………………….76
Replacing getDefaultProps() …………………………………………………….76
Replacing getInitialState() …………………………………………………….77
Component Update …………………………………………………….77
componentWillReceiveProps(nextProps) …………………………………………………….77
shouldComponentUpdate(nextProps, nextState) …………………………………………………….77
componentWillUpdate(nextProps, nextState) …………………………………………………….78
render() …………………………………………………….78
componentDidUpdate(prevProps, prevState) …………………………………………………….78
Component Removal……………………………………………………. 78
componentWillUnmount()……………………………………………………. 78
React Component Container …………………………………………………….79
Lifecycle method call in different states …………………………………………………….80

Chapter 18: React Forms……………………………………………………. 82
Examples……………………………………………………. 82
Controlled Components …………………………………………………….82

Chapter 19: React Routing …………………………………………………….84
Examples …………………………………………………….84
Example Routes.js file, followed by use of Router Link in component …………………………………………………….84
React Routing Async …………………………………………………….85

Chapter 20: React Tools……………………………………………………. 86
Examples……………………………………………………. 86
Links……………………………………………………. 86

Chapter 21: React with Redux …………………………………………………….87
Introduction …………………………………………………….87
Remarks……………………………………………………. 87
Examples …………………………………………………….87
Using Connect …………………………………………………….87

Chapter 22: React, Webpack & Typescript installation……………………………………………………. 89
Remarks……………………………………………………. 89
Examples …………………………………………………….89
webpack.config.js …………………………………………………….89
The loader …………………………………………………….89
Resolve TS extensions …………………………………………………….89
tsconfig.json …………………………………………………….90
include …………………………………………………….90
compilerOptions.target …………………………………………………….90
compilerOptions.jsx …………………………………………………….90
compilerOptions.allowSyntheticDefaultImports …………………………………………………….90
My First Component …………………………………………………….91

Chapter 23: React.createClass vs extends React.Component …………………………………………………….92
Syntax …………………………………………………….92
Remarks …………………………………………………….92
Examples …………………………………………………….92
Create React Component …………………………………………………….92
React.createClass (deprecated) …………………………………………………….92
React.Component …………………………………………………….92
Declare Default Props and PropTypes……………………………………………………. 93
React.createClass …………………………………………………….93
React.Component …………………………………………………….93
Set Initial State …………………………………………………….94
React.createClass …………………………………………………….94
React.Component……………………………………………………. 95
Mixins …………………………………………………….95
React.createClass……………………………………………………. 95
React.Component …………………………………………………….96
“this” Context …………………………………………………….96
React.createClass …………………………………………………….96
React.Component……………………………………………………. 97
Case 1: Bind inline: …………………………………………………….97
Case 2: Bind in the class constructor …………………………………………………….98
Case 3: Use ES6 anonymous function …………………………………………………….98
ES6/React “this” keyword with ajax to get data from server …………………………………………………….98

Chapter 24: Setting Up React Environment …………………………………………………….100
Examples …………………………………………………….100
Simple React Component …………………………………………………….100
Install all dependencies……………………………………………………. 100
Configure webpack……………………………………………………. 100
Configure babel……………………………………………………. 101
HTML file to use react component …………………………………………………….101
Transpile and bundle your component …………………………………………………….101

Chapter 25: State in React …………………………………………………….102
Examples …………………………………………………….102
Basic State …………………………………………………….102
setState() …………………………………………………….102
Using setState() with an Object as updater …………………………………………………….103
Using setState() with a Function as updater …………………………………………………….103
Calling setState() with an Object and a callback function……………………………………………………. 104
Common Antipattern……………………………………………………. 104
State, Events And Managed Controls……………………………………………………. 106

Chapter 26: Stateless Functional Components……………………………………………………. 108
Remarks …………………………………………………….108
Examples……………………………………………………. 108
Stateless Functional Component …………………………………………………….108

Chapter 27: User interface solutions …………………………………………………….112
Introduction……………………………………………………. 112
Examples……………………………………………………. 112
Basic Pane …………………………………………………….112
Panel …………………………………………………….112
Tab……………………………………………………. 113
PanelGroup …………………………………………………….113
Clarification …………………………………………………….114
Example view with `PanelGroup`s……………………………………………………. 115

Chapter 28: Using React with Flow……………………………………………………. 117
Introduction …………………………………………………….117
Remarks……………………………………………………. 117
Examples …………………………………………………….117
Using Flow to check prop types of stateless functional components……………………………………………………. 117
Using Flow to check prop types……………………………………………………. 117

Chapter 29: Using ReactJS in Flux way……………………………………………………. 118
Introduction …………………………………………………….118
Remarks …………………………………………………….118
Examples …………………………………………………….118
Data Flow …………………………………………………….118
Reverted …………………………………………………….119

Chapter 30: Using ReactJS with jQuery …………………………………………………….120
Examples …………………………………………………….120
ReactJS with jQuery……………………………………………………. 120

Chapter 31: Using ReactJS with Typescript……………………………………………………. 122
Examples …………………………………………………….122
ReactJS component written in Typescript …………………………………………………….122
Stateless React Components in Typescript……………………………………………………. 123
Installation and Setup …………………………………………………….123
Stateless and property-less Components……………………………………………………. 124
Credits …………………………………………………….126