Быстрый и простой обзор React для начинающих, чтобы начать работу

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

Что такое React?

Это библиотека JavaScript, предназначенная для создания одностраничных приложений с многократно используемыми компонентами пользовательского интерфейса.

Как это работает?

React хранит информационную модель DOM, создавая в своей памяти виртуальную модель DOM. Перед тем, как отобразить узлы DOM в браузере, он проверяет наличие изменений между прошлым и настоящим виртуальным DOM. Если есть изменение (то есть обновлено какое-то текстовое содержимое), он обновит свою виртуальную DOM, а затем отобразит в браузере реальную DOM. См. Диаграмму ниже для визуализации.

Поскольку манипуляции с DOM могут занять много времени для загрузки, React изменяет только те узлы DOM, которые необходимо изменить.

Введение в JSX

JSX - очень важная концепция для изучения React. Это сокращение от JavaScript XML. Проще говоря, он позволяет писать HTML в коде React.

Например, взгляните на эти 2 блока кода (исходный код):

//Using JSX
const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
//Not using JSX
const myelement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myelement, document.getElementById('root'));

Как видите, использование JSX позволяет нам легче и быстрее писать HTML-элементы в коде React.

ReactDOM.render ()

Обратите внимание на функцию: ReactDOM.render() внизу блоков кода выше. ReactDOM.render() - это функция, которая принимает 2 аргумента: HTML-код и HTML-элемент для рендеринга кода.

В React верхний узел известен как «корневой» узел. Поэтому мы обычно отображаем в нем наш HTML-код.

Компоненты

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

В React все эти компоненты структурированы как узлы в виртуальной DOM. Затем они будут отображаться в браузере в соответствии с тем, как мы укажем, как они должны выглядеть. См. Диаграмму для визуализации.

В настоящее время в React есть 2 типа компонентов: класс и функциональность.

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

Как следует из названия, компоненты класса - это в основном классы, написанные в контексте React. Правило при написании компонентов - всегда называть компонент с заглавной буквы.

Напишем простой компонент класса House.

  1. Импортировать react и react-dom
  2. Напишите класс House
  3. Вызов ReactDOM.render ()
//1.
import React from 'react'
import ReactDOM from 'react-dom'
//2.
class House extends React.Component {
  render() {
    return (
      <div>
        <h2>This is a house</h2>
      </div>
    )
  }
}
//3.
ReactDOM.render(<House />, document.getElementById('root'));

Чтобы продвинуться дальше, давайте создадим класс Door и сделаем его дочерним компонентом дома (поскольку двери находятся внутри домов).

Сначала мы создаем класс Door.

class Door extends React.Component {
  render() {
    return (
      <div>
        <h3>This is a door</h3>
      </div>
    )
  }
}

Затем мы добавляем его в класс House, чтобы сделать его дочерним элементом.

class House extends React.Component {
  render() {
    return (
      <div>
        <h2>This is a house</h2>
        <Door /> <!--here is the Door component-->
      </div>
    )
  }
}

На изображении ниже показано, как приложение выглядит в браузере. Я пошел дальше и добавил контуры к каждому компоненту, чтобы лучше их показать. Оба класса отображаются идеально, при этом Дверь представляет собой рамку с красной рамкой, которая отображается внутри Дома, как это представлено синей рамкой.

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

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

Давайте построим такие же Дом и Дверь как функциональные компоненты.

import React from "react";
import ReactDOM from "react-dom";
function House() {
  return (
    <div>
    <h2>This is a house</h2>
    <Door/> <!--add Door as child-->
  </div>
  );
}
function Door() {
  return (
    <div>
    <h3>This is a door</h3>
  </div>
  );
}
ReactDOM.render(<House />, document.getElementById("root"));

И это все! Они в значительной степени работают одинаково и отображают одни и те же элементы HTML. Обратите внимание, что для компонентов функции вам не нужно указывать функцию render() перед оператором return.

Реквизит

Компоненты React могут иметь реквизиты. И реквизиты эквивалентны аргументам функции или атрибутам HTML.

Вернемся к нашему дому и двери, допустим, у нас есть много компонентов двери внутри дома. Как отличить одну дверь от другой? Как насчет того, чтобы дать каждой двери title подпорку? Для этого просто добавьте title в компонент Door следующим образом.

<Door title="front" />

Вроде как атрибуты HTML, верно? Затем в компоненте Door мы можем распечатать его опору следующим образом.

//pass props as argument first
function Door(props) {
  return (
    <div>
    <h3>This is the {props.title} door</h3> 
  </div>
  );
}

И наше приложение распечатает заголовок, как и ожидалось.

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

function House() {
  return (
    <div>
    <h2>This is a house</h2>
    <Door title="front"/>
    <Door title="back"/>
    <Door title="kitchen"/>
    <Door title="bedroom"/>
  </div>
  );
}

Результат будет выглядеть так:

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

состояния

Теперь коротко поговорим о состояниях. В React состояние - это объект, в котором хранятся переменные. Доступ к этим переменным возможен только внутри его Компонента (если, конечно, вы не используете некоторые инструменты управления состоянием, такие как Redux).

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

class House extends React.Component {
  constructor(props) {
       super(props);
       this.state = {
            color: "white",
            rooms: 4
       };
  }
  render() {
    return (
      <div>
        <h2>This is a {this.state.color} house with {this.state.rooms} rooms.</h2>
      </div>
    )
  }
}

В приведенном выше коде мы добавляем наш объект состояния в нашу функцию-конструктор. Затем мы редактируем HTML-элемент, чтобы вернуть предложение со свойством state color и rooms. В результате получится:

