React.js 入门 - 《全栈电商系统-V2.0》

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
      //1. JSX 允许将 HTML 标签直接放入 JavaScript 代码中 前提是标注 <script type="text/babel">
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );     
    </script>
  </body>
</html>


    <div id="example"></div>
    <script type="text/babel">
      //2. 您也可以在 JSX 中使用 JavaScript。它以尖括号 (<) 作为 HTML 语法的开头，以大括号 ( {) 作为 JavaScript 语法的开头。
      var names = ['Alice', 'Emily', 'Kate','zqy'];
      ReactDOM.render(
        <div>
        {
          names.map(function (name, index) {
            return <div class={index} key={index}>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
      );
    </script>

      <div id="example"></div>
    <script type="text/babel">
      //3. 如果 JavaScript 变量是数组，则 JSX 将隐式连接数组的所有成员。
      var arr = [
        <h1 key="1">Hello world!</h1>,
        <h2 key="2">React is awesome</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );
    </script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
         //4. class ComponentName extends React.Component 创建一个组件类，它实现了一个 render 方法来返回该类的一个组件实例。
      //请记住组件名称的第一个字母必须大写，否则 React 会抛出错误。例如，HelloMessage作为组件的名称是可以的，但helloMessage不允许。一个 React 组件应该只有一个顶级子节点。
      class HelloMessage extends React.Component {
        render() {
          return <h1>Hello {this.props.name}</h1>;
        }
      }
      ReactDOM.render(
        <HelloMessage name="John" />,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      //5. React 用于this.props.children访问组件的子节点。      
      //class Note注意， 的值this.props.children具有三种可能性。如果组件没有子节点，则值为undefined; 如果单个子节点，一个对象；如果有多个子节点，则为一个数组。你应该小心处理它。
            //React 为我们提供React.Children了处理this.props.children不透明数据结构的实用程序。您可以使用React.Children.map来进行迭代，this.props.children而不必担心其数据类型是undefined或object。 
      class NotesList extends React.Component {
        render() {
          return (
            <ol>
              {
                React.Children.map(this.props.children, function (child) {
                  return <li>{child}</li>;
                })
              }
            </ol>
          );
        }
      }
      ReactDOM.render(
        <NotesList>
          <span>hello</span>
          <span>world</span>
        </NotesList>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <script src="../build/prop-types.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      //6. PropTypes 组件参数验证
      //更多参数请参考
      //https://reactjs.org/docs/typechecking-with-proptypes.html
      var data = '123';
      class MyTitle extends React.Component {
        static propTypes = {
          title: PropTypes.string.isRequired,
        }
        render() {
          return <h1> {this.props.title} </h1>;
        }
      }
      ReactDOM.render(
        <MyTitle title={data}/>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <!-- https://reactjs.org/docs/refs-and-the-dom.html#callback-refs -->
    <script type="text/babel">
      //7 . React.createRef() ？？
      //有时您需要在组件中引用 DOM 节点。React 为您提供了ref将 DOM 节点附加到由React.createRef().
      class MyComponent extends React.Component {
        constructor(props) {
          super(props);
          this.myTextInput = React.createRef();
          this.handleClick = this.handleClick.bind(this)
        }
        handleClick() {
          console.log(1)
          this.myTextInput.current.focus();
        }
        render() {
          return (
            <div>
              <input type="text" ref={this.myTextInput} />
              <input type="button" value="Focus the text input" onClick={this.handleClick} />
            </div>
          );
        }
      }
      ReactDOM.render(
        <MyComponent />,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      //8. React 将组件视为状态机，并用于this.state保存组件的状态，this.setState()更新this.state和重新渲染组件。
      class LikeButton extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            liked: false
          }
          this.handleClick = this.handleClick.bind(this)
        }
        handleClick(event) {
          this.setState({ liked: !this.state.liked });
        }
        render() {
          var text = this.state.liked ? 'like' : 'haven\'t liked';
          return (
            <p onClick={this.handleClick}>
              You {text} this. Click to toggle.
            </p>
          );
        }
      }
      ReactDOM.render(
        <LikeButton />,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      //9. 双向绑定
      //根据 React 的设计理念，this.state描述组件的状态并通过用户交互进行变异，this.props描述组件的属性并且是稳定不可变的。
因此，valueForm 组件的属性，例如 <input>、<textarea> 和 <option>，不受任何用户输入的影响。如果您想访问或更新值以响应用户输入，您可以使用 onChange 事件。
      class Input extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            value: 'Hello!'
          }
          this.handleChange = this.handleChange.bind(this)
        }
        handleChange(event) {
          this.setState({ value: event.target.value });
        }
        render() {
          var value = this.state.value;
          return (
            <div>
              <input type="text" value={value} onChange={this.handleChange} />
              <p>{value}</p>
            </div>
          );
        }
      }
      ReactDOM.render(<Input/>, document.getElementById('example'));
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      //10. 组件的生命周期分为三个主要部分：Mounting（插入到 DOM 中）、Updating（重新渲染）和 Unmounting（从 DOM 中移除）。React 为这些生命周期部分提供了钩子。will方法在某事发生之前被调用，did方法在某事发生之后被立即调用。
      class Hello extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            opacity: 1.0
          };
        }
        //在初始渲染发生后触发一次
        componentDidMount() {
          this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1) {
              opacity = 1.0;
            }
            this.setState({
              opacity: opacity
            });
          }.bind(this), 100);
        }
        render() {
          return (
            <div style={{opacity: this.state.opacity}}>
              Hello {this.props.name}
            </div>
          );
        }
      }
      ReactDOM.render(
        <Hello name="world"/>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
componentWillMount()：在初始渲染发生之前触发一次。连接消息侦听器的好地方。this.setState在这里不起作用。
componentDidMount()：在初始渲染发生后触发一次。可以使用this.getDOMNode()。
componentWillUpdate(object nextProps, object nextState)：在组件对 DOM 进行更新后触发。可this.getDOMNode()用于更新。
componentDidUpdate(object prevProps, object prevState)：在组件的更新刷新到 DOM 后立即调用。初始渲染不会调用此方法。以此为契机，在组件更新后对 DOM 进行操作。
componentWillUnmount()：在从 DOM 卸载组件之前立即触发。删除消息侦听器或一般清理的好地方。
componentWillReceiveProps(object nextProps)：当组件接收新道具时触发。你可能想this.setState根据道具。
shouldComponentUpdate(object nextProps, object nextState)：当接收到新的道具或状态时，在渲染之前触发。return false如果您知道不需要更新。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      //11.如何从服务器或 API 提供者获取组件的数据？答案是使用 Ajax 在componentDidMount. 当服务器响应到达时，存储数据this.setState()以触发 UI 的重新呈现。
      class UserGist extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            username: '',
            lastGistUrl: ''
          }
        }
        componentDidMount() {
          $.get(this.props.source, function(result) {
            console.log(result,"result");
            var lastGist = result[0];
            this.setState({
              username: lastGist.owner.login,
              lastGistUrl: lastGist.html_url
            });
          }.bind(this));
        }
        render() {
          return (
            <div>
              {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.
            </div>
          );
        }
      }
      ReactDOM.render(
        <UserGist source="https://api.github.com/users/octocat/gists" />,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      //12. 异步请求      
      class RepoList extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            loading: true,
            error: null,
            data: null
          };
        }
        componentDidMount() {
          this.props.promise.then(
            value => this.setState({loading: false, data: value}),
            error => this.setState({loading: false, error: error}));
        }
        render() {
          if (this.state.loading) {
            return <span>Loading...</span>;
          }
          else if (this.state.error !== null) {
            return <span>Error: {this.state.error.message}</span>;
          }
          else {
            var repos = this.state.data.items;
            var repoList = repos.map(function (repo, index) {
              return (
                <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
              );
            });
            return (
              <main>
                <h1>Most Popular JavaScript Projects in Github</h1>
                <ol>{repoList}</ol>
              </main>
            );
          }
        }
      }
      ReactDOM.render(
        <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
        document.getElementById('example')
      );
    </script>
  </body>
</html>