在项目中使用React

1. 使用script标签添加：

<!-- 加载 React。-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<!-- 加载自己的Reactjs文件。-->
<script src="MyReact.js"></script>

2. 使用JSX

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 在html内部使用JSX，需要添加 type="text/babel" 属性 -->
<script type="text/babel">
	.....
</script>

注意: 在浏览器中使用 Babel 来编译 JSX 效率是非常低的。

这种方式适合于学习和创建简单的示例。然而，它会使你的网站变慢，并且不适用于生产环境。当你准备好更进一步时，删除你添加的这个新的

3. JSX预处理器

添加JSX预处理器
在终端上跳转到你的项目文件夹，然后粘贴这两个命令：

步骤 1： 执行 npm init -y  
步骤 2： 执行 npm install babel-cli@6 babel-preset-react-app@3

提示
我们在这里使用 npm 只是用来安装 JSX 预处理器，之后你不再需要它。React 和应用程序代码都可以继续使用

运行JSX预处理器
创建一个名为 src 的文件夹并执行这个终端命令：

npx babel --watch src --out-dir . --presets react-app/prod 

4. React组件的分类

• function组件 和class组件
• 有状态组件 和无状态组件

根据有无state区分

• 受控组件 、半受控组件、 非受控组件
• 组件没有state，组件的可变变量都来自外部，叫做（完全）受控组件
• 组件有自己的state，并接受外部参数prop，叫做半受控组件
• 组件没有外部prop传入，只有自己的state，叫做非受控组件

React props的传递

需求： 现在有3个组件，组件A -> B-> C，有个对象obj要从A传递到C渲染，A传递给B，需要B将整个obj合并传递给C
解决方案： 在B中传递时，使用…obj