React尝鲜

组件

react的组件就是一个js函数，函数内部return一个由jsx语法创建的html代码片段。

//MyComp.js
export default function MyComp(){
    return (
        <h1>我是新组件MyComp</h1>
    )
} 

在需要引入组件的地方import导入组件，并放在相应位置

//App.js
import MyComp from './components/MyComp'
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          编辑 <code>src/App.js</code> 并且重新加载
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        //新组件
        <MyComp></MyComp>
      </header>
    </div>
  );
}

export default App;

需要注意的地方

• 组件名称首字母必须大写
• 如果return的内容太大，不能与return 处于同一行，则需要对return的内容添加小括号（）

JSX规则

1. 要从组件返回多个元素，使用一个父标签封装他们。如果你不想在标记中额外添加div可以使用<></>
2. JSX要求标记被显示闭合：像这样的自闭标签一定要写成，想
3. 这样的环绕标签一定要写成
5. 驼峰式大多数东西。比如class要命名成className

JSX中使用大括号

js中的变量可以通过"{}"的方式传入JSX中，从而使html中渲染的数据可以得到控制。任何 JavaScript 表达式都可以在大括号之间工作，包括像 formatDate() 这样的函数调用：

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}
//函数调用
const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

何处使用{}

• 作为文本 直接在 JSX 标签内<div>{name}'s To Do List\.</div>有效，但<{tag}>Gregorio Y. Zara's To Do List</{tag}>无效。
• 作为属性 紧跟在 = 符号之后： src={avatar} 将读取 avatar 变量，但 src=“{avatar}” 将传递字符串 “{avatar}”。

使用双大括号

除了字符串、数字和其他js表达式外，甚至可以在jsx中插入对象。在jsx中插入对象，必须将对象封装在另一个对大括号中。person={{name:'henry',age:22}}
一般在插入内联样式的时候会用到双大括号

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );