React (также известный как React.js или React JS) - это библиотека JavaScript с открытым исходным кодом для создания пользовательских интерфейсов. Мы разрабатываем простые представления для каждого состояния в нашем приложении, и React эффективно обновляет и отображает только нужные компоненты при изменении наших данных. Однако React занимается только отображением данных в DOM, поэтому создание приложений React обычно требует использования дополнительных библиотек для управления состоянием и маршрутизации, таких как Redux и React Router.
«React - это не фреймворк, это волшебное решение для Facebook, позволяющее обрабатывать миллиарды сообщений, миллионы таких сообщений, миллионы комментариев без перезагрузки веб-страницы». React создан Джорданом Уолком, инженером Facebook, с первым годом выпуска - 2013. Другие крупные компании, использующие ReactJS, включают Netflix, Yahoo, Ebay, Instagram. Даже такие компании, как Microsoft, работают над включением React в такие крупные проекты, как веб-версия Skype, Microsoft office365, мобильное приложение Skype и т. Д.
Основные концепции:
Компоненты-
Код React состоит из сущностей, называемых компонентами. Помимо приема входных данных (доступных через this.props), компонент может поддерживать данные внутреннего состояния (доступные через this.state). При изменении данных о состоянии компонента отрисованная разметка будет обновлена путем повторного вызова render ().
Виртуальный DOM:
React создает кеш структуры данных в памяти, вычисляет полученные различия, а затем эффективно обновляет отображаемую в браузере DOM. Этот процесс называется согласованием. Проще говоря, React поддерживает текущий Dom, и если необходимо отобразить некоторые изменения, то только эти изменения устанавливаются в исходном DOM.
JSX:
JSX или JavaScript XML - это расширение синтаксиса языка JavaScript, которое обеспечивает способ структурирования рендеринга компонентов с использованием синтаксиса, знакомого многим разработчикам. Компоненты также могут быть написаны на чистом JS, но JSX просто делает его более элегантным. Он похож на другой синтаксис расширения, созданный Facebook для PHP под названием XHP.
Другие основные концепции включают:
Функциональные компоненты, компоненты на основе классов, методы жизненного цикла, перехватчики реакции и т. Д.
create-react-app React Environment-
Предпосылки-
- На вашем компьютере установлена Node.js версии 10.16.0 или выше.
- Базовое понимание JavaScript.
Настройка нашего первого приложения-
- Установка инструмента create-react-app-
npm install -g create-react-app
2. С помощью терминала перейдите в каталог, в котором вы хотите создать приложение.
create-react-app my-first-app
3. Перейдите в каталог вашего проекта -
cd my-first-app
Примечание. Существует еще один менеджер пакетов для JavaScript, который называется yarn. Если вы ранее установили yarn в своей системе, вы увидите список команд yarn, таких как yarn start, которые работают так же, как команды npm. Вы можете запускать команды npm, даже если у вас установлена пряжа. Если вы предпочитаете yarn, просто замените npm на yarn во всех будущих командах. Результаты будут такими же.
4. Теперь, когда мы находимся в каталоге нашего проекта, осмотритесь и проверьте все файлы -
ls -a Output: build/ node_modules/ public/ src/ .gitignore README.md package-lock.json package.json
5. У create-react-app уже есть предварительно настроенное приложение для нас, чтобы проверить его.
npm start
6. По умолчанию рабочий порт - 3000, и вывод должен выглядеть так:
Output: Compiled successfully! You can now view my-first-app in the browser. http://localhost:3000 Note that the development build is not optimized. To create a production build, use npm run build
7. Теперь ваше приложение готово и работает. Перейдите по адресу http: // localhost: 3000 в вашем браузере.
Вот ссылка GitHub на базовое нестатическое игровое приложение в крикет, созданное с использованием стека MERN (MongoDB, Express, React, Node.js), проверьте, как должна выглядеть обычно развертываемая файловая структура приложения для реагирования.
