Базовые навыки Vue будут выполнены, нужно ли изучать React?

внешний интерфейс React.js
Базовые навыки Vue будут выполнены, нужно ли изучать React?

Это 12-й день моего участия в Gengwen Challenge, пожалуйста, проверьте подробности мероприятия:Обновить вызов

предисловие

Нет публикиФронтенд читы для npy

Добавляйте vx👉16639199716, тяну вас в группу~❤️

В этой колонке будут собраны знания программиста Vue об опыте и процессе первых пользователей React👍👍👍

Если вы похожи на меня, у вас такие же технические интересы и вы мечтаете попасть на большой завод, тогда выбирайте给npy的前端秘籍Это будет хороший выбор для вас, тогда я также хочу добиться прогресса и учиться вместе с вами. Без лишних слов, приступим👇

Реагировать на предисловие

Я рад, что вы можете прийти сюда, чтобы изучить технологию React.js. Это первый раздел этой рубрики. В основном он знакомит с некоторыми вопросами, которые часто задают друзья. Хотя здесь много ерунды, рекомендуется взять несколько минут, чтобы прочитать его.

Введение в реакцию

Прежде всего, его нельзя отрицать, что Regive.js является самым популярным фронт-конечным каркасом в мире (передняя структура Facebook, запущенная Facebook). Большинство интернет-компаний первого и второго уровня в Китае используют реагирование для развития, напримерАли,Мейтуан,Байду,куда,NetEase,Знай почтиТакие интернет-компании первого уровня используют React в качестве основного переднего стека технологий. Сообщество React также очень сильное, и благодаря популярности React появилось больше полезных фреймворков, таких как ReactNative и React VR. React продвигается с 2013 года, и сейчас он выпустил версию 18.x.x, которая значительно улучшила его производительность и удобство использования.

Резюме преимуществ реакции

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

  • Легко начать: Вы даже можете начать работать с React за несколько часов, но его знания обширны, и вам может потребоваться больше времени, чтобы полностью их освоить.

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

Реагировать против Vue

Это два самых популярных фреймворка во внешнем интерфейсе.Хотя React является наиболее используемым фреймворком в мире, пользователи Vue в Китае, вероятно, превзойдут React. Оба фреймворка очень хороши, поэтому они сопоставимы по технологиям и сложности.

Для этого человека, когда я получил проект, как я его выбрал? React.js немного более гибкий и удобный для совместной работы, чем Vue.js, поэтому, когда я работаю над сложными проектами или основными проектами компании, React — мой первый выбор. Vue.js имеет богатый API, который проще и быстрее реализовать, поэтому, когда команда небольшая и общение тесное, я выберу Vue, потому что он быстрее и проще в использовании. (Стоит отметить, что на самом деле Vue вполне годится и для масштабных проектов, что зависит от степени владения фреймворком. Вышеизложенное — лишь личное резюме, основанное на моих знаниях)

Чему мы научимся?

Мы изучим все основные концепции React, которые разделены на три части:

  • Написание связанных компонентов: включая синтаксис JSX, компонент, реквизит
  • Взаимодействие компонентов: включая состояние и жизненный цикл
  • Рендеринг компонентов: включая списки и ключи, условный рендеринг
  • Относится к DOM и HTML: включая обработку событий, формы.

Предварительные условия

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

Подготовка окружающей среды

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

node -v # v10.16.0

npm -v # 6.9.0

Уведомление

Пользователям Windows необходимо открыть инструмент cmd, Mac и Linux — терминал.

Если приведенная выше команда имеет выходные данные и об ошибках не сообщается, это означает, что среда Node успешно установлена. Далее мы будем использовать скаффолдинг React — Create React App (CRA для краткости) для инициализации проекта, и это также официально рекомендуемый лучший способ инициализации проекта React.

Введите следующую команду в терминале:

npx create-react-app my-todolist

Дождитесь завершения выполнения команды, затем введите следующую команду, чтобы открыть проект:

cd my-todolist && npm start

CRA автоматически откроет проект и откроет браузер

🎉🎉🎉 Поздравляем! Вы успешно создали свое первое приложение React!

Сейчас в проекте, инициализированном CRA, много ненужного контента, и нам нужно немного почистить его, чтобы приступить к следующему обучению. Сначала нажмите ctrl+c в терминале, чтобы закрыть только что запущенную среду разработки, а затем введите в терминале по очереди следующие команды:

Перейдите в каталог src

cd src

Если вы используете Mac или Linux:

rm -f *

Или, если вы используете Windows:

del *

Затем создайте файлы JS, которые мы будем использовать.
Если вы используете Mac или Linux:

touch index.js

Или вы используете Windows

type nul > index.js

Наконец, вернитесь в папку каталога проекта.

