Как создавать компоненты в ReactJS?

Как мы все знаем, React использует этот формат JSX, чтобы мы могли объединить HTML и JavaScript. Эти компоненты React могут быть определены в любом месте вашего проекта ReactJS и могут использоваться в любом месте вашего проекта ReactJS. Есть два способа определения компонентов в ReactJS, оба используются широким кругом программистов, но с помощью APIS / HOOK, таких как useState, контекст использования функциональные компоненты становятся все более популярными.

Содержание

Типы компонентов
Функциональные компоненты React
Компоненты на основе классов React
Создание приложения React и установка модуля

Типы компонентов

Функциональные компоненты React
Компонент React на основе классов

Функциональные компоненты React

Функциональными компонентамиReact могут быть любые функции JavaScript, возвращающие HTML. Эти функциональные компоненты также могут принимать «реквизиты», то есть свойства или данные. Поскольку это функции JavaScript или расширения функций JavaScript, они также могут быть созданы в соответствии с соглашением ES6 о стрелочной функции. Эти функциональные компоненты также могут принимать реквизиты, которые мы можем использовать с использованием синтаксиса JSX, и вы также можете поместить свой обычный код JavaScript перед оператором возврата. Следует отметить, что для каждого компонента должен быть только один возврат.

Javascript

const Greet = (props) => {

    const person = props.name;

  return (

    <div>

      <h1>Hello {person}!!</h1>

    </div>

  )

}

Компоненты на основе классов React

Компоненты на основеклассов также имеют почти те же функции, что и функциональные компоненты React. но прежде чем мы определим наш компонент на основе классов, нам нужно импортировать файл «React. Component «или извлеките компонент, например,» {Component} «из React.

import React, {Components} from 'react';

Javascript

import React, { Component } from 'react'

class App extends Component {

  render() {

    return (

      <div>

        <h1>Hello {this.props.name}</h1>

      </div>

    )

  }

}

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

Где-то в вашем проекте в ReactDOM.render ()

ReactDOM.render(
  <React.StrictMode>
    <Greet name="gfg " />
  </React.StrictMode>,
  document.getElementById('root')
);

Теперь мы увидим полноценное рабочее приложение, созданное с использованием компонентов React.

Создание приложения React и установка модуля

Шаг 1. Создайте приложение React, используя следующую команду:

npx create-react-app foldername

Шаг 2: После создания папки проекта, т.е. имени папки, перейдите в нее с помощью следующей команды:

cd foldername

Структура проекта: это будет выглядеть следующим образом.

npm start

Подход: теперь в вашем App.js. есть компонент с именем «Card». мы собираемся использовать этот компонент позже. Этот компонент Then принимает два аргумента / данных «писатель» и «получатель». Затем у нас есть один возврат, который просто использует эти данные писателя и получателя и отображает их на карте. После этого мы создали еще один компонент с именем App, который будет использоваться для хранения всех компонентов нашего приложения. Это приложение имеет экспорт по умолчанию, поэтому мы можем использовать его в любом месте нашего приложения React. Следовательно, нам не нужно рендерить его вручную. Это приложение автоматически отображается в вашем index.js при создании приложения для реагирования с использованием npx.

App.js

import React from "react";



function Card({ receiver, writer }) {

  return (

    <div>

      <h1 style={{

          backgroundColor: "lightblue",

          width: "fit-content"

      }}>

        GeeksforGeeks

      </h1>



      <h2 style={{

          backgroundColor: "lightgrey",

          width: "fit-content"

      }}>

        A Computer Science portal for geeks.

        It contains well written, well

        thought and well explained computer

        science and programming articles

      </h2>



      <h3>Your truly, {writer}</h3>

    </div>

  );

}



export default function App() {

  return (

    <div>

      <Card writer="GFG" receiver="gfg jr" />

    </div>

  );

}