React一学就会(2): 快速上手

有了上一节的铺垫，基础环境我们已经创建好了，再次运行它

cd my-react-app
npm run dev

在浏览器中打开地址：http://localhost:5173, 并在浏览器中右击，选择检查菜单项，打开控制台，如下图所示

这是我们上节课操作的结果。到目前为止，你只要你跟着我一步一步的做，就行了。或许你已经懂得并了解了一react的基础结构了，也或许你还一头雾水，不过不用担心，开胃菜还没开始。

react以状态化构建组件的方式极大的优化了我们的开发成本，一但掌握你就爱不释手。

JSX

我们之前创建的文件都是JSX文件，但是也可以是js文件，但作为标准化的开发方案，我们建议用jsx格式的文件。但大多数 React项目为了方便起见而使用 JSX。

JSX比HTML更严格。您必须关闭标签。您的组件也无法返回多个JSX标签。您必须将它们包裹在共享父母中，也就是说定义的每个组件只能返回一个标签的组件，但这个标签部可以包含多个标签。如：<br /> <div> ... </div> <> ... </>

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

注意，空标签<></>也是一个合法的标签。上面的示例表示定义了一个名为AboutPage的组件，他返回的标签是一个空标签包裹的二个其它元素标签。

样式

在JSX中给组件添加样式要注意，class要用className替代，如：

<img className="avatar" />

然后在单独的CSS文件书写样式：

/* In your CSS */
.avatar {
   
   
  border-radius: 50%;
}

样式文件你直接导入就可以了。在组件的开头导入如：

import './public.css';

显示数据

JSX 允许您将标记放入 JavaScript 中。大括号可让您“逃逸”到 JavaScript 中，以便您可以从代码中嵌入一些变量并将其显示给用户。例如，这将显示：user.name。

return (
  <h1>
    {
   
    user.name }
  </h1>
);

您也可以从 JSX 属性中“转义到 JavaScript”，但您必须使用大括号而不是引号。例如，将字符串作为 CSS 类传递，但读取 JavaScript 变量值，然后将该值作为属性传递：

return (
  <img
    className="avatar"
    src={
   
   user.imageUrl}
  />
);

在你的src目录中创建文件：profile.jsx文件，并添加以下内容

示例：profile.jsx

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