【01】React环境搭建以及文件目录介绍
打算学习一下React,记录一下学习遇到的问题。
搭建环境
环境
安装Node
- 到 Node官网下载,下载完直接根据提示完成安装。window电脑打开CMD,Mac
电脑打开终端,输入node -v可以查看版本号,说明安装成功了。
node -v
React脚手架
- 打开终端,输入下面命令就开始安装了。
npm install -g create-react-app
- 如果你是Mac,需要在前面加sudo,然后按提示输入密码进行安装。不然会提示你没有权限。
sudo npm install -g create-react-app
创建我的第一个项目
- 进入到你想创建项目的文件夹
create-react-app demo01 //用脚手架创建React项目,后面是项目名字
cd demo01 //等创建完成后,进入项目目录
npm start //预览项目,如果能正常打开,说明项目创建成功
- 创建成功会自动打开浏览器,能正常显示React图标,就说明创建成功了!
目录讲解
--- README.md (项目说明文件,工作中可以写项目描述,项目说明等)
--- package.json (这个文件是webpack配置和项目包管理文件,项目中依赖的第三方包和一些常用命令配置都在这个里边进行配置目前位置,我们不需要改动。)
--- package-lock.json (锁定安装时的版本号,并且需要上传到git,以保证其他人再npm install 时大家的依赖能保证一致。)
--- gitignore (这个是git的选择性上传的配置文件,比如一会要介绍的node_modules文件夹,就需要配置不上传。)
--- node_modules (这个文件夹就是我们项目的依赖包,到目前位置,脚手架已经都给我们下载好了,你不需要单独安装什么。)
--- public (公共文件)
------- favicon.ico (网站标签小图标)
------- index.html (模版文件,其中<noscript></noscript>标签是容错处理,如果当前JavaScript没有跑通的情况下就会显示里面的内容)
------- manifest.json (移动端配置文件)
--- src (开放的源代码,我们平时操作做最多的目录)
------- index.js (项目入口文件)
------- ndex.css (这个是index.js里的CSS文件。)
------- app.js (这个文件相当于一个方法模块,也是一个简单的模块化编程。)
------- serviceWorker.js (这个是用于写移动端开发的,PWA必须用到这个文件,有了这个文件,就相当于有了离线浏览的功能。)