React学习记录：入门

时间 2019-11-08

标签 react 学习记录入门栏目 React 繁體版

原文原文链接

先看阮一峰的教程，至关易懂:React 入门实例教程
而后配合官网文档看 React.js 小书html

使用 Facebook 的 create-react-app 快速构建 React 开发环境node

react资源汇总(react-tutorial)react

常见问题

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

如何覆盖 ant-design样式

正常antd是有个className，而后放入global就能够
覆盖ant-design的样式
示例：https://segmentfault.com/a/11...webpack

webpack-dev-server 打不开问题

node_modules/.bin/webpack-dev-server

这样开启是由于webpack-dev-server没有全局安装而是装在了项目下
能够看这里缘由git

Link标签废弃

代码戳这里
github

这是由于我在写的时候 react-router已经更新到了router4 因此要对react-router进行升级web

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>

须要理解的问题

React建立组件的三种方式及其区别segmentfault