Рубрики
Без рубрики

Настройка реагирования проекта с нуля

Create-React-App – отличный инструмент для начала работы с реагированием, он дает нам все, что нам нужно изначально … Помечено с помощью реакции, JavaScript.

Create-raction-app Это отличный инструмент для начала реакции, он дает нам все, что нам нужно изначально для изучения реагирования, взломать некоторые вещи вместе или даже начать новый проект.

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

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

Итак, давайте получим начал

Первый: Создать папку проекта

Создайте каталог проекта, он может быть где угодно. Я лично люблю держать все в одном месте, для меня это ~/REPOS/... Отказ

mkdir react-from-scratch && cd $_

Следующий: Инициализировать проект с NPM

npm init -y
  • -Я Флаг, чтобы создать по умолчанию Package.json. Если мы не предоставим этот флаг NPM INIT. Тогда он откроет анкету CLI. Мы можем прочитать больше об этом здесь

Теперь у нас есть каталог для проведения кода для нашего проекта.

Следующий: Установить React и React-Dom

  • реагировать : Это содержит только функциональные возможности, необходимые для определения компонентов реагирования. Мы можем найти больше на этом здесь
  • React-Dom : Это служит точкой входа в DOM. Мы можем найти больше на этом здесь

Давайте получим их сейчас:

npm install react react-dom -S
  • -S (Альтернатива как --save ), чтобы сохранить его как зависимости. Нам не нужно предоставлять этот флаг, это там по умолчанию. Но приятно знать, что это там.

Следующий: Установите Babel и требуемые плагины

Бабел Давайте попробуем использовать новые функции JavaScript (ES2015 +). Таким образом, Babel в основном JavaScript Transpiler, который позволяет нам писать новый/современный JavaScript, который будет транслирован/преобразован в обратную версию для совместимости JavaScript или широко поддерживаемой JavaScript.

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

Нам также потребуется установить Babel Core ( @ Babel/Core ), который имеет основную функциональность Вавила.

Давайте получим их сейчас:

npm i -D @babel/preset-react @babel/core
  • -D (Альтернатива как --save-dev ), чтобы сохранить его как зависимости Dev.

Примечание: Посмотреть на @ Babel/Preset-Env Что позволяет нам использовать новейший JavaScript, не требуя микроуправления, которые синтаксические преобразования необходимы нашими целевыми средами (ыми). Но для этой демонстрации мы конкретно не ориентированы на любые среды, мы должны быть хорошими, чтобы продолжить, и нам не нужно его устанавливать. Мы можем прочитать больше здесь

Следующий: Установите Babel Loader

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

npm i -D babel-loader

Следующий: Настроить бабел

В корневой папке нашего каталога создайте файл под названием .babelrc. и добавьте контент ниже к нему. Здесь мы в основном говорите Babel использовать эту конфигурацию во время транспортировки.

{
  "presets":[
    "@babel/preset-react"
  ]
}

Следующий: Установите WebPack, WebPack CLI (инструмент, используемый для запуска WebPack в командной строке) и WebPack Dev Server.

  • WebPack : Это модуль JavaScript Bundler. Мы можем прочитать больше здесь
  • WebPack-Cli : Требуется для запуска проекта от терминала.
  • webpack-dev-server : Это будет использоваться для обслуживания нашего контента.

Давайте получим их сейчас:

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

Следующий: Установите htmlwebpackplugin.

Это упрощает создание HTML-файлов для обслуживания наших связке WebPack. Мы можем либо позволить плагину генерировать HTML-файл для нас или поставлять наш собственный шаблон.

Плагин будет генерировать файл HTML5 для нас, который включает в себя все наши пакеты WebPack в корпусе, используя теги скрипта. Мы можем прочитать больше об этом здесь

npm i -D html-webpack-plugin

Теперь нам все еще нужно создавать webpack.config.js Для конфигурации WebPack. Но чтобы понять это более четко сначала мы напишем наш компонент и получим наш HTML.

На данный момент структура папки нашего проекта должна выглядеть так:

.
├── node_modules
├── package.json
├── .babelrc

И, package.json должен выглядеть так:

{
  "name": "react-from-scratch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "Ravi Ojha",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.1",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

Следующий: Создание каталога и файлов для проекта

В корневой папке проекта Создайте пару файлов, добавьте содержимое, как указано ниже:

mkdir src && cd $_
touch index.js App.js index.html

Index.html.





  
  
  React App From Scratch

Примечание:

  1. У нас нет ?|

Оригинал: “https://dev.to/raviojha/setting-up-react-project-from-scratch-1g3k”

Читайте ещё по теме: