什么是React
- React是一个构建用户界面的JavaScript库
- 用户界面：Html界面（前端开发）
- React主要用来编写HTML页面或构建Web应用
- React起源于Facebook内部项目，于13年5月开源，并一直维护至今。
React的特点
- 声明式
以声明式编写UI跟写HTML一样
React负责渲染UI，根据数据更新UI
- 组件化
组件表示页面中的部分内容，就像是一个积木
组合、复用多个组件就可以堆积木式的实现一个完整一个页面
组件是React中最重要的知识
- 一次学习，随处编写
使用React可以编写Web应用
使用React可以编写原生App
......
基本使用
1.React安装
安装命令：npm i react react-dom
react是核心包，提供创建元素和组件能力
react-dom负责将元素和组件渲染到界面
- React使用
- 导入react和react-dom两个js文件
<!-- 提供创建元素和组件能力的核心库 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<!-- 将元素和组件能力渲染界面能力 -->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
- 创建React元素并渲染React元素到页面中
// React.createElement()参数说明-了解就行
// 第一个参数:创建React元素标签
// 第二个参数:该React元素的属性
// 第三个参数:更改元素的子节点
const title = React.createElement('h1',{id:'title'},'hello react')
// ReactDOM.render()参数说明-了解就行
// 第一个参数:需要渲染的React元素
// 第二个参数:挂载点
ReactDOM.render(title,document.getElementById('app'))
React JSX
什么是JSX
- 是一个JavaScript的语法扩展，用来创建一个React元素，建议在React中使用JSX来替代React.createElement()
- JSX让我们更加适应HTML的编写习惯
- JSX可以在开发React应用时显示更多有用的错误提示和警告信息，提高开发体验
JSX基本使用
1. JSX解析器安装
- 安装命令：
npm i babel-standalone -
babel-standalone是JSX语法的解析器，通过它可以将JSX转换成浏览器能够执行的代码
2. JSX创建一个H1元素渲染到页面上
<!-- 导入react、react-dom、babel 三个js文件 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<div id="app"></div>
<script type="text/babel">
// 创建react元素
const H1 = <h1 id='title'>Hello React</h1>
// 渲染React元素到页面中
ReactDOM.render(H1,document.getElementById('app'))
</script>
React脚手架搭建
1. 脚手架的意义
- 脚手架是开发现代Web的必备工具
- 充分利用Webpack、Babel等工具辅助开发
- 关注业务，无需关注繁琐的工具配置
- Vue中的Vue-cli,React中的create-react-app都是脚手架
2. 使用脚手架初始化React项目（create-react-app）
- 初始化项目命令：
npx create-react-app my-app - 启动项目步骤：
1、cd my-app
2、npm run start 或者 yarn start 启动项目
3. npx 命令介绍
- npm v5.2.0 引入的一条命令
- 目的：提升命令行工具的使用体验
- 原来：先安装脚手架全局包，再使用它初始化项目
- 现在：无需安装脚手架全局包，就可以直接使用它初始化项目
4. 组件导出导入并使用
- 创建src/MyFirstReact.js
- 编写组件代码，创建想要的界面元素
- 导出组件（Tips：组件类型必须是class或者function类型，并且首字母必须大写）
function MyFirstReact() {
// 编写组件代码，创建想要的界面
return <div>第一个react组件</div>;
}
// 导出组件
export default MyFirstReact
- 在src/App.js中导入并使用组件
import MyFirstReact from './MyFirstReact'
function App() {
return (
<div>
{/* 使用MyFirstReact组件 */}
<MyFirstReact></MyFirstReact>
</div>
);
}
