初识react|青训营笔记

JSX 是 React 中使用的一种 JavaScript 扩展语法，可以轻松地将 HTML 和 JavaScript 编写在一起。

create-react-app内部使用 Babel 进行 JSX 到 JavaScript 的转换

React 需要将相邻元素包装在父标记中。这意味着要运行此代码，它必须包装在父标记中，例如 div、section、article 等。

const App = () => {
  return (
    <div>
      <h1>JSX Title</h1>
      <p>This is first JSX Element!</p>
      <p>This is another JSX Element</p>
    </div>
  );
};

创建和嵌套组件

React 应用程序由组件组成。组件是 UI（用户界面）的一部分，具有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。

React 组件是返回标记的 JavaScript 函数：

function MyButton() {  
    return (  
        <button>I'm a button</button>  
    );  
}

大多数 React 项目为了方便起见都使用 JSX。

JSX 比 HTML 更严格。使用JSX必须关闭像<br />. 组件也不能返回多个 JSX 标签。必须将它们包装到一个共享的父级中，例如一个<div>...</div>或一个空<>...</>包装器：

function AboutPage() {  
    return (  
        <>  
        <h1>About</h1>  
        <p>Hello there.<br />How do you do?</p>  
        </>  
    );  
}

也可以从 JSX 属性转义到 JavaScript”，但你必须使用花括号而不是引号。例如，将字符串作为 CSS 类className="avatar"传递，但读取 JavaScript变量值，然后将该值作为属性传递："avatar"``src={user.imageUrl}``user.imageUrl``src

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

条件渲染

在 React 中，没有用于编写条件的特殊语法。相反，您将使用与编写常规 JavaScript 代码时相同的技术

const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map(product =>
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.title}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
}

使用钩子

以 开头的函数use称为Hooks。useState是 React 提供的内置 Hook。可以在 API 参考中找到其他内置 Hook.还可以通过组合现有的 Hooks 来编写自己的 Hooks。