TECHNICAL SHARING & TOI
REACT
ECOSYSTEM
OUTLINE
ES6+
React
Redux
webpack
Immutable
Unit Testing
ECMAScript
-
Created to standardize JavaScript, so as to foster multiple independent implementations.
- Edition 5th - 2009
- Edition 6th (ES6, ECMAScript 2015) - 2015
- Edition 7th - 2016
- Edition 8th - 2017
- ECMAScript 2018 was finalized in January 2018
Brief History of
ES6+
-
let, const
-
Arrow Functions
-
Classes
-
Modules
-
Syntactic Sugar
ES6+
-
Block-scoped binding constructs
let, const
var x = 1
if (true) {
var x = 2
console.log(x)
// 2
}
console.log(x) // 2
let x = 1
if (true) {
let x = 2
console.log(x)
// 2
}
console.log(x) // 1
ES6+
-
Single-assignment
let, const
const foo = 'bar'
foo = 'baz' // throws an TypeError
const animal = { name: 'dog' }
animal.name = 'cat' // 'cat'
ES6+
-
Shorter functions
Arrow Functions
const arr = [ 1, 2, 3 ]
arr.map(function (e) {
return e + 1
})
arr.map((e) => {
return e + 1
})
arr.map(e => e + 1)
ES6+
-
No binding of this
Arrow Functions
this.name = 'robin'
const somebody = {
name: 'ben',
arrowGetName: () => this.name,
regularGetName: function() { return this.name }
}
console.log(somebody.arrowGetName()) // 'robin'
console.log(somebody.regularGetName()) // 'ben'
ES6+
- Syntactic sugar on top of prototype-based inheritance
- Simpler and clearer syntax
Classes
ES6+
Classes
function Animal (name) {
this.name = name
}
Animal.prototype.speak = function () {
console.log(this.name + ' makes some noise')
}
Animal.prototype.jump = function () {
console.log(this.name + ' jumps')
}
function Cat (name) {
Animal.call(this, name)
}
Cat.prototype = Object.create(Animal.prototype)
Cat.prototype.speak = function () {
console.log(this.name + ' meows')
}
var cat = new Cat('Tigger')
cat.speak() // 'Tigger meows'
cat.jump() // 'Tigger jumps'
class Animal {
constructor(name) {
this.name = name
}
speak () {
console.log(this.name + ' makes some noise')
}
jump () {
console.log(this.name + ' jumps')
}
}
class Cat extends Animal {
speak () {
console.log(this.name + ' meows')
}
}
const cat = new Cat('Tigger')
cat.speak() // 'Tigger meows'
cat.jump() // 'Tigger jumps'
ES6+
Modules
// foobar.js
const foo = 'foo'
export default foo
export const bar = 'bar'
// main.js
import foo, { bar } from 'foobar.js'
- Native support for modules
-
A Library for UI building
-
Thinking in Component (State Machine)
-
Props & States
-
Virtual DOM Tree
-
Always redraw
-
JSX (Declarative UI)
REACT
LIFECYCLE
REACT
- HTML written in JavaScript
- using {} to inject js
JSX
React.createElement(
'a',
{
href: 'https://google.com/'
},
'GOOGLE'
)
<a href='https://google.com/'>GOOGLE</a>
REACT
CASE 1
class MyComponent extends React.Component {
render() {
return (
<h1>Please click the button</h1>
// render button
<button>Click Me</button>
);
}
}
REACT
CASE 2
constructor(props) {
super(props);
this.state.name = '123'
}
render() {
return (
<div>
<h1>{`Hello! ${this.state.name}`}</h1>
</div>
);
}
REACT
CASE 3
constructor(props) {
super(props);
this.setState({
value: 'Foo'
})
}
componentDidMount() {
this.setState({
value: 'Foo'
})
}
REACT
CASE 4
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = { greeting: 'Hello World!' }
}
render() {
<MyCustomComponent
id='custom_component'
class='components'
>
<h1>greeting</h1>
</MyCustomComponent>
}
}
REACT
CASE 5
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = { greeting: 'Hello <br/> World!' }
}
render() {
<MyCustomComponent>
<h1>{ this.state.greeting }</h1>
</MyCustomComponent>
}
}
REACT
CASE 6
class Demo extends React.Component {
handleChange(event) {
this.setState({ foo: 'foo' })
}
render() {
return (
<input onChange={this.handleChange} />
);
}
}
REACT
CASE 7
class Demo extends React.Component {
render() {
this.setState({ name: 'Poan' });
return (
<div>`Miss ${name} so much...`</div>
);
}
}
REACT
CASE 8
componentDidMount() {
console.log(this.state.count) // count == 0
this.setState({ count: ++count });
console.log(this.state.count)
}
REACT
- Container Component (Smart Component)
- Presentational Component (Dumb Component)
- Pure Function Component
- Props Validation
REACT
- propTypes
- defaultProps
- Dev environment works only
PROPS VALIDATION
-
A predictable state container
-
A data flow architecture
-
Inspired by Flux
REDUX
Core Concepts
STORE
ACTION
REDUCER
App state, a plain JavaScript object
A plain JavaScript object to change state
Takes state and action, returns next state
REDUX
Three Principles
-
Single source of truth
-
State is read-only
-
Changes are made with pure functions
-
Refs
REDUX
Basic Data Flow
REDUX
Data Flow with Side Effects
webpack
-
A module bundler for modern JavaScript applications
-
Builds a dependency graph of modules, then packages them into a small number of bundles
-
Webpack vs Browserify
WEBPACK
-
Entry
-
Output
-
Loaders
-
Plugins
IMMUTABLE
-
Guaranteed immutability
-
Performance (Structural sharing)
Immutable.js
-
Issues
-
Difficult to interoperate with (e.g. get(), getIn())
-
toJS() API might degrade app performance if not using properly
-
UNIT TESTING
UNIT TESTING
-
React Component Testing
-
Redux-related Testing
-
Action Creator Testing
-
Reducer Testing
-
-
Helpers/Libraries Testing
One More Thing...
Snapshot Testing
Snapshot Testing
- Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.
- Renders a UI component, takes a screenshot, then compares it to a reference image stored alongside the test.
- Snapshot Testing
REACT ECOSYSTEM
By hinx
REACT ECOSYSTEM
- 1,014