Как программист или разработчик блокчейнов, вы не можете и дальше откладывать изучение React.js, поскольку это один из самых эффективных инструментов для создания мощных веб-приложений и dApps. В этом быстром руководстве вы научитесь овладевать React.js с самого начала, шаг за шагом, даже если вы никогда не использовали его раньше.

Это руководство для вас, если у вас есть опыт работы с React в качестве быстрого обновления до последних изменений в 2019–2020 годах, когда большинство компонентов являются функциями с хуками. Читайте дальше.

Вот что вы узнаете:

  1. Научитесь настраивать веб-пакет
  2. Научитесь создавать файлы реакции
  3. Установка скриптов package.json
  4. Настроить статический экспресс-сервер в node.js
  5. Обновление состояния, использование эффектов и импорт файлов
  6. "Заключение"

Вот видеоверсия, чтобы вы выучили ее за 30 минут и увидели весь процесс, если вы застряли или предпочитаете видео. Сделано мною:

1. Научитесь настраивать веб-пакет.

Пойдем прямо к делу. Чтобы использовать React.js, нам нужен веб-пакет, который представляет собой инструмент, который преобразует наш современный код javacript ES6 во что-то, что могут понять браузеры. ES6 - это версия javascript, которая все еще находится в разработке, но она используется большинством современных веб-приложений, поскольку она достаточно стабильна и дает вам доступ ко многим новым функциям, которые необходимы для реагирования.

Идите вперед и создайте новую папку, в которую вы будете помещать файлы проекта на рабочем столе. Назовите его react-starter, затем откройте утилиту командной строки и перейдите в эту папку. У вас должен быть установлен node.js, чтобы продолжить, если у вас его нет, загрузите его на nodejs.org, поскольку это бесплатное программное обеспечение с открытым исходным кодом. После этого выполните эти команды по порядку в вашем терминале, командной строке или PowerShell:

npm init -y
npm i -g yarn
yarn add --dev @babel/core @babel/polyfill @babel/preset-react @babel/preset-env babel-loader style-loader css-loader html-webpack-plugin react react-dom webpack webpack-cli
yarn add express body-parser

Вот краткое объяснение этих команд:

  1. npm init позволяет вам запускать проект node.js в этом каталоге, который позволяет вам устанавливать зависимости npm (диспетчер пакетов узлов), необходимые для загрузки и использования webpack и реагирования среди многих других инструментов.
  2. npm i -g yarn просто устанавливает утилиту yarn, которая является более быстрой альтернативой npm в качестве диспетчера пакетов, что означает, что вы сможете быстрее загружать и обрабатывать зависимости.
  3. Следующая строка устанавливает все зависимости, необходимые для настройки нашего проекта. Вы видите там React, Webpack, Babel и множество пресетов. Они предназначены для преобразования файлов javacript в код, понятный браузерам, что означает, что они позволяют использовать современный javascript.
  4. Последняя строка предназначена для установки необходимых зависимостей для создания статического сервера, который отправляет файлы при доступе к вашей странице.

Затем создайте папки dist и src в корне вашего проекта. Dist - это папка распространения, которая отправляется браузерам, когда они обращаются к вашей странице, а src - это исходная папка, в которой находится весь код.

После этого создайте файл с именем webpack.config.js в корне вашей папки, это имя важно, поэтому убедитесь, что вы сделали это правильно. Это конфигурация веб-пакета, в которой мы сообщаем ему, как мы хотим, чтобы он обрабатывал наши файлы. Скопируйте вручную следующий код внутри этого файла:

const HTMLPlugin = require('html-webpack-plugin')
const { join } = require('path')
module.exports = {
  entry: [
    '@babel/polyfill',
    join(__dirname, 'src', 'App.js'),
  ],
  output: {
    path: join(__dirname, 'dist'),
    filename: 'build.js',
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/,
      query: {
        presets: ['@babel/preset-env', '@babel/preset-react'],
      }
    }, {
      test: /\.css$/,
      exclude: /node_modules/,
      use: ['style-loader', 'css-loader'],
    }]
  },
  plugins: [
    new HTMLPlugin({
      title: 'My React application',
      template: join(__dirname, 'src', 'index.ejs'),
      hash: true,
    })
  ]
}

