1: Создать-реагировать-приложение

Прежде всего, первое, о чем мы думаем, это react Инструменты для строительных лесов предоставлены официальной командой Create React App(cra)

npx create-react-app my-app
cd my-app
npm start

Вы также можете выбрать шаблон машинописного текста

npx create-react-app my-app --template typescript

Проект нулевой конфигурации, в package.json , мы видим следующие команды: Создать React App Оберните код сборки в react-scripts середина.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

Иногда нам необходимо изменить конфигурацию леса по умолчанию. Например, мы хотим изменить режим входа на несколько записей (запись веб-пакета) или позволить Create React App меньше поддерживать конфигурацию по умолчанию. ничего не могу сделать.

извлечь конфигурацию всплывающего окна

Мы можем запустить из командной строки eject Заказ

npm run eject

Всплывающее окно всех конфигураций и всех зависимостей после появления, например: Webpack, Babel, ESLint Подожди, все будут там package.json Установлен в Тогда ты сможешь config/webpack.config.js Исправлять webpack Соответствующая конфигурация.

Также доступен в package.json середина Исправлять babel、jest、eslint и другие связанные конфигурации.

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }

Если ты говоришь, ты просто хочешь Исправлять config/webpack.config.js конфигурация в , затем package.json Код станет очень многословным, просто jest Код конфигурации превышает 1 экран.

Поэтому сообщество предоставляет некоторые настраиваемые cra план,craco、react-app-rewired

настраиваемый крако

здесь с craco Например, сначала вам нужно установить @craco/craco

yarn add @craco/craco

Нам просто нужно react-script Заменить на craco

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

Затем создайте построить в корневом каталоге проекта. один craco.config.js Используется для изменения конфигурации по умолчанию.

/* craco.config.js */
module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.entry = {
        index: './src/index.js',
        other: './path/to/my/entry/file.js',
      }
      return webpackConfig
    },
  },
}

Приведенный выше код: да Исправлять webpack Для нескольких входов, craco Официальный сайт также очень понятен и предоставляет plugin режим, если вы хотите переопределить cra конфигурацию, вы можете сначала plugins Выполните поиск внутри, например, как указано выше, и дайте проекту поддержку. меньше, вы можете напрямую использовать craco-less этот плагин.

Если мы скажемверно Вы затрудняетесь с приведенной выше Конфигурацией,Я думаю, тебе нужно понять,Как создать проект построить один веб-пакет с нуля, это будет исправлено webpack Инженерия становится удобнее.

Второе: создать проект реакции webapck с нуля.

Инициализировать проект

первыйиспользовать npm init создаватьпостроить один Фронтенд-проект

mkdir my-app
cd my-app
npm init -y

Установить веб-пакет

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

• webpack — инструмент сборки внешнего интерфейса
• webpack-cli - позволять webpack поддерживать Заказ Выполнять
• webpack-dev-server - Запустите сервер в режиме развития, Исправьте код, браузер автоматически обновится.

установить на devDependencies в, поскольку это всего лишь инструменты для сборки

Установить Бабель

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

• Babel: можно конвертировать код es6 в es5,
• @babel/preset-react： позволять babel поддерживать react по умолчанию
• babel-loader：дапозволять webpack поддерживать babel погрузчик

Обновить каталог в проекте новое строительство один babel.config.js документ,Воля Установитьиз babel писатьэтотиндивидуальныйдокумент,babel Я прочитаю этот документ конфигурации утром.

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
}

Установите загрузчик CSS

webpack Не будет обрабатываться по умолчанию css документ,дляпозволять Проект можетподдерживать css, нам нужно установить style-loaderиcss-loader。

npm i -D style-loader css-loader

css-loader для разбора css документ； style-loader Пройдётиспользовать несколько <style></style>标签из形式自动把 styles Вставить в DOM середина.

Установите реакцию и реакцию-дом

npm i react react-dom

установить на dependencies середина,потому чтоreactиreact-dom это зависимость времени выполнения

построить один index.html документ

создаватьпостроить одинсуществоватьpublicОглавление,А ниже новый строй одинindex.html документ。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Application</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

