Итак, в этом посте мы начнем с того, что узнаем больше о компонентах, а также о типах компонентов в React. Наконец, мы создадим приложение Simple Counter.

Что такое Реакт?

Вы можете найти больше о React по адресу:

Реагировать Документы

Мой первый пост

Компоненты

Компоненты похожи на функции, которые возвращают элементы HTML. Компоненты можно рассматривать как фрагменты кода или строительные блоки для веб-страницы. Компоненты — это независимые небольшие фрагменты кода, которые можно использовать повторно.

В библиотеке React есть два типа компонентов:

1. Компоненты класса

Давайте нарушим синтаксис, чтобы понять его более точно:

import React from 'react' ;

Для совместного использования функций modules мы используем операторы импорта и экспорта. Модули могут содержать в себе функции и классы. Используя ключевое слово экспорта, мы можем совместно использовать переменные, функции, объекты, а также классы, и их можно импортировать в другие файлы, используя ключевое слово импорта.

В первом операторе мы импортируем React из модуля «React». Итак, можно просто сказать, что модуль с именем «реагировать» экспортирует что-то с именем React, которое имеет определенную функциональность, используя оператор экспорта по умолчанию «export default React», и мы импортируем его куда-то в другой модуль, используя ключевое слово import.

Примечание. В модуле может быть только одно значение экспорта по умолчанию.

Если мы хотим иметь несколько экспортов из модуля, мы можем использовать именованные экспорты. Например: что-то экспортируется как export {object_1,object_2} и может быть импортировано с помощью import {object_1,object_2} from ‘module_name’.

Итак, из модуля с именем «реагировать» мы импортируем именованный экспорт с именем «Компонент», например:

import { Component } from 'react' ;

class Counter extends Component

Здесь класс — это ключевое слово, используемое для определения класса с именем «Счетчик». Ключевое слово extends используется для создания дочернего класса ( Counter ) родительского класса ( React.Component ). Мы определяем React.Component как родительский для каждого компонента класса, чтобы дочерний элемент мог наследовать все методы из одного и того же .

рендеринг()

Этот метод внутри любого компонента возвращает HTML.

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

Как видно, компоненты функции React — это просто функция JavaScript, возвращающая HTML.

Примечание. Функциональный компонент не требует метода рендеринга.

Теперь у нас есть общее представление о компонентах React, которые мы углубимся в создание нашего приложения React.

Это руководство содержит три важных шага:

  1. Создание React-приложения.
  2. Запуск сервера на машине.
  3. Код написания.

Шаг 1. Создание приложения React

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

mkdir project — создает новый каталог с именем project.

cd project — перейдите в папку проекта.

npx create-react-app counter — эта команда устанавливает всю необходимую конфигурацию и автоматически устанавливает пакеты для нас. Нам не нужно делать все это вручную. Эта команда обрабатывает все эти вещи для нас.

После завершения установки мы увидим что-то вроде этого на нашем терминале:

Этим мы абсолютно уверены, что успешно завершили наш первый шаг. Поздравляю !

Шаг 2: Запуск сервера разработки

Теперь сначала мы перейдем к нашей папке счетчика. Затем мы запустим наш локальный сервер разработки.

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

Шаг 3: Написание кода

Для этого шага мы перейдем к нашему App.js file и приведем его в порядок. Обновленный файл будет выглядеть так:

Вернитесь в окно браузера, и теперь вместо вращающегося логотипа React у нас будет текстовое содержимое. Итак, наконец, используя компонент React, мы визуализировали текстовое содержимое на экране.

Теперь мы переходим к написанию следующего кода для счетчика. Перейдите в папку src внутри приложения COUNTER. Там создайте новый файл с именем Counter.js

Как только первый будет создан, мы начнем писать наш первый компонент React.

Таким образом, обновленный counter.js file будет выглядеть примерно так. Здесь сначала мы определили функцию Component, которая возвращает тег <h1>. Наконец, мы экспортировали Counter component.

Мы можем импортировать компонент Counter в наш App.js, используя оператор импорта по умолчанию, и использовать его в нашем файле приложения.

import Counter from './Counter.js'
function App() {
return(
<div className='App'>
  <h1>Counter App</h1>
  <Counter/>
</div>
) ;
}
export default App ;

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

Наш компонент Counter после внесения изменений выглядит так:

Чтобы стилизовать наш компонент, создайте файл с именем Counter.css в папке src и импортируйте его в наш компонент Counter, используя оператор import './Counter.css'. Вы можете просто скопировать следующий код в свой файл Counter.css.

.counter{
display: flex;
flex-direction: column;
max-width: 300px;
justify-content: space-evenly;
min-height: 300px;
margin: 100px auto;
background-color: rgb(71, 210, 245);
}
.btn_grp{
justify-content: space-evenly;
display: flex;
}
.btn_grp > button{
padding: 20px;
border: none;
font-weight: 800;
cursor: pointer;
background-color: white;
}

Теперь наше приложение будет выглядеть примерно так:

Теперь наступает самая важная часть — добавление состояния к нашему функциональному компоненту. Для этой цели React предоставляет нам хук useState, который позволяет нам добавлять состояние к компоненту.

const [count,setCount] = useState(0)

Здесь мы используем useState для объявления «переменной состояния». В нашем случае переменная состояния называется count. Значение, переданное в useState, является начальным значением count. setCount — это функция, которую мы должны использовать для изменения значения переменной count.

Следующим шагом является добавление прослушивателей событий к кнопке счетчика, т. е. когда мы нажимаем кнопку +, - или ноль, функция должна вызываться, и состояние должно обновляться соответствующим образом.

<button id='increment' onClick={increment}>+</button>
<button id='zero' onClick={reset}>zero</button>
<button id='decrement' onClick={decrement}>-</button>

Теперь мы определяем функции увеличения, уменьшения и сброса в нашем компоненте.

const increment = () =>{ setCount(count+1) ; }
const decrement = () =>{ setCount(count- 1) ; }
const reset = () =>{ setCount(0) ; }

Наш последний компонент счетчика теперь выглядит так:

Изначально мы объявили переменную с именем count, мы можем использовать ее внутри JSX, заключив в фигурные скобки.

Спасибо, что потратили свое драгоценное время на чтение этого поста.

Хорошего дня .