Давайте установим сцену. Вы начинаете свой новый путь, называемый веб-разработчиком, и знаете HTML и CSS. Вы слышали об этой штуке под названием React, которую используют каждый разработчик и их мать. Но что это такое и как начать им пользоваться сегодня?
React - это среда пользовательского интерфейса Javascript. Он стал самым популярным из всех других фреймворков JS UI из-за его высокой производительности, простоты использования и способности обрабатывать данные. Это также делает вас лучшим разработчиком Javascript, потому что заставляет писать код JavaScript, а не собственный проприетарный тарабарщину, такую как reactDoMagic.
Есть несколько способов начать использовать React в своем веб-приложении, которые я вам покажу, и вы сможете выбрать все, что вам нравится.
Вариант 1. В стиле гетто
Я люблю называть то, что делается быстро и грязно, гетто, и это именно то, что мы будем делать сейчас, чтобы начать. Вставьте эти теги сценария перед тегом тела любой вашей html-страницы.
<script src=”https://unpkg.com/react@15/dist/react.min.js"></script> <script src=”https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
Сказал вам, что это был путь гетто! Очевидно, что это не лучший способ использовать реакцию в вашем веб-приложении, но если вы хотите начать дурачиться с библиотекой реакции, нет более быстрого и грязного 🤐 способа.
Вариант 2. Используйте NPM
Если вы готовы серьезно относиться к добавлению реакции на веб-проект, используйте NPM и потребуйте его как зависимость. Чтобы отреагировать на ваш проект, нужно гораздо больше, чем просто потребовать от него зависимости с использованием NPM, поэтому я создал репозиторий на github, который включает все, что вам нужно для запуска этого шоу.
После того, как вы клонировали это репо на свой компьютер
git clone [email protected]:a0r1an/React-Starter-Template.git
Используя свой терминал, введите npm install
После завершения установки всех модулей вы можете просто ввести npm run start. Это запустит локальный сервер и запустит ваше новое веб-приложение. Репо использует webpack для объединения всех ваших модулей, а затем запускает связанный код через babel, который выполняет некоторую компиляцию, чтобы заставить ваш код работать в нужных вам браузерах. Смотрим на вас Internet Explorer!
Вариант 3. Создайте приложение React
Давайте сделаем небольшой урок истории! Вначале у нас были HTML, CSS и Flash. Затем JavaScript стал большим. Чем больше он становился, тем сложнее становилась веб-разработка. Разработчики жаловались на усталость от JS и на то, сколько стоит даже запустить проект. То же самое относится и к реакции. Как я уже сказал, требуется много времени на настройку, прежде чем вы действительно сможете увидеть преимущества использования такой библиотеки, как react. Вам понадобится Node.js, NPM, сборщик модулей, например webpack. Не говоря уже о других библиотеках, необходимых для создания вашего веб-приложения. К счастью, сообщество веб-разработчиков может делать большие вещи, и некоторые разработчики объединились и решили создать инструмент, который упростит разработку приложений для реагирования и займет меньше времени. Таким образом, у нас есть приложение Create response. Https://github.com/facebookincubator/create-react-app
Его поддерживают создатели react, и это гораздо более надежный стартовый шаблон, чем мой стартовый шаблон rinky dink. Процесс настройки для него аналогичен моему проекту. Выполните следующие команды в своем терминале.
npm install -g create-react-app create-react-app my-app cd my-app/ npm start
Создайте каталог с именем components внутри каталога app. Теперь создайте файл в каталоге components с именем Header.js. В этом файле будет создана основная структура компонента.
Теперь в вашем index.js вам нужно включить этот компонент, потребовав его и добавив компонент в вашу разметку.
Вы можете использовать Header.js в качестве шаблона для создания любого количества компонентов. Просто потребуйте и вызовите их в файле index.js, и они появятся.
React отлично подходит для обработки информации, и приложение, которое я только что сделал, если я могу его так назвать, на самом деле не использует React по какой-либо другой причине, кроме как для рендеринга компонентов в DOM.
Надеюсь, это достаточно насытит ваш аппетит, чтобы вы начали реагировать. Я продолжаю делать больше подобных уроков, а также больше руководств по реакции. Спасибо за чтение. Мир из
