41 lines
2.2 KiB
Markdown
41 lines
2.2 KiB
Markdown
---
|
||
title: Write a React Component from Scratch
|
||
localeTitle: Напишите компонент реакции с нуля
|
||
---
|
||
## Напишите компонент реакции с нуля
|
||
|
||
В этой задаче мы хотим создать компонент реагирования `class` (компоненты React могут быть компонентами `class` или `function` компонентами). Все наши компоненты класса будут расширением `React.Component` . Например, мы можем начать составлять компонент `FirstComponent` с:
|
||
|
||
```javascript
|
||
class FirstComponent extends React.Component {
|
||
|
||
};
|
||
```
|
||
|
||
Мы также должны обязательно определить `constructor` для нашего нового класса. Это лучшая практика для вызова любого компонента `constructor` с `super` и передать `props` для обоих. `super` вытягивает `constructor` родительского класса нашего компонента (в данном случае `React.Component` ). Теперь код для нашего компонента выглядит следующим образом:
|
||
|
||
```javascript
|
||
class FirstComponent extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
|
||
};
|
||
```
|
||
|
||
Теперь все, что осталось сделать, это определить, что наш компонент будет `render` ! Мы делаем это, вызывая метод `render` компонента и возвращаем наш код JSX:
|
||
|
||
```javascript
|
||
class FirstComponent extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
render() {
|
||
return (
|
||
// The JSX code you put here is what your component will render
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
Как только ваш код JSX находится там, ваш компонент завершен! Если вы хотите более подробный учебник по компонентам React, Samer Buna [написал отличную статью](https://medium.freecodecamp.org/how-to-write-your-first-react-js-component-d728d759cabc) . |