步入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中转义，了解解析过后的代码。