ReactJS
JavaScript Recap
var foo = {
bar: 123
};
JavaScript Recap
var {bar} = foo;
// Again
var {bar} = {
bar: 123
};
JavaScript Recap
var foo = function () { return 123 };
var foo = () => 123;
Everything is a component
https://upload.wikimedia.org/wikipedia/commons/4/47/River_terrapin.jpg
What is a component?
Props
=>
Component Instances
Simples
const Body = ({body})=> <div>{body}</div>
Composition
const Headline = ({title}) =>
<div style={{fontSize:"24px"}}>{title}</div>;
const News = ({title,body}) =>
<div>
<Headline title={title}/>
<Body body={body}/>
</div>;
Types!
const Headline = (props:{title:string}) =>
<div style={{fontSize:"24px"}}>{props.title}</div>;
Display!
const Headline = (props:{title:string}) =>
<div style={{fontSize:"24px"}}>{props.title}</div>;
// Render to DOM
ReactDOM.renderComponent(
<Headline title="Hello World")/>,
document.getElementById("app")
);
// Render on server
const str = ReactDOMServer.renderToString(
<Headline title="Hello World")/>
);
Stateful components
Props =>
(state) =>
Component Instances
interface Props {
text: string;
}
interface State {
}
export class FooFancy extends React.Component<Props, State>{
render() {
return <div>{this.props.text}</div>;
}
}
interface Props {
text: string;
}
interface State {
count: number;
}
export class FooFancy extends React.Component<Props, State>{
constructor(props:Props){
super(props);
this.state = {
count: 0
}
setInterval(()=>{ this.setState({count: this.state.count + 1}) }, 1);
}
render() {
return <div>{this.props.text} - {this.state.count}</div>;
}
}
interface Props {
text: string;
}
interface State {
count: number;
}
export class FooFancy extends React.Component<Props, State>{
constructor(props:Props){
super(props);
this.state = {
count: 0
}
}
interval:number;
componentDidMount(){
this.interval =
setInterval(() => this.setState({ count: this.state.count + 1 }));
}
componentWillUnmount(){
clearInterval(this.interval);
}
render() {
return <div>{this.props.text} - {this.state.count}</div>;
}
}
Life Cycle
componentDidMount #
componentWillReceiveProps #
shouldComponentUpdate #
componentWillUpdate #
componentDidUpdate #
componentWillMount #
constructor
XHRs
propsToState
this. state == state
componentWillUnmount #
dispose()
JSX premier
TypeScript TSX
JavaScript Recap
// whole line == "Statement"
var foo = 123;
// A sourcefile is just
// a bunch of *statements* ;)
var foo =
/*this is an expression */ 123;
JavaScript Recap
// Warning: Invalid JavaScript!
var foo = {
bar : if (true) { 123 }
}
JavaScript Recap
// \o/
var foo = {
bar : true && 123
}
Escaping
render() {
return <div>
{true?"Asdf":undefined}
{
<div>asdf</div>
}
</div>;
}
JS Keywords
<div className="foo"/>
<label htmlFor="foo"/>
These match the JavaScript access for these in browser DOM e.g.`node.className`
var foo = document.createElement('div');
foo.
Comments
var content = (
<Nav>
{/* We need more Person */}
<Person
// Name only set if logged in
name={window.isLoggedIn ? window.name : ''}
/>
</Nav>
);
Render convention: ();
return (
<Nav>
{/* We need more Person */}
<Person
// Name only set if logged in
name={window.isLoggedIn ? window.name : ''}
/>
</Nav>
);
Angular Concepts in React
Just JavaScript
ng ifng-repeatng-switchng-click (angular 2)HTML reusePipesTransclusionMultiSlot transclusion
JavaScript Emit
You don't call ... we call ... and reuse ... and optimize
Constructor Functions
return <Fancy ref="root"/>;
return React.createElement(Fancy,
{"ref": "root"}
);
Constructor Functions
return <div ref="root"/>;
return React.createElement("div",
{"ref": "root"}
);
Dom
div
Component
Div
TIPS
Render
<noscript/>
Two Way DataBinding
Two Way DataBinding
Say no to cycles
Input
render() {
return <input
type="text"
value={this.state.message}
onChange={(event)=>this.setState({message:event.target.value})} />;
}
Life
Code
ref
For when you need DOM
Dom Node
class FooFancy extends React.Component{
componentDidMount() {
this.refs["root"].style.color = 'red';
}
render() {
return <div ref="root">Hello World</div>;
}
}
Custom Components
class BarFancy extends React.Component{
sayYouLoveMe(){
alert('I love you!');
}
render(){
return <div>I can say I love you</div>;
}
}
class FooFancy extends React.Component{
refs: {
[key:string]:any;
root: BarFancy;
}
componentDidMount() {
this.refs.root.sayYouLoveMe();
}
render() {
return <BarFancy ref="root"/>;
}
}
Key
Loopiness
class BarFancy extends React.Component {
render() {
return <div> Raise the bar! </div>;
}
}
class FooFancy extends React.Component {
render() {
return <div>
{ [1, 2, 3].map((i)=> <BarFancy key={i}/>) }
</div>;
}
}
Styleguide
Thank you
ReactJS
By basarat
ReactJS
- 4,837