- The brief history of React
- Why React?
- JSX
- React components
- props and state
- virtual DOM and Diff algorithm
- unidirectional data flow
- Component lifecycle
- React synthetic events
Road to React
by Julia Dizhak
March - October 1,2 2018
by Julia Dizhak
March - October 1,2 2018
August 26, 2006, 12 years ago - introduced Jquery by John Resig
2010, 7 years ago - Backbone released
2011-2012 - AngularJS become popular (created by Google)
March 2013; 5 years ago React realised by Jordan Walke
Dan Abramov tweet about VueJS
It's a JS library for building UI created and maintained by Facebook.
React current version is 16.5
celebration anniversary 5 years
How do you manage large project directories with many components?
Around it people built whole universe with Redux (Flux implementation).
There’re dozens of libs like: React-boostrap, React material design, React sliders, scrollers, grids, React animations and ...
inside script tag
const rootElement = document.getElementById('mountNode');
const element = document.createElement('div');
element.textContent = 'Hi JS! Pure JS!';
element.className = 'container';
rootElement.appendChild(element);
codepen example
import react.js, react-dom.js
inside script tag
const mountElement = document.getElementById('mountNode');
const element = React.createElement(
'div', {className: 'container'},'I love React'
);
ReactDOM.render(element, mountElement);
codepen example
const element = React.createElement(
'div', {className: 'container'},
React.createElement('span', {className: 'child'}, 'some text'),
...
);
import react.js, react-dom.js, babel!
inside script tag
const mountElement = document.getElementById('mountNode');
const element = <div className="wrap">I love React</div>
ReactDOM.render(element, mountElement);
codepen example
To render HTML tags
const element = <div className="wrap"/>
ReactDOM.render(element, document.getElementById('mountNode'));
To render React Component
const element = <CustomComponent className="wrap"/>
ReactDOM.render(element, document.getElementById('mountNode'));
syntax
condition ? expression1 : expression2
You can’t use a regular if statement, but a ternary expression is ok.
const element = <div className={(4 < 2) ? 'customClassName' : 'errorClassName'}>..</div>
JSX elements must be wrapped in an enclosing tag
Or you can use React.Fragment for this purpose
React is designed around the concept of reusable components.
You define small components and you put them together to form bigger components.
All components are reusable, even across different projects.
codepen example
function Button(props) {
return (
<button>{props.text}</button>
);
}
const element = (
<div className="container">
<Button text="click on me" />
<Button text="I ♥ React" />
</div>
)
function DisplayMessage(props) {
return (
<div>
{props.message ? (
<div>{props.message}</div>
) : (
<div>No Message</div>
)}
</div>
);
}
function Button(props) {
const style = {
paddingLeft: '20px',
backgroundColor: 'orange'
}
return (
<button style={style}>{props.text}</button>
);
}
Props are external, and not controlled by the component itself.
It’s passed down from components higher up the hierarchy, who also control the data.
function TextInput(props) {
return (
<input
type={type}
className={inputClassName}
placeholder={placeholder}
pattern={pattern}
onChange={this.handleChange}
...
/>
);
}
Button.propTypes = {
text: PropTypes.string
}
import additional script prop.types.js
function Button(props) {
return (
<button>{props.text}</button>
);
}
Button.propTypes = {
text: PropTypes.string
}
PropTypes.string
PropTypes.bool
PropTypes.number
PropTypes.array
PropTypes.oneOfType({...})
PropTypes.any
...
import script prop.types.js
function Button(props) {
return (
<button type={props.type}>
{props.text}
</button>
);
}
Button.propTypes = {
text: PropTypes.string.isRequired
}
import script prop.types.js
function Button(props) {
return (
<button type={props.type} />
);
}
Button.defaultProps = {
type: 'submit'
}
PropTypes is a basic type checker which has been patched onto React. It can check only props from Component.
If you want more flexible type checking for your entire project then Flow/TypeScript are appropriate choices.
React diff algorithm is used to compute minimum sets of mutation
The second type of data in React is a state.
The state is private data of the component and can be changed from within the component itself.
So if we want the component to be able to change its own data, then we have to use state instead props!
Props
State
React component — in its simplest form — is a plain-old JS function.
But there is other way to build a component. You can create this component with JS classes syntax.
It’s called Statefull component.
codepen exampleto modify the state, only call this.setState()
constructor(props) {
super(props);
this.state = {
value: this.props.value
};
}
handleChange(event) {
this.setState({
value: event.target.value
});
}
}
state is optional, state increases complexity and reduces predictability.
A Component without state is preferable, avoid having many stateful Components
Component typesTwo options: events listeners and React synthetic events
Add listeners to do something in the dom, which is not under react control:
Synthetic events: event handler in react elements. It works quite close to pure JavaScript, but with JSX.
Each child in an array or iterator should have a unique key prop.
Key is one helper to React to embrace its full potential and improve performance.
Key attribute should be stable identifier.
codepen exampleRender method in a React component needs to be a pure function
Whole bunch of methods:
