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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от clifford , 2 года назад

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

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

от jerrold_langworth , год назад

@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.