Как разработчики React, мы все используем create-react-app для простого и быстрого создания нашего приложения React, не тратя много времени, потому что это позволяет нам генерировать целую кучу файлов проекта, просто запустив одну строку команды в CLI.
Итак, в этом мы рассмотрим, как создать приложение React без использования приложения create-react-app, что позволит нам понять, как на самом деле работает реакция за океаном.
Если вы новичок, я не рекомендую вам эту статью, по крайней мере, у вас должно быть понимание основ React.
Больше никаких представлений, давайте начнем создавать приложение React, не используя create-react-app.
Прежде всего, вам нужно иметь установочный узел на вашем компьютере. Чтобы убедиться, что вы можете запустить следующую команду в своем CLI.
Теперь давайте инициализируем наш проект React с помощью команды init.
-y ответит YES на все вопросы, которые задает процесс инициализации. На следующем изображении показаны выходные данные CLI после запуска команды init.
Предыдущая команда создаст файл package.json в папке нашего проекта. Эти файлы содержат метаданные, относящиеся к проекту, и используются для управления зависимостями проекта, сценариями, версией и многим другим.
Теперь нам нужно установить соответствующие пакеты в наш проект React.
Сначала нам нужно установить webpack. Если вы не знаете, что такое webpack, вот что говорит Google, 😉 :
Webpack — это бесплатный сборщик модулей с открытым исходным кодом для JavaScript. Он создан в первую очередь для JavaScript, но может преобразовывать интерфейсные ресурсы, такие как HTML, CSS и изображения, если включены соответствующие загрузчики. Webpack берет модули с зависимостями и генерирует статические ресурсы, представляющие эти модули. — webpack.js.org
Приведенные выше команды установят все зависимости, связанные с webpack.
Теперь нам нужно установить пакеты, которые в основном нужны React, обычно, когда мы используем команду create-react-app, все эти зависимости, связанные с React, будут установлены автоматически, но в этом процессе нам нужно установить их отдельно.
Теперь нам нужно установить все, что связано с babel, и babel — это еще один проект с открытым исходным кодом в мире javascript, основная цель которого в основном состоит в том, чтобы преобразовать код Javascript в обратно совместимые версии javascript, он просто заставит все работать, потому что Javascript обновляет сам себя много раз в году. Поэтому нам нужно что-то подобное, чтобы наше приложение было совместимо со всеми версиями Javascript.
После установки всех вышеперечисленных пакетов теперь мы можем начать создавать некоторые файлы в папке нашего проекта. Прежде чем создавать какие-либо файлы самостоятельно, папка вашего проекта должна выглядеть следующим образом.
Первые два файла, которые мы собираемся создать, — это файлы конфигурации для babel и webpack.
Для babel нам нужно создать файл Calle .babelrc, а для webpack нам нужно создать webpack.config.js
Из приведенных выше двух файлов файл webpack.config.js более важен, потому что он имеет много важных аспектов реагирующего приложения. В основном наша точка входа в проект (index.js), где будут выходные данные (общая папка) и как будет работать наш проект. Итак, это правила, которым должен следовать компилятор.
После выполнения описанного выше процесса создания файла теперь нам нужно обновить наш файл package.json. В основном обновляем скрипты, которые нам нужны.
Скрипт start запустит webpack-dev-server, а скрипт build будет использовать webpack . , чтобы создать версию сборки.
Теперь мы можем начать создавать папки и другие файлы, которые нам нужны в нашем приложении React.
- Общая папка
- Исходная папка
Это две основные папки, которые нам нужно создать, внутри этих папок нам нужно создать файлы следующим образом:
- Общая папка
1.1 index.html
1.2 main.js
2. Исходная папка
2.1 App.js
2.2 index.js
Давайте посмотрим на файл index.html:
Файл main.js будет обновляться после запуска команды сборки. Так что все, что вам нужно сделать, это просто создать файл .js в общей папке.
Вот файл App.js:
Вот файл index.js:
После того, как вы создадите все эти файлы и обновите код внутри этих файлов, вы можете запустить команду сборки для сборки проекта, а затем запустить свое приложение.
Наконец, вы увидите, что ваше только что созданное приложение работает под номером порта 3000:
Нажмите здесь, чтобы просмотреть Github Repo 👉: Ссылка
