React List - Create React App

Привет друзья, если вы считаете, что эта статья неплохая, не забудьте датьstar, друзья моиstarЭто моя мотивация продолжать обновлять!Адрес GitHub

【2019-08-16】Привет друзья, потому чтоjsliangБиблиотека документации подверглась рефакторингу, некоторые ссылки в этой статье могут быть неработоспособны, иjsliangИзвините за отсутствие сил поддерживать старые статьи на стороне Наггетс. Для тех, кому нужно получать последние статьи, щелкните адрес GitHub выше и перейдите в библиотеку документов, чтобы просмотреть скорректированные статьи.

Адрес кода статьи серии React

каталог

Чем отличается передок без закидывания от соленой рыбы?

содержание
каталог
2 Предисловие
Три установки и начальный каталог
Четыре поддержки свойств по умолчанию
Five-FiTTINTITTINT VS CODE отладки
Шесть размеров пакета анализа
Семь модулей импортируют CSS
Установка и использование Eight Sass
9 Добавить изображение, фон, SVG
Десять общих папок
10.1 Ссылки на статические ресурсы
10.2 Имитация данных
Упаковка и сегментация одиннадцати кодов
12 ссылок на TypeScript
Маршрутизатор Thirteen React — Маршрутизация
Четырнадцать пользовательских переменных среды
Пятнадцатый тест
16 Агент среды разработки
17. Используйте Ajax-запрос для получения данных
Восемнадцать Титул и Мета
19 Резюме

2 Предисловие

Create React App — это официально поддерживаемый метод создания одностраничных приложений React. Он обеспечивает современную настройку сборки с нулевой конфигурацией.

эта статьяподавляющее большинство,99%Контент из документации для Create React App,1%Договоренности от частных лиц.

использованная литература:

Создать приложение React — документация на английском языке
Создать приложение React — документация на китайском языке
Create React App - GitHub

Три установки и начальный каталог

Скачать Node.js
Установите приложение «Создать React»:
1. npm i create-react-app -g
Начать новый проект:
1. create-react-app todolist
2. cd todolist
3. npm start
Упаковка проекта:npm build

Каталог проекта:

- todolist
  + node_modules —————————— 项目依赖的第三方的包
  - public ———————————————— 共用文件
    - favicon.ico        —— 网页标签左上角小图标
    - index.html         —— 网站首页模板
    - mainfest.json      —— 提供 meta 信息给项目，并与 serviceWorker.js 相呼应，进行离线 APP 定义
  - src ——————————————————— 项目主要目录
    - App.css            —— 主组件样式
    - App.js             —— 主组件入口
    - App.test.js        —— 自动化测试文件
    - index.css          —— 全局 css 文件
    - index.js           —— 所有代码的入口
    - logo.svg           —— 页面的动态图
    - serviceWorker.js   —— PWA。帮助开发手机 APP 应用，具有缓存作用
  - .gitignore ——————————— 配置文件。git 上传的时候忽略哪些文件
  - package-lock.json ———— 锁定安装包的版本号，保证其他人在 npm i 的时候使用一致的 node 包
  - package.json ————————— node 包文件，介绍项目以及说明一些依赖包等
  - README.md ———————————— 项目介绍文件

использованная литература:Начало работы — создание документации по приложению React

Четыре функции поддержки по умолчанию

Поддерживает все современные браузеры (кроме IE 9, 10, 11, настраивайте сами, если нужно)
Экспоненциальная поддержка оператора (ES2016)
служба поддержкиasync / await (ES2017)
служба поддержкиObject Rest(остальной) /Spread(развернуть) Свойства (ES2018)
Поддержка динамическогоimport() (stage 3 proposal)
служба поддержкиClassПоля и статические свойства (часть предложения этапа 3)
Поддерживает JSX, Flow и TypeScript.
Поддержка PostCSS, нет необходимости вручную добавлять префиксы CSS, приложение Create React будет завершено автоматически
использованная литература:Поддерживаемые браузеры и функции — документация Create React App

Пять с отладкой VS Code

Приложение Create React можно отладить с помощью отладчика подключаемого модуля Visio Studio Code для Chrome:

