React学习,搭建项目,入门
react项目基于node.js、用npm包管理工具;
在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项目搭建,可以开始React项目开发之路啦,之后会陆续更新React相关文章。
React学习,搭建项目,入门的更多相关文章
- React学习笔记---项目构建
简介 ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具. 今天要介绍一款工具,同时包含一个构建项目模板的 ...
- react+webpack搭建项目
一.环境准备 ①node ②npm 二.开始搭建 ①使用npm安装create-react-app工具,在cmd命令行中输入: npm install -g create-react-app ②使用命 ...
- vue零基础学习--搭建项目
一.script引入(联系使用,小型项目) 直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量. <script src="https://cdn.j ...
- 基于 Webpack 4 和 React hooks 搭建项目
面对日新月异的前端,我表示快学不动了
- react 学习资料
react 学习资料 项目 学习资料 react 中文版:https://doc.react-china.org/ react-router https://reacttraining.com/rea ...
- vue-cli脚手架搭建项目简单入门一
搭建系统: Windows系统 简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行, ...
- 一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)
React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 原因:由于我想在一台电脑上同时开发IOS和Android两个 ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- React学习笔记(一)- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- 项目一:项目第二天 Jquery ztree使用展示菜单数据 2、 基础设置需求分析 3、 搭建项目框架环境--ssh(复习) 4、 SpringData-JPA持久层入门案例(重点) 5、 Easyui menubutton菜单按钮使用 6、 Easyui messager消息框使用
1. Jquery ztree使用展示菜单数据 2. 基础设置需求分析 3. 搭建项目框架环境--ssh(复习) 4. SpringData-JPA持久层入门案例(重点) 5. Easyui menu ...
随机推荐
- LibreOJ #6. Guess Number
二次联通门 : LibreOJ #6. Guess Number /* LibreOJ #6. Guess Number 交互题初体验 用了二分判定 感觉不错 */ #include "in ...
- linux系列(十六):which命令
1.命令格式: which 可执行文件名称 2.命令功能: which指令会在PATH变量指定的路径中,搜索某个系统命令的位置,并且返回第一个搜索结果. 3.命令参数: -n 指定文件名长度,指定的长 ...
- Vuex学习心得
最近公司项目中使用Vuex做状态管理,就全面温习了一遍文档,然后在项目使用中遇到一些常见问题就一一总结下. 一.由来 我们知道Vue中数据是自顶向下单向流动的,但是以下两种情况单向数据流实现起来十分繁 ...
- slax自启动程序
Fluxbox 本身提供了自启动程序的功能.~/.fluxbox/startup 文件是一个像启动 Fluxbox 一样自启动应用程序的脚本.# 标记是注释. 一个简单的例子: #!/bin/sh # ...
- Mac之Sublime Text使用Go
安装Golang build 包 点击 Preferences > Package control 菜单(MAC快捷键 shift + command + p) 在弹出的输入框输入 instal ...
- 网络攻击-XSS攻击详解
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- [RK3288] 外接USB设备出现丢数
CPU:RK3288 系统:Android 5.1 主板外接 USB 接口的外设,经常会出现丢数的现象,这种问题在很多 USB 接口的外设上都遇到过,例如:USB读卡器.USB扫描枪等 有一个共同点是 ...
- Java 面向对象(十二)
泛型 什么是泛型 泛型:广泛通用的类型 一开始还不确定是什么类型,在使用的时候,才能确定是什么类型 (1)在开始定义的时候,留一个插口 (2)在创建对象的时候,再去插入对应的类型 泛型也可以理解为&q ...
- django + vue3 解决跨越问题
django跨域 解决: https://yq.aliyun.com/articles/517215 vue3 跨越(此处没必要,django处理即可): https://blog.csdn.net/ ...
- oracle之按表名查询表字段结构
工作中查看oracle表结构, 1,pl/sql或其他开发工具可以输入表名然后ctr+点击表名就可以看见表结构: 2,表字段过多,如果给第三方截图看比较麻烦,得截好几次,容易看眼花,可以查询如下sql ...