巩固——React的详细安装教程
react中文官网如图所示。在中文官网 https://reactjs.bootcss.com/ 中也有入门教程。
1.首先,要安装 Node.js 及 NPM 。
具体参考之前的文章:Nodejs安装和环境配置
2. 安装react的脚手架。
npm install -g create-react-app
3. 安装好之后,输入create-react-app,可以看到已经安装成功:
4.创建React项目
切换到需要存放项目文件的路径,然后键入命令:
create-react-app demo
这里的create-react-app是创建命令,demo是你要创建的项目的名称,项目名称是自定义的。
到这里已经算是创建成功了
5. 运行项目
切换到项目根目录,运行命令:
npm start或者npm run start
运行后可以在浏览器直接看到效果:
拓展:
初次创建React项目,一般选择使用脚手架工具cerate-react-app完成,使用该脚手架工具生成React项目一般存在以下问题:
- 生成项目后,脚手架为了“优雅”,隐藏了所有的webpack相关的配置文件,此时查看生成的文件夹目录,会发现找不到任何webpack配置文件;如果我们需要在webpack中安装一些自己的loder或者plugin变的很困难;
- create-react-app自动生成的webpack中集成了:eslint(代码检测)、url-loader(图片BASE64 [小于10000kb的图片])、babel-loader(ES6和JSX语法解析)、style-loader、css-loader(CSS代码解析)、HtmlWebpackPlugin(产出HTML插件)等内容;
- 仅仅是安装了react中最常用的 react / react-dom 组件,其余的并没有安装,所以在项目开发中,我们根据需要,可能还会安装:redux react-redux react-router-dom prop-types 等等。
应用脚手架工具生成的项目文件结构如下图所示:
├── README.md 项目介绍
├── package.json npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
├── package-lock 上线锁定版本信息
├── gitignore 这个是git的选择性上传的配置文件
├── src 源码目录 这个目录里边放的是我们开放的源代码
│ ├── App.css
│ ├── App.js 这个文件相当于一个方法模块,也是一个简单的模块化编程
│ ├── App.test.js
│ ├── index.css
│ ├── index.js 这个就是项目的入口文件
│ ├── serviceWorker.js 这个是用于写移动端开发的,PWA必须用到这个文件,有了这个文件,就相当于有了离线浏览的功能。
├── public 公共文件,里边有公用模板和图标等一些东西
├── favicon.ico : 这个是网站或者项目的图标,一般在浏览器标签页的左上角显示
├── index.html : 首页的模板文件,我们可以试着改动一下,就能看到结果。
├── mainifest.json:移动端配置文件。
巩固——React的详细安装教程相关推荐
- mysql为什么每天0点就装东西_MySQL的详细安装教程
1.安装之前需要注意的几点 建议不要安装最新版本,一般找mysql5.0系列版本即可: mysq1官网有.zip和.msi两种安装形式: zip是压缩包,直接解压缩以后使用的,需要自己配置各种东西:m ...
- mysql windows 管道连接,科技常识:Windows Server 2016 MySQL数据库安装配置详细安装教程...
今天小编跟大家讲解下有关Windows Server 2016 MySQL数据库安装配置详细安装教程 ,相信小伙伴们对这个话题应该也很关注吧,小编也收集到了有关Windows Server 2016 ...
- python安装了运行不了_python详细安装教程
本章开始,我们将详细介绍Python编程环境的搭建,工欲善其事必先利其器,所以我们这里先介绍python详细安装教程.由于Python是跨平台的,他可以运行在Windows.Linux.Mac等系统上 ...
- Apache的详细安装教程和遇到的问题解决方案
Apache的详细安装教程和遇到的问题解决方案 参考文章: (1)Apache的详细安装教程和遇到的问题解决方案 (2)https://www.cnblogs.com/jave1ove/p/54864 ...
- Pycharm详细安装教程
Pycharm详细安装教程 此电脑现已安装Anaconda,准备安装Pycharm 2020.3.3专业版.参考博客:Anaconda与PyCharm安装与配置 1.由于下载版本为旧版本,所以在Oth ...
- wordpress程序安装php多少,2020最新WordPress网站程序详细安装教程
2020最新WordPress网站程序详细安装教程 2020-06-17 17:08:42 7点赞 53收藏 7评论 小编注:此篇文章来自即可瓜分10万金币,周边好礼达标就有,邀新任务奖励无上限,点击 ...
- 我的Go+语言初体验——(2)IDE 详细安装教程
我的Go+语言初体验--(2)IDE 详细安装教程 "我的Go+语言初体验" | 征文活动进行中- Go+ 语言的安装和环境配置有些复杂,官方教程也没有写的很详细. 通过控制台编写 ...
- 我的Go+语言初体验——(1)超详细安装教程
我的Go+语言初体验--(1)超详细安装教程 "我的Go+语言初体验" | 征文活动进行中- Go+ 是什么?为数据而生,实现教学.工程与数据的 "三位一体". ...
- Git详细安装教程,翻译
Git详细安装教程,翻译 Git 2.21.0 Setup 1. 解释: Additional icons 附加图标 On the Desktop 在桌面上 Windows Explorer in ...
最新文章
- pyspark reduce代码示例
- 老板也是人:孤独的企业家
- matlab矩阵的低秩分解,低秩分解的matlab代码看不懂,分解的两个矩阵在哪呀??...
- 化妆品包装新趋势|视觉模型样机包装模板,让你茅塞顿开
- java 线程 john_教你Java开发中多线程同步技巧
- 使用jmeter做接口测试----柠檬不萌!
- 20145231熊梓宏 《网络对抗》 实验6 信息搜集与漏洞扫描
- linux 下的 C语言编程学习(1)
- 职场 | 如何说服上级?这里有三个故事
- img文件制作linux启动u盘,制作Linux的U盘启动盘
- 北京强化养老行业诚信自律 从业者禁止侮辱、虐待老人
- android 模拟xp,使用Bochs模拟器瞬间安卓变XP教程
- 在没有搜索功能的网站中寻找指定内容
- 判断素数的方法(孪生素数)
- 中小企业建立中台的条件
- 也许孤独是冥冥中的命中注定
- 厦门感芯科技MC3172(1):介绍和环境搭建
- 曙光W580-G20来电自启
- 网络串口调试助手大全
- TD-SCDMA理论试题
热门文章
- 我的Oracle 9i学习日志(11)--重做日志文件及练习
- CKEditor 富文本编辑器转PDF
- 开源公司黄页之Facebook开源软件推荐(一)
- office文档 在线预览 (doc、ppt、xls)
- Tomas Mikolov's Recurrent Neural Networks Language Modeling Toolkit
- 执行conda install tensorflow solving environment一直转圈圈,Anaconda无法打开的问题
- Mybatis常见面试题总结和基本概念
- jquery的ajax异步请求接收返回json数据
- php foreach创建文件,php – mkdir()在foreach函数中跳过第一个文件
- java collections_[20]-Collections工具类