Эта конфигурация веб-пакета позволяет вам начать с перехода к файлу src / App.js, а затем переходить оттуда, пока все файлы не будут преобразованы для вывода их в папку dist.

Теперь создайте файл с именем index.ejs внутри вашего src/ каталога со следующим кодом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Расширение .ejs указывает на то, что мы используем механизм шаблонов node.js ejs, который используется для включения переменных в файлы html. Как вы можете видеть, единственное, что отличается от обычного html, - это блок плагинов веб-пакета, который является переменной, поступающей из конфигурации веб-пакета, особенно из зависимости html-webpack-plugin, используемой для очистки кеша каждый раз, когда вы создаете свои файлы с помощью веб-пакета, чтобы вы могли видеть новые изменения каждый раз, когда вы перезагружаете браузер.

Настоящая причина немного сбивает с толку, поэтому обязательно поищите больше об этом пакете в Интернете, если вам интересно.

2. Научитесь создавать файлы реакции.

Файлы React имеют специальный синтаксис, в котором мы включаем действительный код HTML в файлы javascript. Это невозможно с обычным javascript, но поскольку мы используем что-то под названием JSX, мы можем это сделать. Это виртуальное представление веб-страницы в ваших файлах. Не волнуйтесь, если вы этого не поймете, со временем станет яснее, как все это взаимосвязано.

Так что продолжайте и создайте файл App.js внутри исходной папки. Обратите внимание на то, что первая буква в верхнем регистре указывает на то, что файл является компонентом React, элементом, который вы можете использовать внутри других компонентов. Думайте об этом как о фрагменте HTML-кода, который вы можете вставить где угодно.

Внутри вашего App.js введите этот код вручную, не копируйте и вставляйте его, потому что когда вы пишете его собственными руками, вы действительно развиваете мышечную память, чтобы учиться быстрее:

import React from 'react'
import { render } from 'react-dom'
function App () {
  return (
    <div>The app has been setup</div>
  )
}
render(<App />, document.querySelector('#root'))

То, что мы делаем, это import response и react-dom, которые представляют собой утилиту для рендеринга ваших компонентов реакции в ваш HTML-код. Функция App() - это функциональный компонент React, который представляет собой новый современный способ создания компонентов. Раньше у нас были компоненты, основанные на классах, хотя они по-прежнему абсолютно действительны, они не используются так часто, как функциональные компоненты.

3. Установите скрипты package.json.

Файл package.json чрезвычайно важен, поскольку он содержит важную конфигурацию всего вашего проекта. В проекте используются все зависимости, поэтому другие могут установить те же необходимые инструменты для запуска того же кода без проблем.

Идите и откройте его. Вы увидите "scripts" раздел, содержащий ваши собственные настраиваемые утилиты для выполнения небольших программ, таких как webpack, для преобразования ваших файлов в нужную сборку.

Поэтому удалите строку "test" внутри раздела "scripts" и вместо этого напишите следующие сценарии:

"scripts": {
  "watch": "webpack -dw",
  "compile": "webpack -p",
  "start": "node server.js"
},

Это позволит вам выполнять yarn run watch, yarn run compile и yarn run start, команды, которые нам понадобятся для преобразования современных файлов javascript и запуска статического сервера.

4. Настройте статический экспресс-сервер в node.js.

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

Создайте файл server.js в корневом каталоге вашего проекта и введите следующий код для создания сервера:

const express = require('express')
const bodyParser = require('body-parser')
const { join } = require('path')
const app = express()
const port = 8000
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}))
app.use((req, res, next) => {
  // Logger
  let time = new Date()
  console.log(`${req.method} to ${req.originalUrl} at ${time.getHours()}:${time.getMinutes()}}`)
  next()
})
app.use(express.static('dist'))
app.listen(port, '0.0.0.0', (req, res) => {
  console.log('The server has been started')
})

