Intro to React
-
Upload
troy-miles -
Category
Software
-
view
375 -
download
0
Transcript of Intro to React
![Page 1: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/1.jpg)
React One DayCowork South Bay 26 August 2017
![Page 2: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/2.jpg)
![Page 3: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/3.jpg)
Me• Troy Miles
• Over 38 years of programming experience
• Software engineer, speaker, book and video author
• @therockncoder
• lynda.com Author
![Page 4: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/4.jpg)
Kotlin for Java Developers
![Page 5: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/5.jpg)
Big Ideas
![Page 6: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/6.jpg)
Big Ideas• mutation
• immutable
• pure functions
• data flow
• state
• single responsibility principle
![Page 7: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/7.jpg)
Mutation• Mutation introduces time into computation
• Mutation forces you to consider an implicit parameter
• This is not to say that mutation is bad or should always be avoided
• But the risks should always be weighed
![Page 8: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/8.jpg)
Immutable
• Variables, once created can’t be changed
• In order to change, a new variable is created
• Easier to track changes
• Easier to undo/redo and time travel
![Page 9: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/9.jpg)
Pure Function
• Must take parameters
• Must return a value
• Can’t produce any side-effects
• Must return the same output for a given input
![Page 10: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/10.jpg)
Pure functions are awesome!
• Cacheable
• Portable
• Self-documenting
• Testable
• Reasonable
![Page 11: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/11.jpg)
Dataflow
• A programming paradigm that models a program as a directed graph of data flowing between operations.
https://en.wikipedia.org/wiki/Dataflow_programming
![Page 12: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/12.jpg)
State
• A snapshot of various conditions in the system
• Most programming languages require a considerable amount of state information, which is generally hidden from the programmer
• Often, the computer itself has no idea which piece of information encodes the enduring state
https://en.wikipedia.org/wiki/Dataflow_programming
![Page 13: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/13.jpg)
Single Responsibility Principle
• Introduced by Robert C. Martin aka Uncle Bob
• Responsibility = reason to change
• A class or module should have only one reason to change
![Page 14: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/14.jpg)
Tools
![Page 15: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/15.jpg)
Tools• Git
• Node.js / npm
• create-react-app
• yarn
• babel
• webpack
![Page 16: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/16.jpg)
Versionsapp command my version
git git —version 2.12.2
node.js node -v v7.9.0
npm npm -v 5.3.0
yarn yarn -v 0.23.3
![Page 17: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/17.jpg)
Babel
![Page 18: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/18.jpg)
Babel
• The compiler for writing the next generation JavaScript
• current version 6.23.0
• works better with Webpack
![Page 19: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/19.jpg)
Babel
• It is modular, with a small lightweight core
• Functionality comes from plugins
• All plugin are opt-in
![Page 20: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/20.jpg)
Presets
• You might need a dozen plugins
• Keep track of them would be burdensome
• Presets are groups of related plugins
• Two popular ones are babel-preset-es2015 and babel-preset-react
![Page 21: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/21.jpg)
Webpack
![Page 22: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/22.jpg)
Webpack
• Module bundler
• Replaces System.JS, Browserify, and others
• Works with JS, CSS, and HTML
• Minifies, concatenates, and bundles
![Page 23: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/23.jpg)
How?
• Webpack starts at your app’s entry point
• It makes a graph of all of its dependencies
• It then bundles them together into an output file
![Page 24: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/24.jpg)
Loaders
• Goal: Webpack handler loading of all of your app’s assets
• Every file is a module
• Webpack only understands only JavaScript
• Loaders transform files into modules
![Page 25: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/25.jpg)
Rules
• test: Identifies the file’s type
• use: Transform the file with a plugin loader
![Page 26: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/26.jpg)
Example #1 module: { rules: [ { test: /\.jsx*$/, exclude: [/node_modules/, /.+\.config.js/], loader: 'babel-loader', },
![Page 27: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/27.jpg)
Example #2 { test: /\.css$/, use: [ { loader: 'style-loader', options: { sourceMap: true } }, { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: '[path]___[name]__[local]___[hash:base64:5]' } }, { loader: 'postcss-loader' } ], },
![Page 28: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/28.jpg)
create-react-app
• npm i -g create-react-app
• create-react-app <app-name>
• cd <app-name>
• yarn start
![Page 29: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/29.jpg)
create-react-app naming
• No uppercase letters
• Only URL friendly characters
• Can’t begin with “.” or <i>
• Maximum length of 214 characters
![Page 30: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/30.jpg)
Yarn
• An improved version of npm
• Created by Facebook, Exponent, Google, and Tilde engineers
• Creates yarn.lock file for repeatable installs
• Faster due to parallel package installation
![Page 31: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/31.jpg)
Yarn CommandsCommand Purpose
start Launches app in browser
build Builds the app
test Run the unit test in watch mode
eject Removes harness from app
link Adds recently add packages
![Page 32: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/32.jpg)
Application Root Directory
• All of the commands, for all of the tools are designed work on the application root directory
• If used anywhere else bad things will happen
• be sure you are in the app root
• double check that you are in the app root
![Page 33: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/33.jpg)
JavaScript
![Page 34: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/34.jpg)
ECMAScript VersionsVersion Date
ES1 June 1997
ES2 June 1998
ES3 December 1999
ES4 DOA 2006
ES5 December 2009
ES2015 / ES6 June 2015
ES2016 / ES7 2016
![Page 35: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/35.jpg)
Collection Operators• .isArray()
• .every()
• .forEach()
• .indexOf()
• .lastIndexOf()
• .some()
• .map()
• .reduce()
• .filter()
![Page 36: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/36.jpg)
maplet junk = [1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}];let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];console.log(nums);// map iterates over all of the elements and returns a new array with the same // number of elementslet nums2 = nums.map((elem) => elem * 2);console.log(nums2); /// [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40]
![Page 37: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/37.jpg)
filterlet junk = [1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}];let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];console.log(nums);// filter iterates over the array and returns a new array with only the elements // that pass the testlet nums3 = nums.filter((elem) => !!(elem % 2));console.log(nums3); /// [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]
![Page 38: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/38.jpg)
reducelet junk = [1, 2, 3, 4, 'Alpha', 5, {name: 'Jason'}];let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];console.log(nums);// reduce iterates over the array passing the previous value and the current// element it is up to you what the reduction does, let's concatenate the stringslet letters2 = letters.reduce((previous, current) => previous + current);console.log(letters2); /// ABCDEFGHIJK// reduceRight does the same but goes from right to leftlet letters3 = letters.reduceRight((previous, current) => previous + current);console.log(letters3); /// KJIHGFEDCBA
![Page 39: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/39.jpg)
let
• let allows us to create a block scoped variables
• they live and die within their curly braces
• var is considered deprecated
• best practice is to use let instead of var
![Page 40: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/40.jpg)
let// let allows us to create block scoped variables// they live and die within the curly braceslet val = 2;console.info(`val = ${val}`);{ let val = 59; console.info(`val = ${val}`);} console.info(`val = ${val}`);
![Page 41: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/41.jpg)
const
• const creates a variable that can't be changed
• best practice is to make any variable that should not change a constant
• does not apply to object properties or array elements
![Page 42: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/42.jpg)
constconst name = 'Troy';console.info(`My name is ${name}`);// the line below triggers a type errorname = 'Miles';
![Page 43: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/43.jpg)
Template strings
• Defined by using opening & closing back ticks
• Templates defined by ${JavaScript value}
• The value can be any simple JavaScript expression
• Allows multi-line strings (return is pass thru)
![Page 44: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/44.jpg)
Template strings let state = 'California'; let city = 'Long Beach'; console.info(`This weekend's workshop is in ${city}, ${state}.`); // template strings can run simple expressions like addition let cup_coffee = 4.5; let cup_tea = 2.5; console.info(`coffee: $${cup_coffee} + tea: $${cup_tea} = $${cup_coffee + cup_tea}.`); // they can allow us to create multi-line strings console.info(`This is line #1.this is line #2.`);
![Page 45: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/45.jpg)
Arrow functions
• Succinct syntax
• Doesn’t bind its own this, arguments, or super
• Facilitate a more functional style of coding
• Can’t be used as constructors
![Page 46: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/46.jpg)
Arrow functions
• When only one parameter, parenthesis optional
• When zero or more than one parameter, parenthesis required
![Page 47: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/47.jpg)
Arrow functionlet anon_func = function (num1, num2) { return num1 + num2;}; console.info(`Anonymous func: ${anon_func(1, 2)}`);let arrow_func = (num1, num2) => num1 + num2;console.info(`Arrow func: ${arrow_func(3, 4)}`);
![Page 48: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/48.jpg)
this
• this is handled different in arrow functions
• In anonymous function this is bound to the global object
• In arrow function this is what it was in the outer scope
![Page 49: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/49.jpg)
Destructuring
• Maps the data on the right side of the equals sign to the variables on the left
• The data type decides the way values are mapped
• It is either object or array destructuring
![Page 50: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/50.jpg)
Object Destructuring16// this is a demo of the power of destructuring 17// we have two objects with the same 3 properties 18 const binary = {kb: 1024, mb: 1048576, gb: 1073741824}; 19 const digital = {kb: 1000, mb: 1000000, gb: 1000000000}; 20// We use a ternary statement to choose which object 21// assign properties based on their property names 22 const {kb, mb, gb} = (useBinary) ? binary : digital;
![Page 51: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/51.jpg)
Array Destructuring5 6 let [param1, bob, key] = ['first', 'second', '3rd']; 7 console.info(`param1 = ${param1}, bob = ${bob}, key = ${key}`); 8 // param1 = first, bob = second, key = 3rd
![Page 52: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/52.jpg)
Spread syntax
• Expands an expression in places where multiple arguments, elements, or variables are expected
![Page 53: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/53.jpg)
The spread operator11 12 // the spread operator 13 const myArray = ['Bob', 'Sue', 'Fido']; 14 function printFamily(person1, person2, pet) { 15 console.info(`Person 1: ${person1}, Person 2: ${person2}, and their pet: ${pet}`); 16 } 17 printFamily(...myArray); 18 // Person 1: Bob, Person 2: Sue, and their pet: Fido 19
![Page 54: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/54.jpg)
Class• Syntactic sugar over JavaScript use of function
constructors
• JavaScript uses proto-typical inheritance
• If a class extends another, it must include super() as first instruction in its constructor
• Only create a constructor if it does something
![Page 55: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/55.jpg)
Class• Syntactic sugar over JavaScript use of function
constructors
• JavaScript uses proto-typical inheritance
• If a class extends another, it must include super() as first instruction in its constructor
• Only create a constructor if it does something
![Page 56: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/56.jpg)
import• Imports functions, objects, or primitives from other
files
• import <name> from “<module name>”;
• import {name } from “<module name>”;
• import * as Greetings from “<module name>”;
• relative path indicates not an npm package
![Page 57: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/57.jpg)
export
• export <var a>
• export {a, b};
![Page 58: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/58.jpg)
export default• only one per file
• common pattern for libraries
• const Greetings = {sayHi, sayBye};
• export default Greetings;
• export default {sayHi, sayBye};
![Page 59: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/59.jpg)
Importing Old School JS
• Many JS libraries don’t support the new syntax
• How do we use them?
• import ‘moment’;
![Page 60: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/60.jpg)
React
![Page 61: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/61.jpg)
React• A JavaScript library for building user interfaces
• Created by Facebook & Instagram
• Initial release March 2013
• Current version 15.6.1
• Next major version 16.0.0, will have breaking changes
![Page 62: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/62.jpg)
React
• Virtual DOM
• One-way data flow
• JSX - JavaScript eXtension allows in HTML generation
• Component-based
![Page 63: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/63.jpg)
React API
• The use of JSX is optional in React
• You can use the React “API” instead
• The createClass method is deprecated and will be removed in React 16
![Page 64: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/64.jpg)
Component
• Fundamental building block of React
• Can be created with a JS Class or Function
• The render method is mandatory
![Page 65: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/65.jpg)
Class Component3 4 class Square extends React.Component { 5 render() { 6 return ( 7 <button 8 className="square" 9 onClick={() => this.props.onClick()}> 10 {this.props.value} 11 </button> 12 ); 13 } 14 } 15
![Page 66: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/66.jpg)
Functional Component15 16 function Square(props) { 17 return ( 18 <button 19 className="square" 20 onClick={() => props.onClick()}> 21 {props.value} 22 </button> 23 ); 24 }
![Page 67: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/67.jpg)
React.PropTypes
• React.PropTypes is deprecated
• It will be deleted in React 16
• Use the npm package “prop-types” instead
• importPropTypesfrom‘prop-types’;
![Page 68: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/68.jpg)
PropTypes
• PropTypes allow you to declare what properties your component expects
• React validates property at runtime
• Using propTypes is optional
![Page 69: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/69.jpg)
Some PropTypesComponent CommandPropTypes.array an optional arrayPropTypes.bool an optional boolPropTypes.element An optional React elementPropTypes.func An optional functionPropTypes.node Anything that can be renderedPropTypes.number An optional numberPropTypes.object An optional objectPropTypes.string An optional stringPropTypes.symbol An optional Symbol
![Page 70: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/70.jpg)
PropType in code1 2 import React from 'react'; 3 import ReactDOM from 'react-dom'; 4 import PropTypes from 'prop-types'; 5 6 class App extends React.Component { 7 render () { 8 return React.DOM.span(null, `My name is ${this.props.name}`); 9 } 10 } 11 12 App.propTypes = { 13 name: PropTypes.string.isRequired 14 }; 15 16 ReactDOM.render( 17 React.createElement(App, {}), 18 document.getElementById('root') 19 ); 20 21
![Page 71: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/71.jpg)
When property is missing
![Page 72: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/72.jpg)
React Components
• Can be created two ways:
• Using JavaScript
• Using JSX
![Page 73: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/73.jpg)
Components via JS• React’s API contains method createElement()
• Takes 3 parameters: type, props, children render() { return React.createElement('h1', null, "Hello there.");
![Page 74: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/74.jpg)
JSX• JavaScript Syntax EXtension
• A mixture of JavaScript and HTML syntax
• Compiles to JavaScript
• Is optional but preferred over using JavaScript
• Is easier to read
![Page 75: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/75.jpg)
JSX Attributes
• Can assign either a string or an expression
• Strings can be either single or double quotes
• Expressions must be enclosed with curly braces
![Page 76: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/76.jpg)
Boolean Attributes• HTML has a few boolean attributes, if present they
are true
• Some of these include: checked, selected, disabled
• In JSX,
• <Component disabled={true / false} />
![Page 77: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/77.jpg)
Forbidden Attributes
• Two attributes are JavaScript keywords
• JavaScript keywords can’t be used in JSX
• class -> className
• for -> htmlFor
![Page 78: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/78.jpg)
JSX Spread Syntax
• a shortcut to passing props to a component
• uses ES2015 spread operator
• <Component {…object} />
![Page 79: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/79.jpg)
JSX Spread Syntax return ( <Timer id={this.props.id} amount={this.props.amount} elapsed={this.props.elapsed} runningSince={this.props.runningSince} onStartClick={this.props.onStartClick} onStopClick={this.props.onStopClick} onResetClick={this.props.onResetClick} onSetClick={this.handleSetClick} /> );
![Page 80: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/80.jpg)
JSX Spread Syntax return ( <Timer {...this.props} onSetClick={this.handleSetClick} /> );
![Page 81: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/81.jpg)
JSX Debugging Tip
• Assign component to a variable
• console.log the variable
![Page 82: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/82.jpg)
JSX Debugging Tip const timerComp = ( <Timer troy='miles' {...this.props} onSetClick={this.handleSetClick} /> ); console.log(timerComp);
![Page 83: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/83.jpg)
JSX Debugging Tip
![Page 84: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/84.jpg)
JSX Debugging Tip
![Page 85: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/85.jpg)
Lifecycle EventsEvent WhencomponentWillMount invoked once before rendering
componentDidMount invoked after component loaded
componentWillReceiveProps invoked when receiving new props
shouldComponentUpdate asks if component should update
componentWillUpdate invoked before rendering new props
componentDidUpdate invoked after rendered new props
componentWillUnmount invoked before component removed
![Page 86: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/86.jpg)
Flux
![Page 87: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/87.jpg)
Flux
• Application architecture for building user interfaces
• A pattern for managing data flow in your app
• One way data flow
• 4 main parts: Dispatcher, Store, Action, & View
![Page 88: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/88.jpg)
The 4 main parts
• Dispatcher: receives actions & dispatches them to stores
• Store: holds the data of an app
• Action: define app’s internal API
• View: displays the data from stores
![Page 89: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/89.jpg)
![Page 90: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/90.jpg)
Redux
![Page 91: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/91.jpg)
Redux• A predictable state container for JS apps
• Works well with React Native
• An alternative to and inspired by Flux
• Single store for the entire app
• Makes it easier to hot-load your app
• Created by Dan Abramov
![Page 92: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/92.jpg)
3 Principles
• Single source of truth
• State is read-only
• Changes are made with pure functions
![Page 93: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/93.jpg)
Actions• Actions are payloads of information that send data
from you application to your store.
• They are sent using store.dispatch()
• They are JavaScript objects
• Typically have a type property which defines their action
• The type is normally a string
![Page 94: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/94.jpg)
Action Creators
• Functions that create actions
• This makes them both portable and easy to test
• (In Flux, the creator usually triggers a dispatch)
![Page 95: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/95.jpg)
Reducers
• Take the current state and an action and return the new state
• It is important for reducers to stay pure
![Page 96: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/96.jpg)
A Reducer Shouldn’t
• Mutate its arguments
• Perform side effects like API calls or routing transitions
• Call non-pure functions like Date.now()
![Page 97: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/97.jpg)
Store
• Holds app state
• Allows access to the state via getState()
• Allows state to be updated via dispatch(action)
• Registers listeners via subscribe(listener)
![Page 98: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/98.jpg)
Redux Data Lifecycle• Call store.dispatch(action)
• Redux store calls the reducer function
• The root reducer combines the output of multiple reducers into a single state tree
• The redux store saves the complete state tree
• (component.setState(newState) called)
![Page 99: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/99.jpg)
Middleware
• Redux is optimized for a synchronous workflow
• Middleware occurs between the dispatcher and the reducer
• Can be used for: logging, optimistic updating, etc.
![Page 100: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/100.jpg)
React-Redux
• Binds Redux to React
• Redux middleware
• npm i -S react-redux
![Page 101: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/101.jpg)
context
• Similar to props except doesn't have to be explicitly passed
• Any child can have access to context no matter how far down it is
• Libraries use context to create provider components
![Page 102: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/102.jpg)
connect()• Separates the concerns of the container and
presentational components
• Takes 2 arguments
• a function that maps app state to a JS object
• a function that maps the store's dispatch to props
• returns a new function
![Page 103: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/103.jpg)
Binders
• mapStateToProps(state)
• Maps state values to the component’s props
• mapDispatchToProps
• Binds dispatch actions of the component to the store
![Page 104: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/104.jpg)
Component TypesPresentational Container
Purpose How things look How things work
Redux Aware No Yes
Read data Read from props Subscribe to Redux State
Change data Invoke callbacks Dispatch Redux actions
How written By hand Generated by react-redux
![Page 105: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/105.jpg)
Redux Saga
![Page 106: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/106.jpg)
Redux Saga
• A library that aims to make side effects in React/Redux apps easier and better
• version 0.15.6
• npm i -S react-saga
![Page 107: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/107.jpg)
Sagas
• Sagas implemented as Generator functions that yield objects to the redux saga middleware
• Sagas can yield Effects in multiple forms, the simplest is a Promise
![Page 108: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/108.jpg)
Effects
• Effects are JS objects which contain instructions to be fulfilled by the middleware
• When middleware retrieves an Effect yielded by a saga, the saga is paused until the Effect is fulfilled
• Separation between the Effect creation and execution make it easy to test our Generator
![Page 109: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/109.jpg)
Instructions• delay is a utility function that returns a promise that
resolves after a specified number milliseconds
• put is an Effect
• call returns an Effect which instructs the middleware to call a given function with the given arguments
![Page 110: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/110.jpg)
React Router
![Page 111: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/111.jpg)
React Router
• A complete routing library for React
• Keeps UI in sync with URL
• version 4.1.1
• npm i -S react-router-dom
![Page 112: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/112.jpg)
Routing
• React is a UI library
• It has no built-in routing
• Creating your own solution isn't hard but…
• There are dozens of community sponsored routers
![Page 113: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/113.jpg)
Router Basics
• Routing is done with components
• The Router component wraps all
• Route components match paths
• Routes can be nested
![Page 114: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/114.jpg)
reactstrap• React Bootstrap 4 components
• yarn add reactstrap [email protected] react-addons-transition-group react-addons-css-transition-group
• npm install --save reactstrap [email protected] react-addons-transition-group react-addons-css-transition-group
![Page 115: Intro to React](https://reader031.fdocuments.in/reader031/viewer/2022022415/5a66bc707f8b9a3c0e8b4df9/html5/thumbnails/115.jpg)
Summary
• React is good
• Redux makes it better
• Redux-Saga & React-Router makes creating complex apps easier