React Study Notes

作者: HongyangWang | 来源:发表于2017-01-15 08:12 被阅读87次

    This is the React study notes I made when I started to learn React.
    In the study process, I've learned from more than 20 tutorials & videos and collected all the demos that helped me to understand React.

    What is React

    React is a JavaScript library for building user interfaces.

    Features & Advantages:

    • Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs.
    • JSX: combination of JS & HTML.
    • ES2015 (ES6) ready: take advantage of many of the newest language features.
    • Virtual DOM: is a "lightweight" DOM, with new data new virtual DOM is created and compared with previous one using Diff algorithm to reduce the cost of manipulating "real" DOM nodes.
    • Server-side rendering
    • Performance: the prior 2 bullet points make performance good.

    Comparison between React & AngularJS:
    Quora question: "Is React killing Angular?", Kate Kolesova's answer](https://www.quora.com/Is-React-killing-Angular)

    Setup

    Use npm to install React and use create-react-app to start a new project

    npm install -g create-react-app
    create-react-app hello-world
    cd hello-world
    npm start
    

    Hello World

    In JS file, use the following lines of codes to import React framework from library (see in index.js & App.js in the "hello-world" folder):

    import React from 'react'; // for build React component
    import ReactDOM from 'react-dom'; // for build DOM
    

    There are 3 ways of writing Hello World:

    1. JSX way of directly return HTML tag in return, note that:
      • only one parent tag can be included, returning several parallel tags causes error;
      • wrap all HTML part with "()" OR put at least one tag on the line of return to avoid error;
    2. Use React.createElement([tagName], [property], [innerText]) to create HTML element and return;
    3. Use ES6 arrow function, note that:
      • React state cannot be used in this method.

    Example:
    http://jsfiddle.net/HubertWang/htk6mmg8

    Property

    Prop can be used for passing data:

    • Use this.props.[propName] to get prop value;
    • Use [ComponentName].propTypes to set prop types & if requried;
    • Use [ComponentName].defaultProps to set prop default values.

    Example:
    http://jsfiddle.net/HubertWang/bchp8wtk

    Sometimes detailed property validation is required, in this case, using function in stead of key-value pair to validate prop:

    Example:
    http://jsfiddle.net/HubertWang/roszmerk

    State

    Unlike prop, which are a collection of values that are meant to be passed to component as static values and not to be changed by component, states represents a collection of values that meant to be managed as well as updated by component.

    In short, using prop to manage data that will not be changed and using state to manage data that will be changed by interaction with users.

    Several steps to use states:

    1. Create constructor in component to create state by assign this.state;
      • Note that super() is needed in constructor to give this the context of component rarther than its parent class React.Component;
      • And in stead of using this.props.[propName], using this.state.[stateName];
    2. Create update custom method for updating state by this.setState({...});
    3. Assign update method to element (eg. callback function of onChange event) and DO NOT forget to bind this to method handler. The reasons of binding this:
      • In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.
      • Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.
      • references: usage of bind(this), React's explanation

    Example:
    http://jsfiddle.net/HubertWang/bmeyokxd

    props.children

    this.props.children can get all the children nodes of component. Use React.Children.map(this.props.children, child=> ... ) to deal with each node.

    Example:
    http://jsfiddle.net/HubertWang/rj65xhon

    ref

    Component is not the "real" DOM tree node. It is a data structure in the memory called Virtual DOM and only after being inserted into the DOM, can you get them by document.getElementById(...). Facebook uses Diff algorithm and virtual DOM to reduce the cost of manipulating DOM nodes.

    But sometimes, we need to get the "real" DOM node from the component. ref is used for this purpose: this.refs.[refName].

    Example:
    http://jsfiddle.net/HubertWang/a63yqvdj

    Lifecycle methods

    React provides 5 methods for component's lifecycle:

    componentWillMount() // before render()
    componentDidMount() // after render()
    componentWillUnmount() // before leave the DOM
    componentWillUpdate(object nextProps, object nextState) // before prop/state update
    componentDidUpdate(object prevProps, object prevState) // after prop/state update
    

    Here is an example that set m=2 before mounting component(componentWillMount) and update component every 500ms(componentDidMount) and interval will be removed before component unmounted(componentWillUnmount). The detailed video for this example is here and here.

    Example:
    http://jsfiddle.net/HubertWang/ejn5y7cv

    map

    Array.prototype.map() method can be used to iterate Array(not only in React, see MDN map() method).

    Example:
    http://jsfiddle.net/HubertWang/oLz660bk

    Array.prototype.map() can also be used in React.Children to iterate each child in React component, as shown before in the props.children.

    More cool things!

    1. Inbrowser JSX transpiler to understand JSX at a deeper level

    2. Write more reusable React components with composable APIs

    3. Debug React component with developer tools in Chrome

    4. React tutorial in Chinese by Yifeng Ruan

    5. Kamil Przeorski's Quora answer to "What's the best place to learn React.js?"

    6. Getting Started with Redux and then Building React Applications with Idiomatic Redux

    7. Using Webpack and ES6 in React

    References

    Thanks to all the people above who have made these tutorials & videos!

    相关文章

      网友评论

        本文标题:React Study Notes

        本文链接:https://www.haomeiwen.com/subject/emeybttx.html