基本语法

好的，够了高层次的想法。让我们看一些代码！

import React from 'react';
import { createRoot } from 'react-dom/client';

function FriendlyGreeting() {
  return (
    <p
      style={{
        fontSize: '1.25rem',
        textAlign: 'center',
        color: 'sienna',
      }}
    >
      Greetings, weary traveller!
    </p>
  );
}

const container = document.querySelector('#root');
const root = createRoot(container);
root.render(<FriendlyGreeting />);

;

在 React 中，组件被定义为 JavaScript 函数。它们也可以使用 class 关键字进行定义，尽管这被认为是一种传统的替代方法，在现代 React 应用程序中不推荐使用。

通常，React 组件返回一个或多个 React 元素。

此组件， FriendlyGreeting ，创建一个描述段落的 React 元素，带有一些内置样式。为简单起见，在这里我们使用内联样式；我们将在接下来的课程中更多地讨论 React 丰富的样式生态系统。

我们渲染一个组件的方式与渲染一个 HTML 标记相同。而不是渲染 <div> 或 <h1> ，我们渲染 <FriendlyGreeting> 。

大构件规则

创建组件时并没有太多规则，但有一个铁律：React 组件的首字母必须大写。这样 JSX 编译器就能区分我们是要渲染内置的 HTML 标签还是自定义的 React 组件。

例如，这里有两个 JSX 元素：

const heading = <h1>Hello!</h1>;
const greeting = <FriendlyGreeting />;

以下是将相同元素编译为 JavaScript 的内容：

const heading = React.createElement("h1", null, "Hello!");
const greeting = React.createElement(FriendlyGreeting, null);

一个 React 元素是我们想要创建的事物的描述。在某些情况下，我们想要创建一个 DOM 节点，比如一个 <h1> 或一个 <p> 。在其他情况下，我们想要创建一个组件实例。

我们传递给 React.createElement 的第一个参数是我们想要创建的东西的“类型”。对于第一个元素，它是一个字符串（ "h1" ）。对于第二个元素，它是一个函数！这是 FriendlyGreeting ，而不是 "FriendlyGreeting" 。

约定俗成的是对所有 React 组件名称使用 PascalCase?，虽然从技术上讲只有第一个字母才真正 important。We could name it Friendlygreeting , 但更符合惯例的是使用 FriendlyGreeting 。