使用React

初学者模板

使用React进行网页开发时，我们需要使用到React提供的两个JavaScript包。分别是react.js和react-dom.js

• react.js:提供React的API，是React的核心库，其核心思想是虚拟DOM
• react-dom.js:提供针对DOM操作的相关API
• 另外可以尝试引入babel-standalone.js包来编写JSX。

<script src="https://cdn.staticfile.org/react/16.8.6/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.8.6/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/7.0.0-beta.3/babel.js"></script> 
<script type="text/babel"> // 可以在这个 script 标签里使用 JSX 语法
</script>

注意：<script>标签属性被指定为了text/babel，这是因为React推荐使用的JSX语法无法被浏览器内置的JavaScript引擎解析，需要使用Babel对齐进行预编译，所以但凡使用了JSX语法的script标签都要使用<script type="text/babel">

官方脚手架creat-react-app

React提供了官方的命令行工具——creat-react-app，是专门用于快速搭建单页面应用(SPA)的脚手架，它基于Webpack+ES6。

安装命令

npm i creat-react-app -g//全局安装脚手架
creat-react-app project-name 、、通过脚手架安装名为project-name的项目

目录结构

my-app
├── README.md
├── node_modules//项目依赖
├── package.json//项目的描述文件，记录项目依赖的版本信息等
├── .gitignore//记录git忽略的文件
├── public
│   ├── favicon.ico
│   ├── index.html 
│   └── manifest.json
└── src //项目的源文件
    ├── App.css
    ├── App.js 
    ├── App.test.js
    ├── index.css 
    ├── index.js 
    ├── logo.svg 
    └── serviceWorker.js

通过npm start命令即可启动

辅助调试工具

可以在浏览器上安装React Developer Tools，他是基于Chrome、Firefox的独立拓展程序，允许在开发者工具中查看React组件的层次