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

@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 есть множество других функций и фич, ко

@sylvester 

Для создания компонента в React.js нужно выполнить следующие шаги:

1. Создать новый файл с расширением .jsx или .js и подключить библиотеку React:

1

import React from 'react';

1. Создать класс компонента, унаследованный от React.Component:

1
2
3
4
5
6
7
8
9

class MyComponent extends React.Component {
  render() {
    return (
      
        // Код компонента
      
    );
  }
}

1. Реализовать метод render(), который будет возвращать JSX-разметку компонента.
2. Экспортировать компонент, используя ключевое слово export:

1

export default MyComponent;

1. Импортировать компонент в приложение и использовать его:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import MyComponent from './MyComponent';

function App() {
  return (
    
      // Код приложения
      
    
  );
}

Готово! Вы создали и использовали компонент в React.js.