目录
扩展学习资料
预习资料名称 | 链接 |
MVN Node版本管理 | |
Create React App | Create React App |
Bootstrap |
购物车应用
编写React元素
@/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import 'bootstrap/dist/css/bootstrap.css'
// react元素 == javascript object
const element = <h1>hello react!!!</h1>
console.log(element)
// 将react虚拟dom加载到实际的浏览器页面上
ReactDOM.render(
// 严格模式
// 使用StrictMode的优点:
// 识别不安全的生命周期组件
// 有关旧式字符串ref用法的警告
// 关于使用废弃的 findDOMNode 方法的警告
// 检测意外的副作用
// 检测过时的 context API
<React.StrictMode>
{/* <App /> */element}
</React.StrictMode>,
document.getElementById('root')
);
创建组件
- 应用位置:树状结构图里面位置是什么【子组件,父组件,兄弟组件】
- 确定参数:输入的参数和哪些初始参数复用的场景【输入参数,初始参数,复用场景】
- 确定类型:函数组件? Class组件【函数组件、类组件】
- 组件内容:组件返回哪些内容
@/src/components/listItem.jsx
import React, { Component } from 'react';
class ListItem extends Component {
render() {
return (<h1>我是组件Hello React !!!</h1>);
}
}
export default ListItem;
@/src/App.js
import React from 'react';
import './App.css';
import ListItem from "./components/listItem";
function App() {
return (
<div className="container">
<ListItem />
</div>
);
}
export default App;
理解JSX【JavaScriptXML】
JSX是什么
JSX是Javascript的语法扩展,使用XML标记的方式直接声明界面
模板引擎语言:Angular、Vue里的语法template语法、NodeJS
- 不是模板引擎语言【带语法糖的ATX抽象语法树,语法糖的处理放在了构建阶段,运行时不需要解析】
- 声明式方式创建UI,处理UI逻辑【这样可以很好的描述UI,呈现出它应有的交互的本质的形式】
- 遵循JavaScript语法,无学习门槛
react关注点分离
JSX背后的原理
JSX规则
- 在JSX中嵌入表达式,用{}包裹
- 大写开头作为定义组件,小写tag为原生dom节点
- JSX标签可以由特定属性和子元素
- JSX只能有一个根元素
@/src/components/listItem.jsx
import React, { Component } from 'react';
const product = {
id:1,
name:"Sony 65寸高清液晶大电视",
price: 3999,
stock: 20 // 库存
}
let count = 0
class ListItem extends Component {
manageCount() {
return count + "个";
}
render() {
return (
<div className="row mb-3">
<div className="col-6 themed-grid-col">{product.name}</div>
<div className="col-1 themed-grid-col">¥{product.price}</div>
<div className="col-2 themed-grid-col">{this.manageCount()}</div>
</div>
)
}
}
export default ListItem;
使用Fragments
@/src/App.js
import React from 'react';
import './App.css';
import ListItem from "./components/listItem";
function App() {
// React.createElement()
return (
<>
<div className="container">
<ListItem />
<ListItem />
<ListItem />
<ListItem />
</div>
<div className="container">
<ListItem />
<ListItem />
<ListItem />
<ListItem />
</div>
</>
);
}
export default App;
为何要使用Fragments
- 可以包含并列的子元素
- 编写表格组件,包裹子元素html生效
表格中使用Fragment
// 父组件
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
// 子组件
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
渲染结果
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
小结
- React元素
- 创建组件
- JSX语法
- Fragment
温习所学知识
1、将Vue相关JSX练习中的棋盘练习在React中练习。
2、将写好的Jsx在Babel中转义,了解解析过后的代码。