阮一峰react-demo

1）


 ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
2）

let names = ['Alice', 'Emily', 'Kate'];

      ReactDOM.render(
        <div>
        {
          names.map((name, index)=> {

　　　　　　return <div key={index}>Hello, {name}!</div>

  }) } </div>, document.getElementById('example') );

3)


let arr = [
        <h1 key="1">Hello world!</h1>,
        <h2 key="2">React is awesome</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );

4)


class HelloMessage extends React.Component {
        render() {
          return <h1>Hello {this.props.name}</h1>;
        }
      }
      ReactDOM.render(
        <HelloMessage name="John" />,
        document.getElementById('example')
      );

注：React.Children 是顶层API之一，为处理 this.props.children 这个封闭的数据结构提供了有用的工具。

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。

参考：https://blog.csdn.net/uuihoo/article/details/79710318

5）

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')
      );

 6）//  使用PropTypes进行类型检查，声明props的类型
参考：https://www.jianshu.com/p/2896acb5746b
 <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>
  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')
      );

7)//（Refs）提供了一个获得DOM节点或者创建在render方法中的React元素的方法
<script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>

    <script type="text/babel">
      class MyComponent extends React.Component {
        constructor(props) {
          super(props);
          this.myTextInput = React.createRef();
          console.log(this.myTextInput)
          this.handleClick = this.handleClick.bind(this)
        }
        handleClick() {
          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>

8)state：状态管理，控制组件本身的数据和界面的渲染 修改的话需要调用this.setState()
//setState为异步，不同同步更新this.state的值
//绕过 React 通过 JavaScript 原生 addEventListener 直接添加的事件处理函数，还有使用 setTimeout/setInterval 等 React 无法掌控的 APIs情况下，就会出现同步更新 state 的情况

　　//react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。

props一定来源于默认属性或者通过父组件传递而来

//参考：https://www.jianshu.com/p/2f6d81a15d81

    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
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')
      );

9)


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'));

10） <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
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')
      );

11） <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>
 class UserGist extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            username: '',
            lastGistUrl: ''
          }
        }

        componentDidMount() {
          $.get(this.props.source, function(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')
      );

12）
 <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>
<script type="text/babel">
      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>

posted @ 2020-11-04 21:50 dongxiaolei 阅读(166) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

dongxiaolei

博客内容仅作为个人学习笔记使用！！

阮一峰react-demo

公告