Базовые хуки React

В нашем предыдущем примере мы видели, как использовать состояния в нашем компоненте класса House. В функциональных компонентах мы можем использовать нечто, называемое React Hooks, для управления нашими состояниями.

У меня есть целая серия под названием Взгляд на хуки React по всем основным хукам React. Давайте кратко рассмотрим некоторые из них.

useState ()

Этот хук позволяет функциональным компонентам инициализировать и обновлять состояния. Вот простой пример.

import React, { useState } from "react";
import ReactDOM from "react-dom";
function House() {
  const [color, setColor] = useState("white");
  return (
    <div>
      <h2>This is a {color} house</h2>
    </div>
  );
}

Сначала инициализируйте состояние как «белое» внутри useState Hook. Хук возвращает массив: значение состояния (т. Е. Цвет) и его функцию set, которая используется для обновления состояния (т. Е. SetColor).

Затем просто включите значение состояния в функцию возврата, и приложение отобразит состояние.

Для более подробного объяснения этого хука, пожалуйста, прочтите эту статью.

useEffect ()

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

Вернувшись к нашему компоненту «Дом», мы добавляем еще одну переменную с именем door, которая будет отслеживать количество дверей в этом доме. В хуке useState инициализируйте его значением 0.

Затем мы добавляем кнопку, которая при onClick увеличивает значение door на 1. Наконец, у нас есть useEffect Hook, который будет печатать количество дверей в доме каждый раз, когда значение door обновляется.

Код будет выглядеть следующим образом:

function House() {
  const [color, setColor] = useState("white");
  const [door, setDoor] = useState(0); //initialize door as 0
//add 1 to the current value of door on every button click
  const addDoor = () => {
    setDoor(door + 1);
  };
//finally, trigger the function to print the door value whenever door is updated
  useEffect(() => {
    console.log(`Door count: ${door}`)
  }, [door]);
  return (
    <div>
      <h2>This is a {color} house</h2>
      <button onClick={addDoor}>Add a Door</button>
    </div>
  );
}

Результат:

Для более подробного объяснения этого хука, пожалуйста, прочтите эту статью.

Создать приложение React

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

Во-первых, убедитесь, что на вашем компьютере установлены npm и Node.js. Если нет, достаньте здесь.

Самый простой способ настроить приложение React - это установить create-react-app следующим образом:

npm install -g create-react-app

Затем создайте новое приложение React с помощью этой команды:

npx create-react-app app-name-here

Перейдите в папку приложения.

cd app-name-here

И выполните следующую команду, чтобы запустить приложение на локальном хосте.

npm start

Структура приложения

Новое приложение Create React будет иметь следующую структуру папок.

Давайте кратко рассмотрим их одну за другой.

  1. package.json: показывает зависимости и скрипты, используемые в приложении.
  2. package-lock.json: убедитесь, что зависимости установлены.
  3. .gitignore: файлы, которые git не будет включать в каждый коммит.
  4. Readme: обычный файл уценки для описания вашего приложения.
  5. node_modules: где установлены все ваши зависимости.
  6. общая папка: не трогайте эти файлы во время разработки.
  7. Папка src: где будет происходить большая часть разработки.
  8. src / index.js: указывает «корневой» элемент
  9. src / App.js: компонент приложения. Отредактируйте это, чтобы увидеть, что отображается в браузере.
  10. src / App.css: стили для App.js.

Поначалу это может показаться сложным. Если вы новичок, попробуйте сначала сосредоточиться на файле src/App.js. Отредактируйте его HTML-код, добавьте несколько основных функций и почувствуйте, как он работает. После того, как вы освоитесь более подробно, вы можете добавить другие файлы в качестве компонентов в папку src. Как Home.js для компонента Home, Login.js для компонента Login и так далее.

Укладка

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

Встроенный стиль

Как следует из названия, добавьте стиль внутри элемента HTML. Например, давайте добавим границу вокруг нашего дома. Цвет границы зависит от нашей переменной color.

function House() {
  const [color, setColor] = useState("red");
  return (
    <div>
      <h2 style={{"border":`1px solid ${color}`}}>This is a {color} house</h2>
    </div>
  );
}

Поскольку значение color инициализируется красным, приложение будет выглядеть так:

В качестве альтернативы вы можете создать объект style и передать его в атрибуте стиля следующим образом:

function House() {
  const [color, setColor] = useState("red");
//style obj contains the css
  const style={
    "border":`1px solid ${color}`
  }
  return (
    <div>
      <h2 style={style}>This is a {color} house</h2>
    </div>
  );
}

CSS-модули

Другой способ стилизовать - создать файл .css и импортировать его в компонент React. Я создал простой файл styles.css со следующим стилем:

h2 {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  padding: 10px 5px;
  border-radius: 10px;
}

Затем в моем файле компонента House импортируйте файл, как показано ниже:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./style.css"; //import here
//keep everything else the same
function House() {
  const [color, setColor] = useState("red");
  const style = {
    border: `1px solid ${color}`
  };
  return (
    <div>
      <h2 style={style}>This is a {color} house</h2>
    </div>
  );
}

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

Узнать больше!

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

Как я всегда люблю повторять, практика и построение проектов помогут любому научиться чему-либо быстрее. Чтобы узнать больше о React, загляните в мой блог и Обзор серии хуков React. Серия, предназначенная для начинающих, чтобы начать знакомство с базовыми хуками React и многим другим.

Спасибо за чтение, и, если вы найдете ее полезной, поставьте лайк и поделитесь этой статьей, чтобы охватить больше пользователей. Ваше здоровье!

Эта статья изначально была опубликована в Блоге Бадди.