React 0基础入门

官方ORG:

入门教程: 认识 React – React

环境搭建相关

工具下载安装：
node-v16.14.2-x64.msi :

https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi

VSCodeUserSetup-x64-1.66.2.exe : https://vscode.cdn.azure.cn/stable/dfd34e8260c270da74b5c2d86d61aee4b6d56977/VSCodeUserSetup-x64-1.66.2.exe

ChromeStandaloneSetup64+.exe:

http://109.10.1.229:8080/
 

React Developer Tools:

​​​​​​​React Developer Tools 开发工具_4.24.0_chrome扩展插件下载_极简插件

注意以下配置：

浏览器输入 ： chrome://extensions/

1> 打开开关

 2> 点击详情

打开如图开关：

nmp:

win+S -> cmd -> 管理员打开

配代理（可选）：npm config set proxy="http:ip:port"

源：npm config set registry https://registry.npm.taobao.org

关闭npm 严格ssl证书检查(重要): npm config set strict-ssl false

测试程序演练

注意：步骤4和5 官方org没讲具体，初学者容易摸不着怎么玩`````

1> 新建工程目录 

D:/test

2> cmd中到D:/test创建工程

npx create-react-app my-app

3> 删除掉新项目中 src/ 文件夹下的所有文件

在src下创建以下文件并编辑代码

index.css

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

index.js

import React from 'react';
// import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/client';
import './index.css';

// 渲染button
class Square extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      value:props.value,
    };
  }

  render() {
    return (
      // <button className="square" onClick={function(){console.log('click');}} >
      <button className="square" onClick={() => this.setState({value: 'X'})} >
        {this.state.value}
      </button>
    );
  }
}

// 渲染9方格
class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
    // return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

//棋盘默认值
class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }6
}

// ========================================

// ReactDOM.render(
//   <Game />,
//   document.getElementById('root')
// );

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Game />
  </React.StrictMode>
);

// export default Game;

index.html

<div id="errors" style="
  background: #c00;
  color: #fff;
  display: none;
  margin: -20px -20px 20px;
  padding: 20px;
  white-space: pre-wrap;
"></div>
<div id="root"></div>
<script>
window.addEventListener('mousedown', function(e) {
  document.body.classList.add('mouse-navigation');
  document.body.classList.remove('kbd-navigation');
});
window.addEventListener('keydown', function(e) {
  if (e.keyCode === 9) {
    document.body.classList.add('kbd-navigation');
    document.body.classList.remove('mouse-navigation');
  }
});
window.addEventListener('click', function(e) {
  if (e.target.tagName === 'A' && e.target.getAttribute('href') === '#') {
    e.preventDefault();
  }
});
window.onerror = function(message, source, line, col, error) {
  var text = error ? error.stack || error : message + ' (at ' + source + ':' + line + ':' + col + ')';
  errors.textContent += text + '\n';
  errors.style.display = '';
};
console.error = (function(old) {
  return function error() {
    errors.textContent += Array.prototype.slice.call(arguments).join(' ') + '\n';
    errors.style.display = '';
    old.apply(this, arguments);
  }
})(console.error);
</script>

4>  cmd 中启动app 

npm start

5> chrome 打开

http://localhost:3001/

F12  components 可以查看元素属性值