My App

基本语法

基本语法

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

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> 。

箭头函数 vs 传统函数

现代 JavaScript 支持两种不同的语法来编写函数。除了传统的方式,使用 function 关键字,你还可以使用"箭头函数"。如果你不熟悉箭头函数,请查看 JavaScript 入门课程“箭头函数”👀。

在定义 React 组件时应该使用哪种类型的函数?简短回答:没有关系。它们的工作方式完全相同。

大构件规则

创建组件时并没有太多规则,但有一个铁律: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 。

为什么要基于字符大小写?

乍一看,这条规则感觉有些多余。难道 React 不能判断我们是在渲染一个 HTML 标签还是一个组件吗?内置的 HTML 标签也就那么多,对吧?

遗憾的是,事情并不像看起来那么简单……

On this page