组件 & JSX

我们的第一个组件就在 src/App.js 文件中，是一个常规的 JS 函数（但名称必须以大写字母开头），你可以删除模板自动生成的部分代码并将其简化为以下形式：

function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

在你保存后，浏览器将会显示 Hello World 的结果。

可以看到 App 组件返回了类似 HTML 的输出，这样的将 HTML 和 JavaScript 混合在一起的输出叫做 JSX，它可以用来生成 React 元素，同时 return 多行必须将其包在一对括号中。

如果你在开头定义了一个变量，你可以这样展示：

const title = "React";

function App() {
  return (
    <div>
      <h1>Hello {title}</h1>
    </div>
  );
}

export default App;

而 HTML 的部分与原生几乎相同，如果要写一个输入框你可以这样定义：

<label htmlFor="search">Search: </label>
<input type="text" id="search"/>

可以看到只有 htmlFor 不认识，但也可以猜到是 for 属性的代替。React 约定使用驼峰命名法，所以很多属性与原生不同，比如 class 和 onclick 在 JSX 中是 className 和 onClick，你可以在 React 文档中找到更多支持的属性。

而且 JSX 花括号内的所有内容都可以使用 JS 表达式，例如函数执行：

function getName(name) {
  return "Hello " + name;
}

export default function App() {
  return (
    <div>
      <h1>{getName("Mancuoj")}</h1>
      
      <label htmlFor="search">Search: </label>
      <input type="text" id="search"/>
    </div>
  );
}

export default 是标准的 JS 语法（并不特定于 React），可以导出函数对象或原始值，以便在其他文件中使用 import 导入。这里我们也可以简化一下，直接默认导出函数的返回值。

专栏

因为参加打卡活动是每日更新，所以可能比较短小，可以关注一下 React 入门专栏。

在更新完后会整合为一整篇，感谢关注和点赞！

2022 React 最速上手指南（二）—— 组件 & JSX

组件 & JSX

专栏