Это базовое вводное руководство по библиотеке React Js. Если вы тот, кто задумывался о погружении в ReactJs, эта статья может стать основным руководством по React. Это никоим образом не является исчерпывающим, но содержит введение в наиболее важные концепции, необходимые для новичка, и детали установки с использованием различных методов.
Итак, приступим!
Что такое React?
React - это библиотека с открытым исходным кодом, созданная Facebook. Это не каркас.
React используется для создания интерактивного пользовательского интерфейса.
В React мы создаем компоненты, которые представляют собой настраиваемые многоразовые HTML-элементы, которые можно использовать для эффективного и быстрого создания пользовательского интерфейса.
React также предоставляет способ управлять хранением и обработкой данных с помощью state и props.
Установка и установка
Метод 1. Использование CDN
Шаги -
- Создайте HTML-файл.
2. Загрузите в голову три CDN - React, ReactDOM, Babel.
(i) React - API верхнего уровня React.
(ii) ReactDOM - предоставляет методы, специфичные для DOM.
(iii) Babel - компилятор javascript, который преобразует код ES6 + в простой старый код javascript ES5, который может работать в любом браузере.
3. Создайте тег div с id = «root», где наш компонент будет отображаться в пользовательском интерфейсе.
4. Создайте тег скрипта после body и определите type = «text / babel» (обязательно для использования Babel.
5. Создайте компонент с именем App, который является наследником класса React.Component. Компонент можно понимать как слабо связанный блок, который содержит как логику, так и разметку.
6. Определите метод render (), который будет отображать узлы DOM. render () - это метод, который принимает входные данные и возвращает то, что необходимо отобразить.
7. Оператор return внутри функции render () возвращает данные для отображения в формате JSX.
Что такое JSX?
JSX - это синтаксическое расширение Javascript. Это синтаксис тега, который не является ни строкой, ни HTML. Он создает «элементы» React.
Элементы React - это простые объекты javascript. Элементы React неизменяемы. Единственный способ обновить пользовательский интерфейс при использовании React - создать новый элемент и передать его методу ReactDOM.render () для отображения измененного состояния. В jsx любое допустимое выражение javascript заключено в фигурные скобки. React DOM обязательно обновляет DOM.
8. Затем мы передаем вновь созданный элемент ‹App /› методу ReactDOM.render () вместе с document.getElementById («root»), чтобы определить точку входа.
Откройте файл index.html в браузере, чтобы увидеть «Hello World!» рендеринг через наш недавно созданный элемент React.
Посмотрите код, который вошел в index.html, ниже:
Метод 2. Создайте приложение React
Использование метода 1 - не очень эффективный способ, потому что в первом методе код, который мы пишем, не сразу выполняется браузером. Вместо этого JSX сначала преобразуется в код Javascript, чтобы браузеры могли его поддерживать. Затем браузеры выполняют код. Вместо этого, если мы будем использовать скомпилированную версию, браузеры смогут выполнить код мгновенно.
Итак, JSX сначала компилируется в Javascript, который затем преобразуется в минимизированный Javascript путем выполнения оптимизации кода, который затем передается в браузер клиента для выполнения, что позволяет сэкономить много ресурсов и время выполнения.
Решением является использование Create-React-App. В этом случае нет необходимости устанавливать такие инструменты, как Webpack или Babel, и можно напрямую сосредоточиться на приложении, а не на конфигурации. Все предварительно настроено для создания реагирующего приложения.
Create React App создает живой сервер разработки, компилирует JSX, обеспечивает поддержку модулей CSS и SASS, обеспечивает поддержку тестирования с использованием Jest.
Давайте начнем с шагов-
- Создайте проект: mkdir reactBasics.
- Выполните эту команду из родительской папки: npx create-response-app reactBasics
- После завершения установки перейдите в каталог responseBasics: cd reactBasics.
- Чтобы запустить приложение в режиме разработки, используйте команду: npm start.
- Откройте http: // localhost: 3000, чтобы увидеть приложение React в действии. Эта страница автоматически перезагрузится, если будут внесены какие-либо изменения. Ошибки сборки и предупреждения о ворсинах можно увидеть в консоли.
Внутри структуры проекта есть две важные папки - public и src. общедоступная папка состоит из index.html, который обслуживает содержимое. Мы собираемся использовать div с id = «root» в этом index.html, который будет нашей точкой входа для React.
src - это папка, содержащая код React. Начнем с удаления всех файлов из папки src. Я собираюсь сохранить index.js и создать три новых файла: App.js, Fun.js и Welcome.js.
- index.js - он будет использоваться для рендеринга нашего вновь созданного тега ‹App /›. Мы экспортируем компонент App и загружаем его в index.js.
- App.js - это наш компонент, который также будет использоваться в качестве агрегатора для нескольких компонентов React.
- Welcome.js - второй компонент реакции.
- Fun.js - Третий компонент реакции.
Начнем с удаления всего кода из index.js. Импортируйте React, {Component}, ReactDOM, index.css и приложение из папки компонентов. Мы будем использовать метод ReactDOM.render () с вновь созданным тегом ‹App /›, который будет отображаться в элементе div, id = «root».
Компонент Welcome.js будет компонентом на основе классов. Импортируйте React и создайте класс Fun, который расширяется от класса Component. Внутри класса мы будем использовать метод render () класса Component для возврата JSX, который будет отображаться в браузере. В конце концов, мы просто экспортируем компонент.
В компоненте Fun.js мы будем использовать функциональный компонентный подход. Импортируйте React и создайте функцию Fun (), которая возвращает JSX. В конце концов, экспортируйте Fun.
В компонент App.js мы импортируем React и оба компонента - Welcome и Fun. Создайте класс App () и верните jsx, который имеет тег h1, тег приветствия и тег Fun. В конце концов, экспортируйте это.
Когда вы обновите страницу на localhost: 3000, вы должны увидеть что-то вроде этого - Наше первое приложение React.
Вы можете установить React dev tools для Chrome и перейти на вкладку Компоненты после проверки страницы. Вы увидите наш компонент приложения, состоящий из двух компонентов - Welcome и Fun, как показано ниже. Это очень удобный инструмент при работе с React, поэтому не забудьте попробовать.
Метод 3 - Использование Webpack и Babel
Давайте сначала разберемся, что такое Webpack и Babel.
Webpack
Webpack - это сборщик модулей javascript с открытым исходным кодом, в котором модули являются независимыми повторно используемыми файлами или фрагментами кода. Он берет приложение, сопоставляет модули с его зависимостями и генерирует один или несколько пакетов. Он обрабатывает все файлы и ресурсы (шрифты, изображения и т. Д.) Как модули. Под капотом он создает граф зависимостей, который описывает, как модули связаны друг с другом, с помощью операторов require и import в правильном порядке. Он просто объединяет все в правильном порядке для создания файла javascript, который затем может быть включен в файл html для выполнения.
Вавилон
Babel - это компилятор javascript. Babel - это инструмент, который используется для преобразования кода сценария ECMA 2015+ в обратно совместимый код для выполнения в текущих и более старых версиях браузеров или сред.
Теперь посмотрим на реализацию с использованием Webpack и Babel.
Шаг 1. Создайте новый каталог «webpack-response-app» и перейдите в него.
Шаг 2. Инициализируйте новый проект, используя: npm init -y, чтобы создать файл package.json.
Шаг 3. Установите react и react-dom, используя: npm i react-dom
Шаг 4. Установите webpack, webpack-cli, webpack-dev-server и html-webpack-plugin с помощью npm i - save-dev webpack webpack-cli webpack-dev-server html-webpack -плагин
webpack-dev-server - используется для перезагрузки в реальном времени. Используется только в среде разработки.
webpack-cli - предоставляет набор команд для настройки собственного проекта webpack.
html-webpack-plugin - используется для создания файлов HTML для обслуживания пакетов веб-пакетов.
Шаг 5. Установите babel с его пресетами и плагинами, используя npm i - save-dev @ babel / core @ babel / preset-env @ babel / preset-react babel-loader
babel / core- основная функциональность babel,
babel / preset-env- - это предустановка, которая позволяет вам использовать последнюю версию JavaScript без необходимости микроуправления синтаксисом. трансформации необходимы вашей целевой среде (средам).
babel / preset-react - используется предварительная установка для реакции,
babel-loader- с помощью webpack для преобразования Modern JS в код JS, понятный браузерам.
Шаг 6. Установите style-loader, css-loader и file-loader для стилей и изображений. Используйте npm i - save-dev style-loader css-loader file-loader
Поскольку webpack понимает javascript, мы должны преобразовывать стили и изображения в javascript с помощью этих загрузчиков.
Шаг 7. Создайте файл конфигурации babel .babelrc с помощью nano .babelrc.
Это открывает редактор, в котором вам нужно скопировать приведенный ниже код, тем самым позволяя webpack использовать следующие два пресета.
{«Пресеты»: [«@ babel / preset-env», «@ babel / preset-react»]}
Шаг 8 - Настройка каталогов и файлов для проекта. Создайте два каталога: public и src. Создайте файл index.html внутри общедоступной папки и наш входной файл index.js внутри папки src. Также создайте файл App.js внутри папки src.
Шаг 9 - Настройка файла конфигурации webpack webpack.config.js
Создайте файл webpack.config.js внутри папки проекта и скопируйте приведенный ниже код.
запись: запись определяет точку входа для приложения, с которого начинается выполнение, и веб-пакет, с которого начинается объединение.
output: output описывает целевой каталог для файлов вывода. Должен быть абсолютным путем.
devServer: объект, у которого есть набор параметров, которые выбираются webpack-dev-server и могут использоваться для изменения его поведения различными способами. . Мы использовали простой пример, который gzip и обслуживает все из нашего каталога dist / в корне проекта.
modules: этот объект определяет, как будут обрабатываться различные типы модулей в нашем проекте. Он состоит из массива объектов rules, который использует регулярное выражение для сопоставления имен файлов с расширением .js и .css и использует рекомендуемый загрузчик для таких файлов.
режим: для определения режима разработки.
плагины: плагины используются для настройки процесса сборки веб-пакета. html-webpack-plugin будет использовать ваш настраиваемый файл index.html, который будет отображаться с помощью webpack-dev-server.
Шаг 10. Создайте компонент реакции App.js и визуализируйте простые элементы h1 и h2.
Шаг 11. Импортируйте App.js в index.js и отобразите его в элементе с id = root в файле public / index.html.
Шаг 12 - Создайте элемент div с id = ”root” в файле public / index.html.
Шаг 13 - Добавьте в скрипты в package.json следующее -
«start»: «webpack-dev-server», «production»: «webpack»
Теперь вы можно запустить приложение, выполнив команду: npm run start и вуаля, ваше приложение запущено !!!
Надеюсь, вы что-то узнали из статьи. Об этом можно еще много сказать, поэтому я могу добавить дополнительную информацию, когда у меня будет свободное время. Не стесняйтесь задавать вопросы, если вы с чем-то боретесь, я люблю помогать! 💕
