首先,我们需要安装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. 使用weinre调试Web应用及PhoneGap应用

    Web开发者经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试,包括针对JavaScript,DOM元素和CSS样式的调试.但是,当我们期望为移动Web站点或应用进行调 ...

  2. 浅谈SQL Server中的事务日志(三)----在简单恢复模式下日志的角色

    简介 在简单恢复模式下,日志文件的作用仅仅是保证了SQL Server事务的ACID属性.并不承担具体的恢复数据的角色.正如”简单”这个词的字面意思一样,数据的备份和恢复仅仅是依赖于手动备份和恢复.在 ...

  3. 服务器bios&raid管理

    新服务器配置流程 https://github.com/alces-software/knowledgebase/wiki/server-dell-rseries-r630 dell DTK(sysc ...

  4. 安全隐患,你对X-XSS-Protection头部字段理解可能有误

    0×00. 引言 我曾做过一个调查,看看网友们对关于X-XSS-Protection 字段的设置中,哪一个设置是最差的,调查结果令我非常吃惊,故有此文. 网友们认为 最差的配置是X-XSS-Prote ...

  5. React学习笔记 - Hello World

    React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...

  6. oracle_great_integration_译文

    website:https://www.oracle.com/corporate/features/great-integrations.html Great Integrations(伟大的整合) ...

  7. 关于c++对文件读写的封装

    namespace { UINT_T GetWriteSizeForNoBuf(UINT_T fsize) { UINT_T write_buf_size = ; == ) { write_buf_s ...

  8. C++中的RAII(转)

    转自https://blog.csdn.net/wangshubo1989/article/details/52133213 有很多东西我们一直在用,但是不知道他的名字. 什么是RAII? RAII是 ...

  9. hiho 第155周 任务分配

    最小路径覆盖会超时: 贪心思路: 按照开始时间排序,然后根据结束时间,维护一个以结束时间的单调递增的队列,每次与最快结束的任务进行比较即可: /* #include <cstdio> #i ...

  10. 2018.12.2 Mac环境下mysql图形化界面的Navicat premium 12 中文版安装与激活

    软件链接: https://pan.baidu.com/s/1ZUNLQ1DW9rQZUzDXQn2rWQ 提取码: 8i78 复制这段内容后打开百度网盘手机App,操作更方便哦 注意最新版 12.0 ...