компакт диск.. На этом этапе, если вы запустите npm start в каталоге проекта терминала, будет сообщено об ошибке, потому что наш index.js не имеет содержимого, мы используем ctrl + c, чтобы закрыть сервер разработки в терминале, а затем используем редактор для откройте проект, в только что созданный index.js добавьте в файл следующий код:

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  render() {
    return <div>Hello, World</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Мы видим, что код в index.js разделен на три части.

Первый — это серия пакетов импорта: мы импортировали пакет react и назвали его React, а затем импортировали пакет react-dom и назвали его ReactDOM. Все файлы, содержащие компоненты React (которые мы рассмотрим позже), должны импортировать React в начале файла.

Затем мы определяем компонент React с именем App, который наследуется от React.Component Мы объясним содержание компонента позже.

Затем мы используем метод рендеринга ReactDOM для рендеринга только что определенного компонента приложения.Метод рендеринга получает два параметра, первый параметр — это наш компонент корневого уровня React, а второй параметр получает узел DOM, что означает, что мы будем используйте React с приложением, смонтируйте его под этим узлом DOM и отобразите в браузере.

Уведомление

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

Синтаксис JSX

Сначала давайте посмотрим наReactОдна из гордых черт --JSX. Это позволяет нам использовать синтаксис XML в коде JS для написания пользовательского интерфейса, чтобы мы могли в полной мере использовать мощные функции JS для работы с пользовательским интерфейсом.

Содержимое, возвращаемое в методе рендеринга компонента React, — это то, что компонент будет отображать. Например, наш текущий код:

render() {
    return <div>Hello, World</div>;
}

здесь<div>Hello, World</div> представляет собой фрагмент кода JSX, который в конечном итоге будет переведен Babel в следующий код JS:

React.createElement(
  'div',
  null,
  'Hello, World'
)

React.createElement() принимает три параметра:

  • Первый параметр представляет тег элемента JSX.
  • Второй параметр представляет свойства, полученные этим элементом JSX, это объект, здесь он нулевой, потому что наш div не получает никаких свойств.
  • Третий параметр представляет содержимое, обернутое элементом JSX.

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

{
  type: 'div',
  props: {
    children: 'Hello, World'
  }
};

Эти объекты называются«Реагировать на элементы». Вы можете думать о них как о описании того, что вы хотите видеть на экране. React возьмет эти объекты, использует их для построения DOM и обновит их.

Компонент App, наконец, возвращает этот код JSX, поэтому мы используем метод рендеринга ReactDOM для рендеринга компонента App, и конечным отображением на экране является содержимое «Hello, World».

Использование JSX в качестве переменной

Поскольку JSX в конечном итоге будет скомпилирован в объект JS, поэтому мы можем использовать его как объект JS, он имеет тот же статус, что и объект JS, например, его можно назначить переменной, мы модифицируем метод рендеринга в приведенном выше код следующим образом:

render() {
  const element = <div>Hello, World</div>;
  return element;
}

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

Использование переменных в JSX

Мы можем использовать фигурные скобки {} для динамической вставки значений переменных в JSX, Например, мы модифицируем метод рендеринга следующим образом:

render() {
  const content = "World";
  const element = <div>Hello, {content}</div>;
  return element;
}

Использование JSX в JSX

Мы можем включить JSX внутрь JSX, чтобы мы могли писать произвольные уровни структуры HTML:

render() {
    const element = <li>Hello, World</li>
    return (
      <div>
        <ul>
          {element}
        </ul>
      </div>
    )
  }

Добавление свойств узла в JSX Мы можем добавлять атрибуты в теги элементов так же, как в HTML, но нам нужно следовать соглашению об именовании регистра верблюдов.Например, data-index атрибута в HTML должен быть записан как dataIndex на узлах JSX.

const element = <div dataIndex="0">Hello, World</div>;

Уведомление

В JSX все атрибуты должны быть заменены именами в верблюжьем регистре. Например, onclick следует изменить на onClick. Единственная особенность — class. Поскольку class является зарезервированным словом в JS, нам нужно изменить class на className .

const element = <div className="app">Hello, World</div>;

настоящий бой

Откройте src/index.js в редакторе и внесите следующие изменения в компонент App:

class App extends React.Component {
  render() {
    const todoList = ["给npy的前端秘籍", "fyj", "天天的小迷弟", "仰望毛毛大佬"];
    return (
      <ul>
        <li>Hello, {todoList[0]}</li>
        <li>Hello, {todoList[1]}</li>
        <li>Hello, {todoList[2]}</li>
        <li>Hello, {todoList[3]}</li>
      </ul>
    );
  }
}

Как видите, мы используем const для определения константы массива todoList и используем {} в JSX для динамической интерполяции, вставляя четыре элемента массива.

намекать

Нет необходимости закрывать сервер разработки, который вы только что открыли с помощью npm start, после изменения кода содержимое в браузере будет обновлено автоматически!

Возможно, вы заметили, что мы должны вручную получить четыре значения массива, а затем один за другим, используя синтаксис {}, вставляется в JSX и окончательный рендеринг, это все еще относительно примитивно, мы упростим формулировку в спину Списки и секция ключей.

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

Суммировать

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

❤️ Всем спасибо

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

Начните свое путешествие по LeetCode

Двойной указатель LeetCode

Leet27, убери элементы

Классический алгоритм сортировки, который должны изучить фронтенд-инженеры

LeetCode20, соответствие скобкам

LeetCode7, целочисленная инверсия

Категории