步入React前厅 - 搭建React环境

目录

扩展学习资料

前期准备

脚手架Create React App

/public

/src

工具和插件

开始前的配置

在线创建React环境

---

扩展学习资料

预习资料名称	链接
MVN Node版本管理	https://github.com/nvm-sh/nvm
Create React App	Create React App
Bootstrap	全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网

前期准备

Node JS （可以使用nvm进行不同版本node的切换）+ VSCode

脚手架Create React App

create react app官网：这个脚手架是官方支持的创建单页面React应用的工具【提供开发模式，线上build一系列工具】

// cmd
// 这个脚手架自动为你生成所需要整个一套react环境系统
npx create-react-app react-demo

/public

• /robots.txt: 中定义了一些搜索引擎规则，哪些允许爬虫抓取，哪些不允许
• /manifest.json: 配置了应用所需要的一些meta信息

/src

• index.js: 整个应用react的js入口
• App.js: 整个react应用当中的组件入口
• serviceWorker.js: 运行在浏览器后台进程里的脚本，提供一些不需要页面交互的功能
• setupTests.js: 单元测试相关内容

工具和插件

开始前的配置

• 安装第三方插件：
  • Simple React Snippets【简单命令帮你生成构建好的react模板】
  • Prettier - Code formatter【帮你格式化代码】自动格式化代码【vscode—>设置—>（用户）文本编辑器-格式化->勾选Format On Save】
• 安装Bootstrap
  • npm install [email protected] --save
• 执行eject
  • yarn eject【可以知道大概的react工程是由哪些配置完成的，工程展开】

在线创建React环境

工具：线上的可以为您快速的提供一个React环境的网站应用

可以在线编辑，上传，下载源码