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

изучать ReactJS Программирование и разработка

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

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

  1. Функциональные компоненты React
  2. Компонент 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 после их импорта.

Читайте также:  Как преобразовать строку в int в C++?

Где-то в вашем проекте в 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»

Подход: теперь в вашем 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>
  );
}

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

npm start

Вывод: Теперь откройте браузер и перейдите по адресу http: // localhost: 3000 /, вы увидите следующий вывод:

Читайте также:  Пример рекурсии Python

Теперь откройте браузер и перейдите по адресу

Оцените статью
bestprogrammer.ru
Добавить комментарий