Getting started ReactJS

2015/05/23 在元智大學分享的 ReactJS + Parse 入門。

Transcript

1. Getting Started ReactJS
2. 蒼 時 弦 也 WEB DESIGNER & DEVELOPER
3. TOPIC INTRODUCE REACTJS LEARN TO USE COMPONENT INTEGRATE PARSE.COM
4. INTRODUCE REACTJS
6. ReactJS NOT A TEMPLATE ENGINE BASED ON VIRTUAL DOM ONE WAY DATA FLOW
7. var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<HelloMessage name="John" />, mountNode); Example
8. LEARN TO USE COMPONENT
9. <div> Show on Web
10. Render into DOM Show on Web DOM.div
11. Render into DOM Show on Web Create Component A
12. Create Component B Render into DOM Show on Web Create Component C Create Component A
13. Create Component B Render into DOM Show on Web Create Component C Create Component A VDOM
14. Create Component B Render into DOM Show on Web Create Component C Create Component A Compare “Current” and “Future” state. And only replace “Changed” DOM.
15. Create Component B Render into DOM Show on Web Create Component C Create Component A Every component is a state machine.
16. State Machine Inactive State Active State
17. State Machine 5 seconds elapsed
18. var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed: 0}; }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, render: function() { return ( <div>Seconds Elapsed: {this.state.secondsElapsed}</div> ); } }); React.render(<Timer />, mountNode); State Machine
19. var MyComponent = React.createClass({ // Component render: function() { return <div></div> } }); React.render(<MyComponent/>, mountNode); API React.render(ReactElement el, DOMElement container) Render “ReactElement” into DOM. Note. We can use multiple “React.render” if necessary.
20. var MyComponent = React.createClass({ // Component render: function() { return <div></div> } }); API React.createClass(object specification) Create a new react component, should have “render” method.
21. var MyComponent = React.createClass({ // Component render: function() { return <div></div> } }); Component Specifications render() Define the component will be show on web, usually using JSX to build it. Note. When we using <div> in ReactJS, it is not “real” HTML tag, it is a Component.
22. var MyComponent = React.createClass({ getInitialState: function() { return { isActive: false }; } // Skip... }); Component Specifications getInitializeState() Component owns it state, we can use for control what we want to render. Example: We can show image only state is “Active”
23. var MyComponent = React.createClass({ // Skip... componentWillMount: function() { this.setState({ isActive: true}); } // Skip... }); Component Specifications componentWillMount() The “componentWillMount()” means before it “show on DOM”, the component should do something. Note. Also have “componentDidMount()” for do something “after” show on DOM.
24. var MyComponent = React.createClass({ // Skip... componentWillMount: function() { this.setState({ isActive: true}); } // Skip... }); Component API this.setState(object nextState) Update the component’s state, passing a object to override current state. Note. Change state and props will trigger “render()” to render new VDOM.
25. var MyComponent = React.createClass({ // Skip... componentWillMount: function() { this.setProps({ canMove: true}); } // Skip... }); Component API this.setProps(object nextProps) Update the component’s props, passing a object to override current state. Note. Strongly suggest not use this to change property, change it from it’s parent.
26. var MyComponent = React.createClass({ // Skip... render: function() { return <div>Can I move? { this.props.canMove ? "Yes" : "No" }</div>; } }); Component API this.props All component property will store in this object, simple using “this.props.canMove” to get property.
27. var MyComponent = React.createClass({ // Skip... render: function() { return <div>Children: { this.props.children }</div>; } }); React.render(<MyComponent><div>A</div><div>B</div></MyComponent> , mountNode); Component API this.props.children When your component will contains other component, you can access these component via this API.
28. var MyComponent = React.createClass({ // Skip... render: function() { return <div>Current is { this.state.isActive ? "Active" : "Deactive" }</div>; } }); Component API this.state All component state will store in this object, simple using “this.state.isActive” to get state.
29. INTEGRATE PARSE.COM
32. npm install parse-react —save-dev
33. var MyComponent = React.createClass({ mixins: [ParseReact.Mixin], // Skip... render: function() { return <div></div>; } }); Usage ParseReact.Mixin ReactJS provide “mixin” feature like Ruby’s mixin, it can include a pre-defined function / feature.
34. var MyComponent = React.createClass({ // Skip... observe: function() { return { comments: (new Parse.Query('Comment')).ascending('createdAt') }; }, // Skip... }); Usage observe() ParseReact patch the origin Parse API, add “subscribe” feature and we can use “observe()” to listen change. Note. This only working on local, and reduce API request.
35. var MyComponent = React.createClass({ // Skip... render: function() { return (<div>{this.data.comments.map( function(comment) { return comment.content}) }</div>) } }); Usage this.data After we “observe” data changed, we can fetch data via use “this.data” property which mixin defined.
36. // Create a new Comment var creator = ParseReact.Mutation.Create('Comment', { content: "Hello World" }); // Execute it (Submit to Server) creator.dispatch(); Usage: Mutation ParseReact.Mutation.Create(string className, object data) ParseReact Mutation provide CRUD feature helps us interact with Parse API to modify object.
37. // Destroy a Comment var destroyer = ParseReact.Mutation.Destroy(objectToDestroy) // Execute it (Submit to Server) destroyer.dispatch(); Usage: Mutation ParseReact.Mutation.Destroy(ParseObject object) If we pass a “ParseObject”, Mutation can help us destroy it. Note. When we using “observe” we already get “ParseObject” we defined.
38. // Update a Comment var changer = ParseReact.Mutation.Set(objectToChange, { author: 'Aotokitsuruya' }) // Execute it (Submit to Server) changer.dispatch(); Usage: Mutation ParseReact.Mutation.Set(ParseObject object, object changes) We can use “Set” to modify object, and changes object only need pass necessary to change data.
39. // Destroy a Comment var destroyer = ParseReact.Mutation.Destroy(objectToDestroy) // Execute it (Submit to Server) destroyer.dispatch(); Usage: Mutation dispatch([options]) Mutation using “Flux” style to implement, after we finished modify, we need to “dispatch” it. Note. Flux is a idea like MVC, but we have not time to talk about it.
40. Flux Overview
41. NEXT: PRACTICE & DEMO
42. THANKS