новыйпостроить один index.js документ

создаватьпостроить один по имени src издокументпапка,Все исходные коды размещены в этом каталоге.,существоватьsrcОглавление下,создаватьindex.jsдокумент,Документ также означает да webpack Построен входной документ

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

создавать App компоненты

новыйпостроить один App.js документ

// ./src/App.js
import React from 'react'
import './App.css'
const App = () => {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  )
}
export default App

новыйпостроить один App.css документ

// ./src/App.css
h1 {
  color: red;
}

создавать webpack config документ

Создать здание в корневом каталоге проекта. один webpack.config.js документ,webpack.config.js да webpack Имя Конфигурационного документа по умолчанию.

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js',
    clean: true,
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
}

возобновлять package.json документ

"start": "webpack-dev-server --mode development --hot --open",
"build": "webpack --mode production"

webpack иметь 2 режимы соответственно development и production,информировать webpack использовать встроенную оптимизацию соответствующих режимов, Можно получить из CLI передано в параметрах. -hot Параметры позволяют горячее возобновление кода (изменения кода,Браузер автоматически возобновит работу),-openразрешенные параметры Webpack Помогите нам автоматически открывать окна браузера.

бегать npm run start При запуске скрипта React Программа приложения должна быть в порту 8080 начальствобегать,в это время Мы доступны локально react приложение Понятно

Настроить прокси-прокси

развиватьчас,Нужно запросить интерфейс,Интерфейс часто заполняется студентами серверной части.,接口需要通过доступ后端из IP Адрес для доступа, при прямом доступе возникнут междоменные проблемы.

Тогда мы сможем webpack.config.js Средняя конфигурация proxy。

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ],
  },
}

Теперь да /api/users Запросы будут перенаправлены на http://localhost:3000/api/users начальство.

Три: Вите

Если в вашем проекте большой объем кода или он вам надоел webpack Скорость упаковки, тогда вы можете выбрать использование vite Приходите, чтобы создать свой React приложение。

vite Используйте поддержку браузера ES Модуль для решения проблемы медленной сборки при развитии,использовать esbuild Готовые зависимости (чистые зависимости, которые не будут меняться во время разработки) JavaScript код, генерала node_modules сторонние пакеты в ).

vite Не только поддерживает vue Также поддерживает react、preact、svelte ждать фреймворк и родной js。

использовать create-vite создаватьприложение

Использовать проект Vite Creator тоже очень просто.

npm create vite@latest

Мы можем выбрать нужный нам каркас в строке Заказ.

выбиратьиспользовать JavaScript Ну давай же typescript развивать

использовать npm run dev Старт, порт развития начинается в http://127.0.0.1:5173/

vite Скорость запуска и горячего возобновления очень высока, намного больше, чем вебпак, новые проекты полностью доступны vite вместо cra。

Миграция старых проектов потребует определенных затрат.,Можетк参考我之前из文章"Воля React приложение перемещено в Vite》

Четвертое: Гэтсби

Gatsby Это не просто генератор статических веб-сайтов, это прогрессивный Web приложение Генератор. проходить Gatsby 建立из网站,Легко находит поисковые системы,И производительность рендеринга страницы очень хорошая.,Идеальное поддержка личного сайта, блога, сайта документов,Даже сайт электронной коммерции.

создавать gatsby приложение

npm init gatsby

существовать Заказ ХОРОШОсерединавыбиратьразвиватьязык,данетиспользовать CMS、данетподдерживать、md、mdx ждать

создать После завершения,существовать Заказ ХОРОШОбегать npm run dev,Открыть http://localhost:8000/ Взгляните на эффект

Открыть http://localhost:8000/___graphql бегать graphql Языковой запрос

Такие как создание постройки Один список блогов, вы можете экспортировать его прямо в код graphql Язык запросов, а затем визуализировать запрошенные данные в функции use.

import * as React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'
import Seo from '../components/seo'

const BlogPage = ({ data }) => {
  return (
    <Layout pageTitle="My Blog Posts">
      <ul>
        {data.allFile.nodes.map((node) => (
          <li key={node.name}>{node.name}</li>
        ))}
      </ul>
    </Layout>
  )
}

