Создание клона Hacker News в React (часть 2) — Что включает в себя приложение Create React?

Настройка проекта

Прежде чем приступить к сборке, давайте рассмотрим некоторые файлы, которые поставляются с приложением create response. В вашем любимом текстовом редакторе давайте посмотрим на файлы (я использую Visual Studio Code, в котором есть множество плагинов только для React).

Эта статья была первоначально опубликована в моем блоге, я был бы рад, если бы вы могли посетить меня и подписаться на мою рассылку, пока вы там, чтобы получать регулярные обновления моих новых сообщений!

Серия клонов Hacker News:

Часть 1: Что такое React?
Часть 2: Создание внутреннего устройства React-приложения
Часть 3: JSX и добавление CSS в ваше приложение React
Часть 4: Функция против компонентов на основе классов

Вы можете найти исходный код этого проекта на Github. Для каждой части есть отдельная ветвь на случай, если вы пропустили точку с запятой или квадратную скобку (что я обычно делаю, когда следую учебнику).

Структура папок

├── README.md
├── node_modules
├── package.json
├── .gitignore
├── build
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg

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

ПРОЧТИ МЕНЯ

Файл README содержит информацию о других файлах проекта. README содержит документацию о проекте, которая может включать в себя все, от установки зависимостей до запуска приложения. Если мы откроем файл README Create-React-App, мы сможем найти информацию о том, что делают различные команды npm. Эти команды npm включают такие, как npm start, которые мы использовали в предыдущей части.

node_modules

Это каталог, который содержит все зависимости проекта, которые поставляются с приложением create-react-app, а также место, где будут установлены будущие зависимости, которые будут добавлены.

Чтобы установить пакет npm, мы можем использовать команду npm install {package name}. Вы можете найти список наиболее часто используемых пакетов здесь, библиотека npm содержит тысячи чрезвычайно полезных пакетов. Большинство этих пакетов также хорошо документированы.

пакет.json

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

Давайте рассмотрим две наиболее важные части этого файла. Начиная со списка зависимостей. Список зависимостей показывает каждую установленную зависимость вместе с версией. Каждый раз, когда вы используете npm install, он будет отображаться здесь, если установка прошла успешно.

Вторым по важности разделом является раздел сценария. В этом разделе показано, что на самом деле выполняет каждая команда. Каждый отдельный элемент является псевдонимом полного скрипта. Затем каждый скрипт можно запустить с помощью префикса npm. Итак, когда мы запустили npm start, мы на самом деле запустили npm react-scripts start.

.gitignore

В файле gitignore вы указываете, какие файлы вы не хотите добавлять в свой Github. Обычно это делается для того, чтобы вы случайно не загрузили конфиденциальную информацию, такую ​​как пароли и ключи API, в общедоступные места. В нашем случае мы не хотим загружать все зависимости в систему управления версиями, мы можем использовать команду npm install для установки зависимостей из файла package.json.

общественный/

В общей папке хранятся статические файлы, являющиеся частью проекта. Он включает файл с именем index.html, который является точкой входа для нашего проекта React. Файл index.html — это довольно простой HTML-файл. Раздел, который следует отметить,

<div id="root"></div>

Это div, в который внедряются наши компоненты React, об этом позже.

источник/

Здесь будет находиться вся наша логика React. Давайте изучим этот каталог дальше.

index.js

Файл index.js — это раздел, который является родительским для всего нашего приложения, это то, что отображается в корневом div, упомянутом выше. Давайте разобьем это на разделы.

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

Импорт модулей

В React мы используем синтаксис ES6 для импорта модулей. Что соответствует структуре import alias from package. Это позволит нам использовать эти модули в наших файлах.

РеактДОМ

В импорте выше мы видим, что мы импортируем,

import ReactDOM from 'react-dom'

Пакет react-dom предоставляет методы для управления DOM. Метод рендеринга принимает два аргумента: компонент для рендеринга и контейнер или элемент, в который мы хотим рендерить компонент.

ReactDOM.render(element, container[, callback])

Вот как наш index.html заполняется компонентами React.

отчетWebVitals.js

Файл reportWebVitals — это файл, который позволяет измерять и анализировать производительность вашего приложения. Но мы не будем использовать это в нашем проекте, поэтому вы можете удалить файл, но убедитесь, что вы также удалили оператор импорта и вызов метода в index.js.

// Remove these lines from index.js
import reportWebVitals from './reportWebVitals';
reportWebVitals();

App.js

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

function App() {
  return(
  )
}
export default App;

Весь функциональный компонент представляет собой функцию javascript, которая возвращает некоторый HTML. Для нашего проекта давайте удалим часть кода, который нам не нужен. Давайте удалим все, что находится между <div className="App> </div>, а также оператор импорта логотипа. Вы должны остаться с просто. Давайте добавим привет, мир, чтобы убедиться, что он работает позже.

import './App.css';
function App() {
  return (
    <div className="App">
        <h1>Hello World</h1>
    </div>
  );
}
export default App;

Теперь вы можете удалить logo.svg , это нам тоже не понадобится.

App.css и index.css

Эти файлы представляют собой файлы CSS, внедренные как в index.js, так и в app.css. Мы можем удалить весь контент внутри них, и мы добавим их позже, когда будем строить наш проект.

App.test.js и setupTest.js

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

Наш последний шаг

Теперь давайте откроем терминал и запустим npm start в нашем каталоге, и если все вышеперечисленные шаги были выполнены, мы должны получить следующее.

Следующие шаги

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

Если вы хотите предложить мне темы для обсуждения или хотите поболтать, не стесняйтесь написать мне по электронной почте. Вы можете найти больше таких сообщений на www.colorcoder.dev. Спасибо за чтение! :)