React 进阶之路 二 ( 元素渲染 )

# 元素渲染

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 这里就是渲染一个 组件
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

如上：

1. 渲染是调用一个函数：ReactDOM.render。函数接收两个参数：渲染内容 和 根节点
2. 有且只能有一个根本节点
3. JSX 语法，所有内容写在 <React.StrictMode> 标签内，方便知道些的组件内容
4. 再调用组件时如 <App /> 要首字母大写

为了方便理解，看下下面代码：

ReactDOM.render(
  <React.StrictMode>
    <h1> hello word </h1>
    <h2> 我是第二个标签 </h2>
  </React.StrictMode>,
  document.getElementById('root')
);

相比 Vue：<React.StrictMode> 标签，相当于 <template> 标签，在标签内可以写我们想要的内容，且只能有个 <React.StrictMode> 标签 ( Vue 中也只能有一个 <template> 标签 )；
ReactDOM.render 函数 相比 Vue 相当于 new Vue 创建一个实例；

# 定义一个组件

在 React 中定义组件不同于 Vue 的 .vue 文件，React 中都是函数式组件，举个栗子：

// 定义一个组件 props 接收参数
function Demo(props) {
    return <React.StrictMode>
        <h1> Hello world</h1>   
        <h2> {props.data} </h2>
    </React.StrictMode>
}

// 调用组件 并 传参
ReactDOM.render(
  <React.StrictMode>
    <Demo data="你好" />
  </React.StrictMode>,
  document.getElementById('root')
);

如上就完成了 定义组件 并 调用组件 和 传值

# 属性绑定

//假设我们已经定义了 .bgRed 样式类
let bgColor = '.bgRed'; 
let imgUrl= 'http:xxx.xxx.xxx/img/xxx/png';
ReactDOM.render(
   <React.StrictMode>
    <div class={bgColor}>
      <img src={imgUrl} />
    </div>
  <React.StrictMode>,
  document.getElementById('root')
);

# 注释

React 中注释比较特殊，需要放在单花括号 { } 内

// 调用组件 并 传参
ReactDOM.render(
  <React.StrictMode>
    <h1> Hello world</h1>   
    {/* 这里写注释内容 */}
    <h2> {props.data} </h2>
  </React.StrictMode>,
  document.getElementById('root')
);

如上, JSX 语法有以下几个特点：

1. 由 HTML 元素构成
2. 如需插入变量用单花括号 { }
3. 单花括号 { } 可用使用表达式，表达式可以是 JSX 对象
4. 属性 和 HTML内容 一样都是用 单花括号 { } 插入内容