文章目录
- 一、安装node
- 二、配置淘宝镜像
- 三、配置 vscode（win10）
- 四、全局安装脚手架
- 五、创建项目
- 编写第一个 react 程序教程
一、安装node
- 请在官网下载安装：https://nodejs.org/zh-cn/
- vscode 中 点击 ( ctrl + `) 调出终端
- 输入指令
node -v，能显示版本号，说明 node 已经装好了 - 输入指令
npm -v，能显示版本号，说明 npm 可以使用了
点击链接查看图文教程
https://blog.csdn.net/qq_45677671/article/details/114535955
二、配置淘宝镜像
- 输入指令：
npm install -g cnpm --registry=https://registry.npm.taobao.org- 输入指令
cnpm -v，能显示版本号，说明 cnpm 已经装好了
三、配置 vscode（win10）
win7 无需配置
- 右击VSCode图标，选择
属性，选择兼容性，勾选以管理员身份运行此程序，最后点击确定
- vscode 中 点击 ctrl + ` 调出终端
- 输入命令：
get-ExecutionPolicy - 输入命令：
set-ExecutionPolicy RemoteSigned - 输入命令：
get-ExecutionPolicy
Restricted：表示禁止终端使用命令的RemoteSigned：表示可以使用终端命令了
四、全局安装脚手架
React团队推荐使用create-react-app（相当于vue的
vue-cli）来创建React新的单页应用项目，它提供了一个零配置的现代构建设置。
React脚手架（create-react-app）意义：
- 脚手架是官方提供，零配置，无需手动配置繁琐的工具即可使用
- 充分利用Webpack，Babel，ESLint等工具辅助项目开发
- 关注业务，而不是工具配置
1. create-react-app会配置我们的开发环境，以便使我们能够使用最新的 JavaScript特性，
2. 提供良好的开发体验，并为生产环境优化你的应用程序。
3. 为了能够顺利的使用create-react-app脚手架，
我们需要在我们的机器上安装：
4. Node >= 8.10 和 npm >= 5.6。
- 在终端输入命令：
npm install -g create-react-app
- 这需要等待一段时间，这个过程在安装三个东西
react: react的顶级库react-dom: react在web段的运行环境react-scripts: 包含运行和打包react应用程序的所有脚本及配置
五、创建项目
- 先创建一个放置项目的文件夹
www - 在终端中使用
cd指令跳转到这个文件夹 - 创建项目指令：
create-react-app your-app（your-app是项目名，可以自己取）
- 出现下面的界面，表示创建项目成功：
Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:npm startStarts the development server.npm run buildBundles the app into static files for production.npm testStarts the test runner.npm run ejectRemoves this tool and copies build dependencies, configuration filesand scripts into the app directory. If you do this, you can’t go back!We suggest that you begin by typing:cd your-appnpm startHappy hacking!
- 通过
cd your-app命令进入目录 - 运行
npm start即可运行项目
- 生成项目的目录结构如下：
├── README.md 使用方法的文档
├── node_modules 所有的依赖安装的目录
├── package-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json
├── public 静态公共目录
└── src 开发用的源代码目录
编写第一个 react 程序教程
点击跳转：https://blog.csdn.net/qq_45677671/article/details/115874685