Установить -> Отладчик для Chrome
Отладка -> Добавить конфигурацию:

{
  "version": "0.2.0",
  "configurations": [
    
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

сохранить -> начать отладку
Начните отладку, выполнив указанные выше действия.

Использованная литература:Отладка приложений React с помощью VSCode Develop Paper

Шесть размеров пакета анализа

Анализируйте пакеты JavaScript с помощью исходных карт.

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

Установить:npm i source-map-explorer -S
Измените package.json:

"scripts": {
  "analyze": "source-map-explorer build/static/js/main.*",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
}

анализировать:npm run build
анализировать:npm run analyze

Использованная литература:Как проанализировать размер пакета в приложении React? - короткая книга

Семь модулей импортируют CSS

В приложении Create React, если вашreact-scriptsЕсли версия 2.0 или выше, вы можете импортировать стили как модули:

import React, { Component } from 'react';
import styles from './Button.module.css'; // 将 css modules 文件导入为 styles
import './another-stylesheet.css'; // 导入常规 CSS 文件

class Button extends Component {
  render() {
    // 作为 js 对象引用
    return <button className={styles.error}>Error Button</button>;
  }
}

Это не вызовет конфликтов стилей, как если бы вы импортировали JS.

Использованная литература:Добавление таблиц стилей модулей CSS — Документация по созданию приложения React

Установка и использование Eight Sass

Установитьnode-sass:npm i node-sass -S
Представлять:@import 'styles/_colors.scss'; // 假设 styles 目录在 src/ 目录下

использованная литература:Добавление таблиц стилей Sass — Документация по созданию приложения React

9 Добавить изображение, фон, SVG

Добавить изображение: черезimportВведение.

import React from 'react';
import logo from './logo.png'; // 告诉 Webpack 这个 JS 文件使用了这个图片

console.log(logo); // /logo.84287d09.png

function Header() {
  // 导入结果是图片的 URL 
  return <img src={logo} alt="Logo" />;
}

export default Header;

Фон цитаты: ВиаurlПросто процитируйте.

.logo {
  background-image: url(./logo.png);
}

Цитирую СВГ:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

или:

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* ReactComponent 导入名称是特殊的 */}
    {/* Logo 是一个实际的 React 组件 */}
    <Logo />
  </div>
);

использованная литература:Добавление изображений, шрифтов и файлов — Документация по созданию приложения React

Десять общих папок

В проекте, созданном приложением Create React, есть общая папка, в которой обычно есть:

favicon.ico — небольшие теги для веб-страниц
index.html — домашняя страница проекта
manifest.json — предоставляет метаинформацию для проекта и повторяет serviceWorker.js для определения автономного приложения.

Конечно, он может не только иметь эти файлы, но и добавлять контент.

10.1 Ссылки на статические ресурсы

index.html может ссылаться на статические ресурсы.

Статические ресурсы, указанные в index.html, не будут упакованы Webpack, а будут скопированы в каталог упаковки с использованием метода:

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

просто добавь%PUBLIC_URL%/Указывает, что вы можете ссылаться на ресурсы в разделе public.

В JavaScript:

