您的位置: 首页  >  文章  >  win10环境下使用npm安装react步骤总结：

win10环境下使用npm安装react步骤总结：

分类: 文章 • 2024-06-11 13:30:04

1、检查环境：

首先，确保node.js和npm已经安装在你的电脑上，并确保node版本>=6，npm版本>=5.2。

查看方式，打开命令行工具，执行如下命令，可以查询出node和npm是否已安装，版本是多少：

      win10环境下使用npm安装react步骤总结：

2、create-react-app：

管理员身份运行命令行工具（右键选择run as administrator），如果有代理，请设置一下，这里不做详述。

执行npm install -g create-react-app或者npx install -g create-react-app。那么，npm和npx是什么关系？简述一下：

npx是一个工具，是npm v5.2.0引入的一条命令（npx），一个npm包执行器，旨在提高从npm注册表使用软件包的体验 ，就像npm极大地提升了我们安装和管理包依赖的体验，在npm的基础之上，npx让npm包中的命令行工具和其他可执行文件在使用上变得更加简单。它极大地简化了我们之前使用纯粹的npm时所需要的大量步骤。

执行结果如下：

+create-react-app @2.1.8

updated 1 package in 71.635s

3、新建app:

执行npx create-react-app my-app或者npm init react-app my-app，此步骤很慢很慢，需要耐心地等一下，我自己装了将近20分钟吧，供参考。

win10环境下使用npm安装react步骤总结：

4、删除掉新项目中 src/ 文件夹下的所有文件（切记：不要删除整个 src 文件夹，删除里面的所有源文件即可。）

win10环境下使用npm安装react步骤总结：

删除方式：

（1）手动删除

（2）使用命令删除：

打开命令行工具：

cd src   #进入到src文件夹

del *     #删除文件夹内所有文件

cd..      #返回到项目文件夹（即从src文件夹返回到my-app文件夹）

5、使用IDE打开src文件夹，这里用visual studio code为例。创建两个文件，文件名分别为index.css和index.js。

win10环境下使用npm安装react步骤总结：

拷贝如下代码到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 './index.css';

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')
);
6、在项目文件夹（my-app）下执行npm start，然后在浏览器访问 http://localhost:3000。这样你就可以在浏览器中看见一个空的井字棋的棋盘了，到此，安装结束。

win10环境下使用npm安装react步骤总结：

相关推荐