Introduction to React

1. React.js

2. Что это?
• Это лишь библиотека представления (V из MVC)

3. Virtual DOM
• Что такое DOM
• Проблема DOM
• Virtual DOM

4. JSX и компоненты

5. import React from "react";
import InitPanel from "../../common/panel/init/InitPanel.jsx";
import Sidebar from "../../sidebar/Sidebar";
import Footer from "../../footer/Footer";
import Alert from "../../common/alert/Alert";
import "./App.scss";
export default class App extends React.Component {
render() {
return (
<div className=“App">
<Sidebar userName=“Вася Пупкин« />
<Main />
<Footer />
</div>
);
}
}

6. import React from "react";
import Nav from "./nav/Nav";
import User from "./user/User";
import Logo from "./logo/Logo";
import "./Sidebar.scss";
export default class Sidebar extends React.Component {
render() {
const {userName} = this.props;
return (
<div className="Sidebar">
<Logo />
Привет {userName}
<Nav />
</div>
);
}
}

8. State и Props

9. State
• Изменяемые данные внутри компонента
• Когда state изменяется, компонент перерисовывается

10. import React from "react";
import "./Counter.scss";
export default class Counter extends React.Component {
constructor() {
syper();
this.state = {
count: 0,
}
}
incCount(){
this.setState({count: this.state + 1})
}
render() {
const {count} = this.state;
return (
<div className="Counter">
<div className="Counter--data">{count}</div>
<a onClick={this.incCount}>+1</a>
</div>
);
}
}

11. Props
• Передаются от родительского к дочернему компоненту
• Могут быть любым типо данных
• Иммутабельны

12. import React from 'react';
export default class Name extends React.Component {
static propsTypes: {
name: React.PropTypes.string.isRequired,
}
render() {
const {name} = this.props;
return (
<span>{name}</span>
);
}
}

13. Жизненный цикл React компонента
• componentWillMount
• componentDidMount
• componentWillReceiveProps
• componentWillUpdate
• componentDidUpdate
• componentWillUnmount

14. import React from "react";
export default class Line extends React.Component {
componentWillMount(){
//
}
componentDidMount(){
//
}
componentWillReceiveProps(){
//
}
componentWillUpdate(){
//
}
componentDidUpdate(){
//
}
componentWillUnmount(){
//
}
render() {
//
}
}

15. ReactRouter

16. import React from "react";
import {Router, Route, IndexRoute, browserHistory} from "react-router";
import App from "./content/main/App";
import Bloggers from "./content/main/bloggers/Bloggers";
import Blogger from "./content/main/blogger/Blogger";
const routes = (
<Route>
<Route path='/' component={App}>
<IndexRoute component={Bloggers}/>
<Route path='blogger/:id' component={Blogger}/>
</Route>
</Route>
);
export default class Root extends React.Component {
render() {
return <Router history={browserHistory} routes={routes}/>;
}
}