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>