Как создать компонентв в React.js?

Пользователь

от sylvester , в категории: JavaScript , год назад

Как создать компонентв в React.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от clifford , 5 месяцев назад

@sylvester 

Чтобы создать компонент в React, вам нужно создать функцию или класс, которая возвращает разметку JSX (расширение языка JavaScript, которое позволяет использовать элементы HTML-подобной синтаксис внутри JavaScript).


Функциональный компонент может выглядеть следующим образом:

1
2
3
4
5
6
7
8
9
import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>{props.message}</h1>
    </div>
  );
}


Компонент, созданный с использованием класса, может выглядеть так:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
      </div>
    );
  }
}


Вы можете использовать созданный компонент, чтобы отобразить его в другом месте в вашем приложении, используя его имя, как элемент HTML:

1
<MyComponent message="Hello, world!" />


Как видите, создание компонента в React достаточно простое. Но это только начало – в React есть множество других функций и фич, ко