Introduction to React

Transcript

1. React
2. React is not reactive programming!
3. –Official page “A JavaScript library for building user interfaces”
4. History • Developer by Facebook • Public release at March 2013 • Influenced by XHP component framework for PHP • Firstly used on instagram.com in 2012 • React-native at March 2015
5. React features • Declarative • Component-Based • Virtual-DOM • One-way data flow • JSX • Hot reloading • Large user group
6. Pros • Performance • Reusable components • Easy to get started • Easy to test • React is not a framework! • Conventions are still developing • Build tools are necessary • Lots of boilerplate code • Licensing • React is not a framework… Cons
7. React popularity • Most popular framework in 2016 • Used by Facebook, Instagram, Netflix, Airbnb, Walmart, Alibaba, Atlassian, Automattic, Microsoft… • Perfect timing • React grows 300%+ every year • Learn once, write everywhere paradigm
8. React rendering
9. JSX <div>Hello</div> React.createElement("div", null, "Hello");
10. Smallest react code ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );
11. React.createClass vs React.Component const Element = React.createClass({ render() { return ( <div>Hello</div> ); } }); class Element extends React.Component { constructor(props) { super(props); } render() { return ( <div>Hello</div> ); } }
12. Components and Props function Welcome(props) { return <h1>Hello {props.name}</h1>; } ReactDOM.render( <Welcome name="world">, document.getElementById('root') );
13. Component state class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }
14. Component Lifecycle • Mounting • constructor() • componentWillMount() • render() • componentDidMount() • Unmounting • componentWillUnmount() • Updating • componentWillReceiveProps() • shouldComponentUpdate() • componentWillUpdate() • render() • componentDidUpdate()
15. React native • Build native mobile apps using just JavaScript • Styling and positioning is done using Flex boxes • Hot reloading and easier debugging • Use react component lifecycle and methods • Combine your react native app with native components