Что такое React JS?
React JS — это библиотека JavaScript с открытым исходным кодом, которая используется для создания пользовательского интерфейса (внешнего интерфейса) специально для одностраничного приложения.
Она создана. для обработки уровня представления, который также известен как V (представление) в архитектуре MVC.
Архитектура MVC (Model-View-Controller).
M — как приложение ведет себя с данными
V — все, что видно пользователю
C — кодирование, которое будет действовать как мост между (M )модель и (V)вид
Почему React JS?
Если вы создаете большое веб-приложение, в котором данные часто меняются, и изменения данных происходят без перезагрузки страницы.
При изменении данных пользовательский интерфейс должен иметь возможность обновляться и отражать изменения.
Полезная функция React
1. Бесплатная библиотека с открытым исходным кодом
2. Она использует рендеринг/связь на стороне сервера.
3. Используемый поток данных является однонаправленным/однонаправленным потоком
4. Облегченный DOM, т.е. виртуальный DOM для лучшего производительность
5. Библиотека Flux упрощает управление данными во всем приложении
6. React использует декларативный подход для описания пользовательского интерфейса.
Преимущество использования React
1. React использует облегченное виртуальное представление фактического DOM, т. е. виртуальный DOM (JS-объект), ускоряет процесс и повышает производительность приложения.
2. Может использоваться с другими фреймворками, поскольку это всего лишь уровень представления
3. Многоразовое использование компонент.
4. Благодаря JSX повышается читаемость кода
5. Тест пользовательского интерфейса можно легко написать с помощью React JS.
Недостатки использования React
Он создан для обработки уровня представления, также известного как V (представление) в архитектуре MVC, из-за которого разработчику приходится зависеть от нескольких других библиотек и технологий для получить полный набор инструментов для разработки, которая требует времени.
Предварительное требование:
базовые знания HTML и JavaScript.
Настройка
Сначала мы должны установить Node.js.
Node Js — это среда выполнения JavaScript, которая помогает нам компилировать код React, поскольку браузеры могут читать только план JavaScript.
Теперь, используя терминал в Mac и командную строку в Window, мы можем перейти к настройке.
Чтобы убедиться, что узел js установлен в вашей системе, введите cmd: npm node -v
Это покажет вам версию узла, установленную в вашей системе.
Если это не так, то вы можете скачать его отсюда https://nodejs.org/en/
Как только вы закончите настройку Node js, мы готовы к React JS.
Facebook выпустил утилиту create-react-app, которая скрыла сложности настройки React.
Чтобы понять, что происходит внутри установки, вы можете выполнить шаги по созданию собственной среды разработки React с нуля.
Давайте начнем
Создайте каталог ReactSetup
mkdir ReactSetup cd ReactSetup
Теперь инициализируйте проект React с помощью
npm init
Это задаст вопрос, если вы хотите пропустить этот вопрос, вы можете использовать npm init -y вместо npm init.
Теперь у нас есть файл package.json в нашем каталоге.
Установите инструменты реагирования и другие зависимости для использования команды npm в каталоге вашего проекта.
npm install react react-dom –save
react — это библиотека, которая используется для определения компонентов реакции
react-dom — это библиотека, которая создает DOM, который эквивалентен Web DOM.
После запуска этой команды вы можете увидеть изменения в файле package.json, которые отражают добавление новых зависимостей.
Мы добавляем еще несколько зависимостей в наш проект и обсудим все позже.
npm install babel-preset-es2015 webpack webpack-cli webpack-dev-server babel-core babel-loader babel-plugin-transform-class-properties babel-preset-env babel-preset-react html-webpack-plugin — save
Webpack — это зависимость от разработчиков, которая поможет нам перенести наши активы в один файл со всеми зависимостями и связать вывод с нашим общедоступным html-файлом.
webpack-cli предназначен для использования webpack в командной строке.
webpack-dev-sever помогает нам чтобы скомпилировать наш код и сервер на локальном хосте: 8080, а также поможет перезагрузить нашу веб-страницу в реальном времени.
После добавления всех зависимостей файл webpack.config.js в корневой каталог проекта.
Этот файл содержит пять разделов.
1. Вход: он использует веб-пакет в качестве зависимости и устанавливает точку входа модуля в index.js.
entry: ‘./src/index.js’,
index.js является отправной точкой для всех скриптов.
2. Вывод: указать веб-пакету, куда поместить перенесенные пакеты.
output: {
path: path.join(__dirname, ‘/bundle’),
filename: ‘index_bundle.js’,
publicPath: ‘/'
},
Path — это встроенный модуль nodeJS.
Он предоставляет утилиты для работы с путями к файлам и другим каталогам.
3. devServer: указывает адрес сервера.
devServer: {
inline: true,
port: 8080
},
4. Модуль: набор загрузчиков, таких как загрузчик файлов, загрузчик css и загрузчик sass, соответственно, в зависимости от наших потребностей.
module:{
rules:[{
exclude: /node_modules/,
test: /\.js$/,
loader: ‘babel-loader’
}]
},
5. Плагины: набор плагинов, которые помогают решить другую задачу.
plugins:[
new HtmlWebpackPlugin({
template: ‘./index.html’
})
]
Следующим шагом является создание отдельного файла с именем .babelrc, чтобы указать параметр для загрузчика babel.
Когда вы указываете, что используете babel-loader в конфигурации вашего веб-пакета, он будет искать файл .babelrc в каталоге вашего проекта.
{
“presets”: [“env”, “react”]
}
Браузер может только читать объект JS, но JSX не является обычным объектом JS. Таким образом, чтобы браузер мог читать JSX, нам нужно передать файл JSX в объект JS с помощью преобразователя JSX, такого как webpack и bable.
Webpack и bable берут все файлы компонентов, объединяют их в один файл и делают доступными в index_bundle.js.
Создать файл index.html
<html>
<head>
<title>React</title>
</head>
<body>
<div id = “app”></div>
<script src = ‘index_bundle.js’></script>
</body>
</html>
Здесь мы добавили наш элемент section с id="app".
Это точка входа для нашего приложения, где будет отображаться весь наш реагирующий компонент.
Сценарий index_bundle.js будет создан с использованием веб-пакета, который будет содержать весь наш код реагирования, включая библиотеку реагирования.
Приложение React состоит из множества различных компонентов. Когда мы пишем реагирующий код, мы пишем отдельный компонент или представление.
Компонент означает фрагмент кода JS-функции или объекта, который возвращает что-то вроде HTML.
Создайте файл index.js в каталоге src и напишите простой компонент React.
Import React from ‘react’; Import ReactDOM from ‘react-dom’;
"react" и "react-dom" — это модули JavaScript.
Модули JavaScript заключают в себе идею о том, что весь код, который мы пишем в отдельных файлах, является syload или отделен от другого кода, который мы пишем, и другой библиотеки, которую мы установили в нашем проекте.
Syload означает, что мы можем ссылаться на переменную другого класса.
React и ReactDOM — это переменные библиотек «react» и «react-DOM».
ReactDOM используется для взаимодействия с реальным DOM, в то время как React используется для создания и управления нашими компонентами.
Const App = () => {
return(
<div>
<h1>React Setup is done.</h1>
</div>
);}
ReactDOM.render(<App />, document.getElementById(‘app’));
ReactDOM.render означает визуализацию компонента React в узле DOM.
означает получение сгенерированного HTML этого компонента и размещение его на странице (в DOM).
Он принимает два аргумента:
Первый аргумент: компонент, который вы хотите отобразить,
Второй аргумент: document.getElementById — это ссылочный адрес узла для DOM, где на DOM вы хотите визуализировать свой компонент.
В приведенном выше коде мы сообщаем React, что наш компонент приложения находит этот ‹div› с идентификатором «app», а затем визуализирует этот компонент ‹App /› в этот ‹div›
Теперь все, что осталось, это запустить, а для запуска нашего приложения нам нужно настроить сервер разработки, чтобы мы могли запустить его, набрав npm run start .
В файле package.json убедитесь, что ваша переменная scripts соответствует этому параметру.
“scripts”: {
“start”: “webpack-dev-server — mode development — open — hot”
},
Введите npm run start в терминале или в командной строке.
Компиляция займет несколько секунд. Теперь вы можете увидеть свой проект на localhost:8080.
Я надеюсь, что вы достаточно хорошо следите за новостями.
Не стесняйтесь комментировать любое обсуждение или любой шаг, который пошёл не так.
Знать больше:
Спасибо, что прочитали это. Ты крут 🤘