export const query = graphql`
  query {
    allFile {
      nodes {
        name
      }
    }
  }
`

export const Head = () => <Seo title="My Blog Posts" />

export default BlogPage

Плюсы Гэтсби:

• ✅ Отличная производительность рендеринга страниц
• ✅ SEO-оптимизирован
• ✅ верный пакетный документ оптимизирован.
• ✅ Простое развертывание в CDN (на основе отличных расширений)
• ✅ Богатая система плагинов

Недостатки Гэтсби:

• ⛔️ использовать выглядит по сравнению с CRA более сложный
• ⛔️ нужно знать GraphQL и Node.Js Соответствующие знания
• ⛔️ Тяжелая конфигурация
• ⛔️ Время сборки будет увеличиваться по мере увеличения контента.
• ⛔️Облачные услуги требуют оплаты.

Стоит подчеркнуть да,Богатый выбор системы плагинов да Gatsby такие важные, как Gatsby предлагает множество тем для блогов.,другой Например Гугл Аналитика、Сжатие изображения、предварительная загрузкаплагинждатьждать。

Пятое: Next.js

Next.js даа на основе React изСерверный фреймворк рендеринга,它提供Понятно约定式路由、Различный Метод рендеринга, статическая функция ожидания экспорта.

Метод рендеринга

• CSR - Рендеринг на стороне клиента. Это то, что мы часто говорим SPA（single page application）,использовать useEffect Получить данные интерфейса.
• SSR — рендеринг на стороне сервера
• SSG — создание статического сайта.
• ISR — инкрементальная статическая регенерация, позволяющая снова получать данные из API и генерировать статические страницы, что наиболее подходит для обычных информационных и новостных веб-сайтов.
• Server component- такжеда SSR вроде, Но дополняющий SSR Недостатком является то, что лучшая веб-страница имеет возможность потокового рендеринга.

создавать Next.js приложение

npx create-next-app@latest --ts

В своем проекте вы можете написать react компоненты,ииспользовать Next.js предоставил API Выполнение операций маршрутизации и рендеринга на стороне сервера. Например, вы можете pages Оглавление下создаватьпостроить один index.js документ, для написания компонента:

import React from 'react';

function Home() {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
    </div>
  );
}

export default Home;

Таким образом, вы сможете киспользовать в своем проекте Next.js Реализован серверный рендеринг и развитие компонентов. подробнее о Next.js из用法,Пожалуйста, обратитесь кОфициальная документация,также Можетк参考我из 《Next.js Полный стек развития на практике》 Столбец

преимущество:

• Предусмотрен рендеринг на стороне сервера, что позволяет повысить скорость загрузки первого экрана. Например, в Next.js во, могу киспользовать getServerSideProps Метод получения данных и рендеринга страницы на стороне сервера для повышения скорости загрузки первого экрана.
• поддерживает статический экспорт, можно улучшить SEO. Например, в Next.js во, могу киспользовать next export Заказать, упаковать проект как статический документ и опубликовать его на CDN В некоторых случаях поисковые системы легче сканируют страницу.
• Предоставляет решения по оптимизации ожидания разделения кода и маршрутизации.,Это может улучшить скорость загрузки и эффективность приложения. Например,существовать Next.js во, могу киспользовать dynamic Импортируйте компоненты для разделения кода;
• Доступно киспользовать next/link компоненты,Реализация перехода по клиентскому маршруту,Улучшите пользовательский опыт ожидания.

Шесть: UmiJS

Umi Будучи масштабируемой внешней средой приложений корпоративного уровня, она прямо или косвенно обслуживалась в Ant Group. 10000+ приложение,它提供Понятно路由、Управление статусами、плагинсистемаждать Функция。

создавать umi приложение

Если вы хотите быстро начать работу umijs, можете использовать его для создания строительных лесов create-umi

npx create-umi@latest

В процессе создания,Вам будет предложено выбрать шаблон,Просто выберите «Простое приложение». создать После завершения,Введите каталог проекта,Установитьполагаться：

