~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/react/3react-components

# Components

Components are independent, reusable pieces of UI. Each component returns JSX describing a part of the interface.

## Function Components

The modern way to write React components:

```jsx
function Greeting() {
  return <h1>Hello, World!</h1>;
}
```

Use PascalCase for component names. The name must start with a capital letter.

## Rendering a Component

Use the component as a JSX tag:

```jsx
function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
    </div>
  );
}
```

Each `<Greeting />` renders independently.

## Composing Components

Components can nest and compose freely:

```jsx
function Header() {
  return <h1>My App</h1>;
}

function Content() {
  return <p>Welcome to React.</p>;
}

function App() {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
}
```

Build complex UIs from small, focused pieces.

## Component Tree

React renders components as a tree. `App` is the root, with children branching down:

```
App
├── Header
├── Content
└── Footer
```

Each component manages its own piece of the tree.

## One Component Per File

Keep components in separate files:

```
src/
  components/
    Header.jsx
    Footer.jsx
  App.jsx
```

This keeps code organized and easy to find.

## Best Practices

1. **Name components PascalCase** — `UserProfile`, not `userProfile`
2. **Keep components small** — One job per component
3. **Extract when复用 occurs** — If you copy-paste, make a component
4. **One component per file** — Easier to navigate and maintain

## Common Mistakes

1. **Lowercase component names** — `<greeting />` is treated as an HTML tag
2. **Making components too large** — Split into smaller pieces
3. **Putting everything in App.jsx** — Extract to separate files
4. **Forgetting to export** — Component won't be importable

No changes yet

cancel