初次学习react

最新推荐文章于 2022-03-23 17:59:07 发布

想吃辣椒炒肉呀

最新推荐文章于 2022-03-23 17:59:07 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/mengweizhao/article/details/100765712

版权

初次学习react

我们有两种方法来写一个简单的react代码

我们可以不需要配置任何环境以及安装任何包，我们通过在html代码中添加react包，react-dom以及babel包的网址来实现一个简单的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

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

    </script>

  </body>
</html>

第二种方式我们通过搭建本地开发环境来实现代码的编写(实现一个井字棋的棋盘)

首先我们确定本地以及安装过node.js
然后我们也需要安装create-react-app这个包，然后通过一下教程安装一个新的项目

npx create-react-app my-app创建一个新的项目
进入目录删除掉新项目中的src/文件下的所有文件（不要删除文件夹）

在 src/ 文件夹中创建一个名为 index.css 的文件，并拷贝这些 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;
		  }

在 src/ 文件夹下创建一个名为 index.js 的文件，并拷贝这些 JS 代码。

class Square extends React.Component {
    render() {
      return (
        <button className="square">
          {/* TODO */}
        </button>
      );
    }
  }
  
  class Board extends React.Component {
    renderSquare(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>
      );
    }
  }
  
  // ========================================
  
  ReactDOM.render(
    <Game />,
    document.getElementById('root')
  );

拷贝以下三行代码到 src/ 文件夹下的 index.js 文件的顶部：

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

想吃辣椒炒肉呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初次学习react

初次学习react我们有两种方法来写一个简单的react代码我们可以不需要配置任何环境以及安装任何包，我们通过在html代码中添加react包，react-dom以及babel包的网址来实现一个简单的代码<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <...
复制链接

扫一扫