React学习记录：入门

发布时间：2020-12-15 07:21:35 所属栏目：百科来源：网络整理

导读：先看阮一峰的教程，相当易懂:React 入门实例教程然后配合官网文档看慕课网视频 React入门使用 Facebook 的 create-react-app 快速构建 React 开发环境实战教程（2）React 基础【React 模仿大众点评 webapp】实战教程 react资源汇总(react-tutorial) 常

先看阮一峰的教程，相当易懂:React 入门实例教程
然后配合官网文档看慕课网视频 React入门

使用 Facebook 的 create-react-app 快速构建 React 开发环境
实战教程（2）React 基础

【React 模仿大众点评 webapp】实战教程
react资源汇总(react-tutorial)

常见问题

React.js 开发常见问题 Q&A

webpack-dev-server 打不开问题

node_modules/.bin/webpack-dev-server

这样开启是因为webpack-dev-server没有全局安装而是装在了项目下
可以看这里原因

Link标签废弃

代码戳这里

这是因为我在写的时候 react-router已经更新到了router4 所以要对react-router进行升级

import {Router,Route,Link,browserHistory} from 'react-router'

ERROR in Entry module not found: Error: Cannot resolve module 'babel-loader' in /home/wuyeyun-18/资料/IMOOC-React-master/13-04

实例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  
</head>
<body>
    <div id="container"></div>
    
    <script type="text/babel">
      var TestClickComponent = React.createClass({
        handleClick: function (event) {
          var tip = this.refs.tip;
          if (tip.style.display === 'none') {
            tip.style.display = 'inline';
          }else {
            tip.style.display = 'none';
          }

          event.stopPropagation();
          event.preventDefault();
        },render: function () {
          return (
            <div>
              <button onClick={this.handleClick}>显示 | 隐藏</button><span ref="tip">测试点击</span>
            </div>
          );
        }
      });

      
      var TestInputComponent = React.createClass({
        
        getInitialState: function () {
          return {
            inputContent: ''
          };
        },changeHandler: function (event) {
         
          this.setState({inputContent: event.target.value});
          
          event.stopPropagation();
          event.preventDefault();
        },render: function () {
          return (
            <div>
              <input type="text" onChange={this.changeHandler}/>
              <span>{this.state.inputContent}</span>
            </div>
          )
        }
      });

      ReactDOM.render(
      <div>
        <TestClickComponent/>
        <TestInputComponent/>
      </div>,document.getElementById('container')
      );
    </script>
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!