步入React前厅 - 组件和JSX

目录

扩展学习资料

购物车应用

编写React元素

@/src/index.js

创建组件

@/src/components/listItem.jsx

@/src/App.js

理解JSX【JavaScriptXML】

JSX是什么

JSX规则

@/src/components/listItem.jsx

使用Fragments

@/src/App.js

为何要使用Fragments

表格中使用Fragment

渲染结果

小结

温习所学知识

---

扩展学习资料

预习资料名称	链接
MVN Node版本管理	https://github.com/nvm-sh/nvm
Create React App	Create React App
Bootstrap	全局 CSS 样式 · Bootstrap v3 中文文档 | 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')
);

创建组件

1. 应用位置：树状结构图里面位置是什么【子组件，父组件，兄弟组件】
2. 确定参数：输入的参数和哪些初始参数复用的场景【输入参数，初始参数，复用场景】
3. 确定类型：函数组件？ Class组件【函数组件、类组件】
4. 组件内容：组件返回哪些内容

@/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关注点分离

Babel 是一个 JavaScript 编译器

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>  

小结

1. React元素
2. 创建组件
3. JSX语法
4. Fragment

温习所学知识

1、将Vue相关JSX练习中的棋盘练习在React中练习。

2、将写好的Jsx在Babel中转义，了解解析过后的代码。