Здесь мы используем express как структуру веб-сервера для приема и управления запросами в node.js. Затем мы создаем регистратор, который показывает нам, кто, какой URL и когда запрашивает. Наконец, мы используем express.static('dist'), чтобы позволить пользователям иметь свободный доступ ко всем файлам, находящимся внутри папки распространения. Если вам интересно узнать подробности, ознакомьтесь с express.js документами, чтобы понять, как это работает.

5. Обновление состояния, использование эффектов и импорт файлов.

Теперь, когда все файлы настроены правильно, мы можем приступить к созданию кода React! Поверьте, со временем это станет проще, если вы поймете назначение каждого инструмента и то, как снова его настроить.

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

Начните с создания папки components/ внутри вашего src/, поскольку нам нужно место для хранения всех наших компонентов, кроме этого исходного App.js. Затем внутри components/ создайте файл с именем InputBox.js. Добавьте следующий код в InputBox файл компонента, я объясню его прямо ниже:

import React, { useState, useEffect } from 'react'
export default ({ props }) => {
  const [value, setValue] = useState('')
  useEffect(() => {
    setValue('Empty')
  }, [])
  return (
    <div className="input-box">
      <input
        type="text"
        value={value}
        onChange={e => {
          setValue(e.target.value)
        }}
      />
      <p>Your input is: {value}</p>
    </div>
  )
}

Вот разбивка:

  1. Как видите, мы импортируем функции useState и useEffect из пакета реакции. Они известны как перехватчики реакции, это особый тип функции, которая обнаруживает, когда что-то изменяется в вашем компоненте, и обновляет визуальный дизайн в режиме реального времени.
  2. Затем мы создаем и одновременно экспортируем анонимную стрелочную функцию, которая содержит переменную состояния value и общий useEffect хук.
  3. Переменная useState возвращает 2 элемента: первый - это «умная» переменная, которую вы хотите, с любым именем, которое вы выберете, а второй - это функция, которая обновляет эту умную переменную, чтобы реагировать, когда что-то происходит в интерфейсе и содержимом внутри. useState('') - начальное значение переменной value, в данном случае пустая строка.
  4. Затем мы определяем useEffect функцию, которая просто обновляет нашу value переменную состояния значением Empty в качестве примера. Нам это необязательно, но я добавил это просто для демонстрации. Второй параметр хука useEffect - это массив. Если этот массив пуст, как в этом случае, то ловушка будет выполнена только один раз при загрузке страницы. Если есть имя переменной, например: [value], тогда функция внутри ловушки useEffect будет выполняться всякий раз, когда переменная value изменяется, так что вы можете выполнять другую логику.
  5. Наконец, у нас есть возвращаемое значение, которое просто возвращает div с вводом и текстом. Обратите внимание на то, что у входа есть событие onChange, которое является специальным событием реакции, которое выполняется всякий раз, когда входные данные меняются. Внутри этой функции мы просто обновляем переменную value, чтобы обновить ее значение, чтобы вы могли видеть, что вы вводите ниже, внутри: <p>Your input is: {value}</p>

6. Заключение

Это была небольшая статья, которую я создал как введение для тех, кто интересуется разработкой React, как краткое изложение основных вещей, которые вам необходимо знать. Процесс настройки трудоемкий, но он имеет смысл, если вы проделаете его несколько раз. React on сам по себе - это совершенно другой javacript, чем тот, к которому вы, возможно, привыкли.

Однако React никуда не денется, и буквально миллионами проектов он доказал, что способен создавать чрезвычайно эффективные и стабильные пользовательские интерфейсы, которые просты в управлении, обслуживании и масштабировании по сравнению с традиционными интерфейсами javascript. Если вы хотите узнать больше о реакции и серьезно относитесь к зарабатыванию денег в Интернете, посмотрите мой новый курс heatoon.com, который теперь доступен.

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