Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting started ReactJS

Getting started ReactJS

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

蒼時弦や

May 23, 2015
Tweet

More Decks by 蒼時弦や

Other Decks in Programming

Transcript

  1. var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>;

    } }); React.render(<HelloMessage name="John" />, mountNode); Example
  2. Create Component B Render into DOM Show on Web Create

    Component C Create Component A VDOM
  3. 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.
  4. Create Component B Render into DOM Show on Web Create

    Component C Create Component A Every component is a state machine.
  5. 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
  6. 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.
  7. var MyComponent = React.createClass({ // Component render: function() { return

    <div></div> } }); API React.createClass(object specification) Create a new react component, should have “render” method.
  8. 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.
  9. 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”
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. // 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.
  20. // 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.
  21. // 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.
  22. // 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.