Вы можете найти часть 1 серии руководств здесь.

Перейдите на Github и создайте новый репозиторий.

Назовем репозиторий youtube-react. Убедитесь, что ваш репозиторий пуст при его создании (снимите флажок Инициализировать этот репозиторий с помощью файла README и не добавляйте лицензию или .gitignore файл).

Теперь запустите терминал и cd в нужное место проекта.

1.2 Приложение Scaffold с использованием приложения create-реагировать

Мы собираемся использовать терминальное приложение Facebook create-react-app для создания шаблонного проекта React. Таким образом, нам не нужно иметь дело со сложными конфигурациями Webpack или Babel.

Перейдите к своему терминалу и создайте новое React приложение, используя create-react-app.

npx create-react-app youtube-react

Создадим локальный репозиторий и подключим его к Github. Обратите внимание, что create-react-app автоматически создает файл .gitignore, поэтому вы не фиксируете и не нажимаете ./node-modules.

После этого перейдите в свою учетную запись Github и создайте новый (общедоступный) репозиторий. После этого инициализируем локальный репозиторий и подключаем его к Github вот так:

cd youtube-react
git init
git remote add origin [email protected]:<YOUR_REPO_NAME>.git
git add -A
git commit -m "initial commit"
git push -u origin master

Замените ‹YOUR_REPO_NAME› именем вашего репозитория.

Вы можете найти наш репозиторий по этому URL-адресу https://github.com/productioncoder/youtube-react.

После этого процесса у вас должно быть рабочее шаблонное React приложение и настроен контроль версий.

Бегать

yarn start

чтобы проверить, запускается ли ваше приложение React на localhost:3000.

Обратите внимание, что вы можете использовать npm и yarn взаимозаменяемо.

2. Очистка стандартного проекта

Давайте сначала избавимся от некоторого содержимого по умолчанию.

  1. Удалите файл logo.svg в каталоге src. Не забудьте удалить оператор import в файле App.js.
  2. Удалите файл App.css в каталоге src, а также удалите его импорт в файле App.js.
  3. Удалите файл index.css в каталоге src и удалите инструкцию import в index.js.

Наконец, замените содержимое метода render в App.js некоторым текстом в файле div.

import React, { Component } from 'react';

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

export default App;

После этих изменений вы не должны видеть пустую веб-страницу с текстом Hello World на ней.

3. Установите SCSS

Чтобы ваш стиль был более кратким и понятным, мы будем использовать SCSS во всем проекте.

3.1. Установить зависимости

Пожалуйста, установите модуль node-sass в свой проект, чтобы использовать SCSS.

yarn add node-sass

3.2. Использование SCSS

Мы используем SCSS для более лаконичного представления нашего стиля. Начиная с Create React App 2.0, SCSS поддерживается из коробки.

Это означает, что мы можем просто импортировать файл .scss в наши компоненты, а Create React App позаботится обо всем остальном.

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

4. Подведение итогов

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

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

Вы можете найти код этого проекта в нашем репозитории youtube-react Github.

Подпишитесь на меня в Твиттере @productioncoder, чтобы быть в курсе последних новостей. Я буду рад любым отзывам.

Если вы заинтересованы в более качественном готовом к производству контенте, введите свой адрес электронной почты ниже.

Первоначально опубликовано на сайте productioncoder.com 21 января 2019 г.