Browse Source

Clarify example

main
Dan Abramov 2 years ago
parent
commit
d2bf257e26
  1. 18
      beta/src/content/apis/react/Component.md

18
beta/src/content/apis/react/Component.md

@ -278,18 +278,28 @@ We recommend to define components as functions instead of classes. [See how to m
Typically, you will [define components as functions](/learn/your-first-component#defining-a-component) instead. Typically, you will [define components as functions](/learn/your-first-component#defining-a-component) instead.
For example, suppose you're converting this class to a function: For example, suppose you're converting this `Greeting` class component to a function:
<Sandpack> <Sandpack>
```js ```js
import { Component } from 'react'; import { Component } from 'react';
export default class Greeting extends Component { class Greeting extends Component {
render() { render() {
return <h1>Hello, {this.props.name}!</h1>; return <h1>Hello, {this.props.name}!</h1>;
} }
} }
export default function App() {
return (
<>
<Greeting name="Sara" />
<Greeting name="Cahal" />
<Greeting name="Edite" />
</>
);
}
``` ```
</Sandpack> </Sandpack>
@ -336,7 +346,7 @@ export default function App() {
### Migrating a component with state from a class to a function {/*migrating-a-component-with-state-from-a-class-to-a-function*/} ### Migrating a component with state from a class to a function {/*migrating-a-component-with-state-from-a-class-to-a-function*/}
Suppose you're converting this class to a function: Suppose you're converting this `Counter` class component to a function:
<Sandpack> <Sandpack>
@ -458,7 +468,7 @@ button { display: block; margin-top: 10px; }
### Migrating a component with lifecycle methods from a class to a function {/*migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function*/} ### Migrating a component with lifecycle methods from a class to a function {/*migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function*/}
Suppose you're converting this component with lifecycle methods to a function: Suppose you're converting this `ChatRoom` class component with lifecycle methods to a function:
<Sandpack> <Sandpack>

Loading…
Cancel
Save