React для НОВИЧКОВ [2023]: первый проект на React JS | Как запустить приложение на React?
React – это библиотека JavaScript, которая используется для создания пользовательских интерфейсов. Она позволяет разработчикам создавать динамические веб-приложения, которые реагируют на пользовательский ввод и изменяются в реальном времени.
В этом уроке мы рассмотрим, как начать работу с React и создать свой первый проект на React JS. Мы также научим вас, как запустить приложение на React и посмотреть его в браузере.
Шаг 1: Установка Node.js и Create React App
Первым шагом для начала работы с React будет установка Node.js на ваш компьютер. Node.js позволяет запускать JavaScript на сервере и включает в себя npm (Node Package Manager), который позволяет устанавливать пакеты JavaScript.
- Посетите официальный сайт Node.js и загрузите установщик для вашей операционной системы.
- Установите Node.js на ваш компьютер, следуя инструкциям на экране.
После установки Node.js, вы можете установить Create React App, инструмент, который поможет вам создать новый проект на React JS.
- Откройте командную строку (Terminal на MacOS, Command Prompt на Windows) и выполните следующую команду:
npm install -g create-react-appШаг 2: Создание нового проекта на React
Теперь, когда у вас установлен Node.js и Create React App, вы можете создать свой первый проект на React.
- В командной строке выполните следующую команду, чтобы создать новый проект:
npx create-react-app my-react-appЭта команда создаст новую папку my-react-app с необходимыми файлами и структурой для вашего проекта на React.
- Перейдите в созданную папку с помощью команды:
cd my-react-appШаг 3: Запуск приложения на React
Теперь, когда у вас создан новый проект на React, вы можете запустить его и увидеть результат в браузере.
- В командной строке выполните следующую команду, чтобы запустить приложение:
npm startЭта команда запустит локальный сервер и откроет ваше приложение в браузере. Вы увидите демонстрационную страницу приложения на React.
- Теперь вы можете начать редактировать файлы в вашем проекте, чтобы создавать свой пользовательский интерфейс на React. Изменения в файлах будут автоматически обновляться в браузере.
Заключение
Поздравляем! Теперь у вас есть свой первый проект на React JS, который вы можете запустить и редактировать. Мы надеемся, что этот урок был полезен для вас и помог вам начать работу с React.
Если у вас возникли вопросы или трудности, не стесняйтесь обратиться к официальной документации React или сообществу разработчиков React. Удачи в вашем путешествии в мир React!
при удаление css, при перезапуске выдает такие ошибки:
ERROR in ./src/index.js 6:0-21
Module not found: Error: Can't resolve './index.css' in 'C:…Desktoppetreact-startsrc'
ERROR in ./src/index.js 8:0-48
Module not found: Error: Can't resolve './reportWebVitals' in 'C:…Desktoppetreact-startsrc'
как будто бы они все таки нужны для запуска, а где лежит тот файл которые так же надо поправить, чтобы таких ошибок не было
Если у кого-то будет выдавать ошибку при вводе в консоли редактора npm run start, не паникуйте, зайдите в консоль, в которой писали команды по установке React и в самом низу будет инструкция, в моём случае в начале надо написать cd react-start и затем уже npm start без run.
Только после этого открылся localhost:3000.
👍👍👍👍👍👍
HOST=::1 PORT=3000 npm start
Шикарное видео! Объяснили все четко и просто, без лишней воды! После просмотра появилось вдохновение учить Реакт дальше) Спасибо большое за труд!
Спасибо за труд.
Очень ждем продолжения этих серий!!!
у кого установлен npm но при create-react-app вылезают ошибки, создайте пустую папку npm в папке Roaming внутри AppData
Очень понятно, последовательно и интересно. Я капризный, насчёт уроков и преподавателей. Этот урок мне зашёл на отлично. Вот если бы было продолжение. Например, как написать страничку соц. сети или планировщик задач…
У меня выдает ошибку на команде rm-rf git. Написала ее правильно в терминал, пробовала другие команды. Почему так. Этот шаг можно пропустить?
про вит конечно мимо
Как все последовательно, доходчиво! Просто восторг! Спасибо) Лучшее изложение информации!
Ну ты про map() и сказанул…!!! Новички в шоке от услышанного… Ребята кто читает этот комент – метод map() просто копирует массив.
Спасибо за урок очень помогает новичкам.
Базара нет! От души родной как понятно и четко объяснил ❤
Крутой видеоролик, жду ещё по React думаю очень скоро будет видео по React🔥🔥🔥
Вау 🙂
Спасибо! все понятно!
Лучше видео по введению в реакт в мире. Спасибо! Нужно больше видео о реакт)
Ну , что тут сказать 140 коментов сами за себя говорят, это действительно лучшее видео на ютуб по реакту.
У меня всё получилось, всё заработало, всё понятно.
Можно же так объяснять, вот бы всегда всё шло так как в этом видео)
Ну тут определённо лайк, подписка со всех аккаунтов , рассылка всем друзьям и огромный респект!
СПАСИБО!!!!!!