REACT CREATE-REACT-APP

Розпочати новий проект React дуже складно з такою кількістю інструментів для створення. Він використовує багато залежностей, конфігураційних файлів та інших вимог, таких як Babel, Webpack, ESLint, перш ніж написати один рядок коду React. Інструмент CLI для створення програми React усуває всі ці складності та робить програму React простою. Для цього вам потрібно встановити пакет за допомогою NPM, а потім виконати кілька простих команд, щоб отримати новий проект React.

The create-react-app це чудовий інструмент для початківців, який дозволяє дуже швидко створити та запустити проект React. Він не вимагає налаштування вручну. Цей інструмент обгортає всі необхідні залежності, наприклад Webpack , Бабель для самого проекту React, а потім вам потрібно зосередитися лише на написанні коду React. Цей інструмент налаштовує середовище розробки, забезпечує чудовий досвід розробника та оптимізує програму для виробництва.

Вимоги

Додаток Create React підтримується Facebook і може працювати на будь-якому платформа , наприклад, macOS, Windows, Linux тощо. Щоб створити проект React за допомогою create-react-app, вам потрібно встановити наступні речі у вашій системі.

Версія вузла >= 8.10
NPM версія >= 5.6

Давайте перевіримо поточну версію Вузол і НПМ в системі.

Виконайте таку команду, щоб перевірити версію вузла в командному рядку.

 $ node -v

Виконайте таку команду, щоб перевірити версію NPM у командному рядку.

 $ npm -v

монтаж

Тут ми дізнаємося, як ми можемо встановити React за допомогою CRA інструмент. Для цього нам потрібно виконати наведені нижче дії.

Встановіть React

Ми можемо встановити React за допомогою менеджера пакетів npm за допомогою такої команди. Немає необхідності турбуватися про складність встановлення React. Менеджер пакетів create-react-app npm керуватиме всім, що потрібно для проекту React.

 C:Usersjavatpoint&gt; npm install -g create-react-app

Створіть новий проект React

Після успішного встановлення React ми можемо створити новий проект React за допомогою команди create-react-app. Тут я вибираю назву «reactproject» для свого проекту.

 C:Usersjavatpoint&gt; create-react-app reactproject

ПРИМІТКА:Ми можемо поєднати два вищезазначені кроки в одній команді за допомогоюnpx. Npx — це інструмент запуску пакунків, який постачається з npm 5.2 і вище.

 C:Usersjavatpoint&gt; npx create-react-app reactproject

Наведена вище команда займе деякий час для встановлення React і створення нового проекту з назвою «reactproject». Тепер ми бачимо термінал, як показано нижче.

Екран вище повідомляє, що проект React успішно створено в нашій системі. Тепер нам потрібно запустити сервер, щоб отримати доступ до програми в браузері. Введіть наступну команду у вікні терміналу.

 $ cd Desktop $ npm start

NPM — це менеджер пакетів, який запускає сервер і отримує доступ до програми на сервері за замовчуванням http://localhost:3000. Тепер ми отримаємо наступний екран.

Далі відкрийте проект у редакторі коду. Тут я використовую код Visual Studio. Структура нашого проекту за замовчуванням виглядає так, як зображено нижче.

У додатку React є кілька файлів і папок у кореневому каталозі. Деякі з них такі:

node_modules:Він містить бібліотеку React та будь-які інші необхідні сторонні бібліотеки.громадськість:Він містить загальнодоступні активи програми. Він містить index.html, де React буде монтувати програму за замовчуванням на елементі.src:Він містить файли App.css, App.js, App.test.js, index.css, index.js і serviceWorker.js. Тут файл App.js завжди відповідає за відображення вихідного екрана в React.package-lock.json:Він генерується автоматично для будь-яких операцій, у яких пакет npm змінює або дерево node_modules, або package.json. Його не можна опублікувати. Він буде проігнорований, якщо знайде будь-яке інше місце, окрім пакета верхнього рівня.package.json:Він містить різні метадані, необхідні для проекту. Він надає інформацію npm, яка дозволяє ідентифікувати проект, а також обробляти залежності проекту.README.md:Він надає документацію про теми React.

Налаштування середовища React

Тепер відкрийте src >> App.js файл і внесіть зміни, які потрібно відобразити на екрані. Після внесення бажаних змін, зберегти файл. Як тільки ми зберігаємо файл, Webpack перекомпілює код, сторінка оновиться автоматично, а зміни відобразяться на екрані браузера. Тепер ми можемо створити скільки завгодно компонентів, імпортувати щойно створений компонент усередину App.js файл, і цей файл буде включено в наш main index.html файл після компіляції Webpack.

Далі, якщо ми хочемо створити проект для режиму виробництва, введіть наступну команду. Ця команда створить робочу збірку, яка найкраще оптимізована.

 $ npm build

TechCodeview