Вы также можете выбрать ant design pro шаблони vue Шаблон, зависимости будут автоматически установлены после завершения выбора.

Наконец, запустите проект:

cd my-project
npm start

Таким образом, ваш первый umijs Проект завершен, и к нему можно получить доступ в браузере. http://localhost:8000 Посмотрите эффект.

В своем проекте вы можете написать react компоненты, например, вы можете подключить в src/pages Оглавление下создаватьпостроить один Home.js документ.

import React from 'react'

function Home() {
  return (
    <div>
      <h1>Hello, umijs!</h1>
    </div>
  )
}

export default Home

создать После завершения就Можетк Создавайте маршруты напрямую,доступ http://localhost:8000/homeстраница。Таким образом, вы сможете киспользовать в своем проекте umijs Реализация маршрутизации. Конфигурациякомпонентыразвивать. подробнее о umijs из用法,Пожалуйста, обратитесь к它издокумент

преимущество:

• Обеспечивает множество возможностей подключения,Можетк Быстрая сборкаприложение。Например,Плагин микроинтерфейса Qiankun, плагин Можеткпомощьразвиватьили быстросоздавать Микро-интерфейсприложение；плагин dvaМожеткпомощьразвиватьбыть решено с помощью Управление статусами；Плагин интернационализацииМожеткпомощьразвивать者实现多языкподдерживатьждать。
• соглашение о маршрутизации,Можеткпозволятьразвиватьсосредоточьтесь на бизнес-логике。Например,в umijs,/src/pages Документ в каталоге автоматически сгенерирует маршруты, нет необходимости вручную Конфигурация.
• Предоставляет решения по оптимизации загрузки и разделения кода по требованию.,Это может улучшить скорость загрузки и эффективность приложения.

Седьмое: Онлайн-разработка

может быть, ты устал cli создавать react приложение, потому что, когда у меня есть, я просто хочу продемонстрировать простой пример приложения, тогда https://stackblitz.com/ и https://codesandbox.io/ этот 2 Этот веб-сайт поможет вам быстро начать работу.

Если скорость доступа к двум предыдущим сайтам низкая,那么掘金изСамородки в кодетакже Можеткпомощь你создаватьсуществовать线 React 示例приложение。

Возьмите StackBlitz в качестве примера

StackBlitz да Онлайн-среда разработки, которая может помочь быстро развивать производителей, управлять обменом передовыми проектами,и且поддерживатьсотрудничестворазвивать。

StackBlitz Поддерживает несколько интерфейсных фреймворков, таких как React、Angular、Vue、Next.js、Nodejs ждет и обеспечивает автоматическую сборку、горячийвозобновлять、Функция ожидания предварительного просмотра кода.

Напримерсоздаватьпостроить один React проект:

1. Открыть StackBlitz веб-сайт и нажмите кнопку «Новый» в правом верхнем углу.
2. Во всплывающем диалоговом окне «Новый проект» выберите шаблон React, введите имя проекта и нажмите кнопку «ОК».
3. StackBlitz Автоматически создаст постройку один новый React Интерфейс редактора Project и Открыть.
4. В редакторе вы можете редактировать код и предварительно просмотреть эффект.
5. в редакторе,документ, который также можно использовать для управления проектами,И сохранить проект Исправлять.

использовать StackBlitz,развитие Нет необходимости в каком-либо программном обеспечении,Вы можете редактировать и делиться проектами онлайн.,Удобно и быстро.

StackBlitz в React Проект также даиспользовать react-scripts Всего лишь горстка Node бег находится в браузере, заинтересованные студенты могут посмотреть WebContainer представлять

краткое содержание

Мы можем легко использовать cli Приходитьсоздаватьвнешний интерфейсприложение, Те, кому нравится эторазвивать, могут больше сосредоточиться на своем деле. кначальство便дасоздавать react Общее приложение 7 Таким образом, конечно, есть и другие решения, независимо от того, какой путь создатель React проекты, все нужно понимать Node.js Базовая технология используется и знать React из基本概念,Чтобы быть правильным, используйте,Какой путь вы выберете? Добро пожаловать, чтобы оставить сообщение в области комментариев.