首先我们需要安装node环境:download nodejs:https://i.cnblogs.com/EditPosts.aspx?opt=1

找到你需要的版本和系统安装包下载并安装。

这时候你可以确认你的npm是否安装成功:

打开cmd

确认版本 npm version:

然后用npm安装react脚手架

npm install -g create-react-app

安装成功后你就可以用create-react-app命令创建项目了

create-react-app my-first-app

务必记得用cd 命令进入新建好的文件夹

cd my-first-app

再进行以下命令

npm start

可以看到一个非常漂亮的初始页面然后开始慢慢看看项目里有哪些部分都是用来干什么用的吧。

React项目搭建(脚手架)的更多相关文章

  1. React 如何搭建脚手架

    React 如何搭建脚手架   npm install -g create-react-app    //安装 create-react-app react-demo    // react-demo ...

  2. React项目搭建与部署

    React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...

  3. 基于webpack的React项目搭建(一)

    前言 工欲善其事,必先利其器.为了更好的学习React,我们先简要的把开发环境搭建起来.本文主要介绍使用webpack搭建React项目,如果你对React或es6的基础语法还不了解,建议先去学习学习 ...

  4. react项目搭建及webpack配置

    1,配置webpack npm install -g webpack                       webpack的cli环境 npm install -g webpack-dev-se ...

  5. React项目搭建及依赖安装

    一.前提 首先保证node.js已安装完成... 安装完成后,打开cmd命令行,输入 node -v 和 npm -v 来查看版本号,如果显示则安装完成. 二.安装react脚手架 在cmd命令行中输 ...

  6. 基于webpack的React项目搭建(三)

    前言 搭建好前文的开发环境,已经可以进行开发.然而实际的项目中,不同环境有着不同的构建需求.这里就将开发环境和生产环境的配置单独提取出来,并做一些简单的优化. 分离不同环境公有配置 不同环境虽然有不同 ...

  7. 基于webpack的React项目搭建(二)

    前言 前面我们已经搭建了基础环境,现在将开发环境更完善一些. devtool 在开发的过程,我们会经常调试,so,为了方便我们在chrome中调试源代码,需要更改webpack.config.js,然 ...

  8. react 项目搭建

    1.首先运行环境-node是必须的,需要下载安装node的运行环境: 2.安装好了node之后,自然的就有了npm: 3.npm install -g creact-react-app/全局安装cre ...

  9. react项目搭建

    1.下载安装node.js,需要node.js环境. 2.经过挑选,决定选择creat-react-app这个项目脚手架,然后输入指令安装          $ npm install -g crea ...

随机推荐

  1. HihoCoder 1504 : 骑士游历 (矩阵乘法)

    描述 在8x8的国际象棋棋盘上给定一只骑士(俗称“马”)棋子的位置(R, C),小Hi想知道从(R, C)开始移动N步一共有多少种不同的走法. 输入 第一行包含三个整数,N,R和C. 对于40%的数据 ...

  2. CodeForces 1103E. Radix sum

    题目简述:对任意两个(正)十进制数$a = \overline{a_{k-1}\dots a_1a_0}$和$b = \overline{b_{k-1}\dots b_1b_0}$,定义其[十进制按位 ...

  3. POI生成Excel工具类

    import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.ByteArrayInp ...

  4. Asset Catalog Help (三)---Adding Image Sets

    Adding Image Sets Organize versions of your images in image sets, which you can add to an asset cata ...

  5. Flutter实战视频-移动电商-34.列表页_小BUG的修复

    34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的 ...

  6. Visual Studio 2010下WorldWind编译问题集合

    首先:获取WORLDWIND最新代码——建议不要直接下载源代码包进行编译,一是因为它并不是最新版本的代码,WW的代码最近经常更新:二是缺很多依赖的类库.建议用TortoiseSVN客户端从source ...

  7. lightoj1062【几何(二分)】

    其实就应该想到,哪有那么简单让你直接搞出答案的几何题啊:(而且很有可能是二分? 题意: 有两个梯子,一个靠在左边墙上,一个靠在右边墙上,长度分别为 x 和 y,他们的交点距离地面高度是 c,求两个梯子 ...

  8. Scut

    这是一款免费开源的游戏服务器引擎,适用于开发AVG.SLGRPG.MMOG等类型的网络游戏,同时支持Http.WebSocket和Socket协议通讯,支持Window.Mac和Linux多种平台部署 ...

  9. 用C#编写计算器

    零有点问题,而且目前只能做一些简单的运算,+.-.*./.平方.开根号 希望有大佬指正我的错误 感谢 using System;using System.Collections.Generic;usi ...

  10. Execution failed for task ':app:installDebug'.

    解决方案:重新起服务(react-native start),重新起项目(react-native run-android)