react 开发入门

最新推荐文章于 2024-08-16 00:42:49 发布

放羊郎

最新推荐文章于 2024-08-16 00:42:49 发布

阅读量342

点赞数

分类专栏： scratch 个人杂谈文章标签： react 入门三子棋 scratch js

本文链接：https://blog.csdn.net/suoxd123/article/details/84977536

版权

本文介绍了React开发的基础环境配置，包括如何安装React、创建本地服务器及启动运行。接着详细讲解了如何从零开始实现一个三子棋游戏，包括初始化设置、增加交互功能，并给出了源码地址，帮助初学者快速入门React开发。

摘要由CSDN通过智能技术生成

文章目录

环境配置

安装react

直接通过命令安装：npm install -g create-react-app

创建本地服务器

直接通过命令安装：create-react-app first-demo(first-demo为app名称)

启动运行

直接通过命令安装：
cd first-demo
npm start

修改测试

按照提示修改程序app.js文件，修改后页面会自动刷新。

三子棋游戏

初始化

删除src目录下所有文件
复制https://github.com/zacSuo/react-demo/archive/1.0.zip中的index.css和index.js文件
启动查看npm start

增加交互

使用数组将历史数据存储在最上层的game中，可以访问历史步骤，代码如下：

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

function Square(props){
   
    return (
      <button className="square" onClick={
   props.onClick}>
        {
   props.value}
      </button>
    );
}

function calculateWinner(squares){
   
    const lines = [    
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
    ];
    for (let i=