首先,我们需要安装node.js,直接搜索并在官网下载安装包。

node.js官网:https://nodejs.org/en/

现在我们成功安装了node和npm,然后我们来用npm创建新的项目,首先用npm 安装 create-react-app工具,其可以自动地在本地目录中创建react项目。

在cmd命令行中输入:

npm install -g create-react-app

等待其安装,意思是全局安装create-react-app脚手架工具,然后就可以使用命令创建新的react项目。

在cmd中输入:

create-react-app my-new-app

(默认安装在用户目录下,想更换目录可以参照如下命令)

d:     (选择D盘)

cd     '文件夹路径'   (进入D盘中的指定文件夹)

然后再输入   create-react-app my-new-app    则可安装在特定目录下

接下来需要等待较长时间,然后我们就可以在安装路径中看到创建完的文件夹,打开后,内部如下所示:

其中,node_modules用于存放项目的依赖包,也就是构建这个React项目可能会用到的工具,

--public文件夹中是 index.html存放目录,也就是React根页面的所在地

--src中用于存放js文件,也就是项目开发中的主要区域

--package.json用于记录项目信息,以及外部依赖包的导入信息等

--json文件不能直接打开,需要用到文本编辑器,本人用的是VScode

然后,在命令行中“ cd ”该目录,输入如下命令,部署npm,以及导入react-dom依赖包.

cmd中输入:

npm init   (然后一路回车)

npm install --save react react-dom  ( 在该目录下导入react和react-dom)

npm install --save  react-router-dom   (react路由,以后会用到)

npm获取有些耗时间,这里建议大家使用淘宝团队的cnpm,安装方法请另行搜索。以后会用cnpm代替npm,效果一样。

然后就可以通过 npm start 来启动项目,自动弹出localhost:3000的网页窗口。

想关闭项目的话,直接关闭CMD窗口就可以,或者使用 Ctrl+C ,输入Y后退出

React学习(1)—— 基础项目搭建以及环境配置的更多相关文章

  1. Ant学习-001-ant 基础知识及windows环境配置

    一.Ant 概要基础知识 Apache Ant 是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发,用以构建应用,或结合其他开源测试工具例如 git.T ...

  2. vue学习(1) vue-cli 项目搭建

    vue学习(1)  vue-cli 项目搭建 一.windows环境 1. 下载node.js安装包 官网:https://nodejs.org/en/download/ 选择LTS下载 2. 安装 ...

  3. [eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置

    [eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置 https://github.com/dotnet-architecture/eShopOnContain ...

  4. 《Asp.Net Core3 + Vue3入坑教程》-Net Core项目搭建与Swagger配置步骤

    简介 <Asp.Net Core3 + Vue3入坑教程> 此教程仅适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 教程后 ...

  5. mac上搭建mysql环境配置和Navicat连接mysql

    mac上搭建mysql环境配置 1.下载mysql for mac: https://downloads.mysql.com/archives/community/ 注意:mysql版本要和你的MAC ...

  6. 从 Vue 的视角学 React(一)—— 项目搭建

    虽然 Vue 在国内一家独大,但在全球范围内,React 依然是最流行的前端框架 最近和一些朋友聊天,发现很多项目都选择了 React 技术栈,而且公司的新项目也决定使用 React 我一直以来都是走 ...

  7. 烂泥:学习ubuntu之快速搭建LNMP环境

    本文由秀依林枫提供友情赞助,首发于烂泥行天下 现在公司使用的都是ubuntu系统,这几天由于个别项目需要,需要搭建一个LNMP环境.为了快速搭建这个环境,我使用是apt-get方式进行安装.具体的操作 ...

  8. springboot基础项目搭建(十五篇)

    springboot系列一.springboot产生背景及介绍 springboot系列二.springboot项目搭建 springboot系列三.springboot 单元测试.配置访问路径.多个 ...

  9. Linux Ubuntu从零开始部署web环境及项目-----搭建ssh环境(一)

    linux搭建ssh环境 1,用户登录 成功输入用户名和密码后 进入Ubuntu界面  2,配置网络 参考:http://blog.csdn.net/liu782726344/article/deta ...

随机推荐

  1. python进程与线程介绍

    很多同学都听说过,现代操作系统比如Mac OS X,UNIX,Linux,Windows等,都是支持“多任务”的操作系统. 什么叫“多任务”呢?简单地说,就是操作系统可以同时运行多个任务.打个比方,你 ...

  2. blog test

    try my first blog by cnblog. i will record my learn experence in the future.

  3. Django问卷调查项目思路流程

    Django问卷调查项目思路流程: 1 后端思路 : 需求分析 ---- 找出各实体对应关系 ---- 设计model架构 ---- 统一资源封装 --- 提供资源API入口 ---- 设计项目实体功 ...

  4. 实验,暂停oracle后台进程

    有时出于测试需求,需要暂停oracle的某些后台进程,此时以暂停lgwr进程为例 使用sysdba连接到数据库查询到LGWR进程的PID:SQL> select prc.pid from v$b ...

  5. LeetCode Two Sum 解题思路(python)

    问题描述 给定一个整数数组, 返回两个数字的索引, 使两个数字相加为到特定值. 您可以假设每个输入都有一个解决方案, 并且您不能使用相同的元素两次. 方法 1: 蛮力 蛮力方法很简单.循环遍历每个元素 ...

  6. June 07th 2017 Week 23rd Wednesday

    Failure is the condiment that gives success its flavor. 失败是让成功变美味的调味料. There are kinds of flavors in ...

  7. CRM product UI里assignment block的显示隐藏逻辑

    我们在product overview page里能看到很多的assignment block.但是runtime的时候真正显示出来的内容只是configuration里面看到内容的一个子集. Pro ...

  8. 【[TJOI2007]可爱的质数】

    题目 用一道板子题来复习一下\(bsgs\) \(bsgs\)用于求解形如 \[a^x\equiv b(mod\ p)\] 这样的高次不定方程 由于费马小定理的存在,我们可是直接暴力扫一遍\(p\), ...

  9. POJ 2195 Going Home 【二分图最小权值匹配】

    传送门:http://poj.org/problem?id=2195 Going Home Time Limit: 1000MS   Memory Limit: 65536K Total Submis ...

  10. win10的host设置

    路径:C:\Windows\System32\drivers\etc\hosts 例如: 127.0.0.1       localhost 10.201.3.177 apmdbm1