render() {
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

Это также будет ссылаться на общедоступные ресурсы, позволяя изображениюНе будет запакован Webpack. Конечно, затраты, которыми нужно пожертвовать, это:

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

10.2 Имитация данных

Далее, поскольку он содержит Node.js, вы также можете использовать эти аналоговые данные (Mock), потренируйтесь:

Создайте новый каталог API в общей папке, а затем создайте файл headerList.json, после ссылки на axios пройдите:axios.get('/api/headerList.json').then()Вы можете вызвать файл для Mock.

использованная литература:Использование общей папки — Документация по созданию приложения React

Упаковка и сегментация одиннадцати кодов

В Create React App мы можем использовать React Loadable для разделения кода.

Как использовать:

import Loadable from 'react-loadable';

const LoadableOtherComponent = Loadable({
  loader: () => import('./OtherComponent'),
  loading: () => <div>Loading...</div>,
});

const MyComponent = () => (
  <LoadableOtherComponent/>
);

использованная литература:

Code-Splitting - GitHub
react-loadable - GitHub
Code Splitting in Create React App

12 ссылок на TypeScript

Запустите новый проект Create React App с помощью TypeScript:npx create-react-app my-app --typescript
Добавьте TypeScript в существующий проект Create React App:npm i typescript @types/node @types/react @types/react-dom @types/jest -S. (Не забудьте изменить все файлы JS на файлы TS, например.src/index.js -> src/index.tsx)

использованная литература:Добавление TypeScript — документация по созданию приложения React

Маршрутизатор Thirteen React — Маршрутизация

Поскольку приложение Create React не указывает решение для маршрутизации, а самым популярным решением для маршрутизации на рынке является React Router, вы можете попробовать использовать:

Установить:npm i react-router-dom -S
использовать:React Router

Четырнадцать пользовательских переменных среды

Определите переменные среды:process.env.REACT_APP_SECRET_CODE
Получите специальные встроенные переменные среды:process.env.NODE_ENV. Значение:test,development,production. Соответствует трем средам.

render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} />
      </form>
    </div>
  );
}

В среде разработки страница отображается как:

<div>
  <small>You are running this application in <b>development</b> mode.</small>
  <form>
    <input type="hidden" value="abcdef" />
  </form>
</div>

15 тест

Приложение Create React использует Jest в качестве средства запуска тестов.

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

использованная литература:

Запуск тестов — создание документации по приложению React
Отладка тестов — создание документации по приложению React

16 Агент среды разработки

В процессе разработки проекта больше всего настораживает то, что браузер говорит вам, что он кроссдоменный:Серверный порт находится на 4000, или хост находится на другом IP-адресе...

Итак, нам нужно настроить прокси в среде разработки.

Добавьте поля в package.json:

  "proxy": "http://localhost:4000",

Таким образом, когда вы вызываете интерфейс:fetch('/api/todos'), он запросит прокси дляhttp://localhost:4000/api/todos.

Конечно, это возможноproxyНе достаточно гибкие, маленькие друзья могут попытаться напрямую получить доступ к экспрессу, а подключение брокерские промежуточные программы, подробности см. Реф.

использованная литература:

Проксирование запросов API в среде разработки — Документация по созданию приложения React
Настройка прокси-сервера вручную — документация по созданию приложения React

17. Используйте Ajax-запрос для получения данных

В Create React App есть два способа получить данные Ajax:

fetch() API
axiosбиблиотека

Конечно, нет предела тому, чтобы мертвые использовали оба.

Эти два способа вызова запроса Ajax для получения данных удобны тем, что они возвращают данные вызова цепочки поставок Promise.

использованная литература:Получение данных с помощью запросов AJAX — Документация по созданию приложения React

Восемнадцать Титул и Мета

Динамически обновлять заголовок:document.title API
Измените заголовок на основе реактивный компонент:React Helmetи другие сторонние библиотеки
Динамически обновлять мета:

<!doctype html>
<html lang="en">
  <head>
    <meta property="og:title" content="__OG_TITLE__">
    <meta property="og:description" content="__OG_DESCRIPTION__">
  </head>

  <body>
  
  </body>
</html>

затем прочитайте index.html и поместите__OG_TITLE__а также__OG_DESCRIPTION__Просто замените его.

использованная литература:Заголовок и метатеги — Документация по созданию приложения React

19 Резюме

О копировании приложения Create React:

это необходимо? Это нужно и не нужно.

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

В этом нет необходимости, потому что большинство из них запрашиваются в китайских/английских документах приложения Create React, поэтому некоторые друзья могут быть ниже ** .

whatever, just record.

О начальном обучении:

Вчера друг из группы WeChat спросил, купил ли он видео реконструкции TS Axios MOOC.
Вчера небольшой партнер по продаже билетов порекомендовал видео с анализом исходного кода Koa.

Можно лишь сказать, что у каждого своя аранжировка.

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

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

оjsliang:

Ознакомьтесь с официальной документацией React и окружающих его технологий.
Реализуйте свои собственные проекты
Следите за проектом компании для множества учений
Дальнейшее изучение исходного кода React
Алгоритмы обучения и структуры данных
Помимо...