Вы можете найти часть 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. Очистка стандартного проекта
Давайте сначала избавимся от некоторого содержимого по умолчанию.
- Удалите файл
logo.svg
в каталогеsrc
. Не забудьте удалить операторimport
в файлеApp.js
. - Удалите файл
App.css
в каталогеsrc
, а также удалите его импорт в файлеApp.js
. - Удалите файл
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 г.