Давайте перейдем к делу: командная строка — это слишком.

Если вы только начали изучать React, скорее всего, вы пытались его настроить, только чтобы узнать, что вам также нужно научиться использовать Node, установить тысячу других пакетов и изучить кучу слова.

Хотя вы, возможно, не будете много думать об этом после того, как немного привыкнете к нему, правда в том, что начать работу с React (особенно если вы не работаете с Node) — это много, чтобы обернуться вокруг, а интерфейс командной строки не т действительно помочь.

К счастью, есть отличный способ избавиться от жаргона и настроить что-то на своем компьютере, чтобы вы могли возиться с React (или любой другой библиотекой, которую вы хотите) локально без каких-либо хлопот.

Сначала немного предыстории.

Что-то, что вам нужно знать о проектах Node, — это причудливый маленький файл под названием package.json. На данный момент просто знайте, что он хранит некоторую базовую информацию обо всех пакетах в вашем проекте, например, кто они и какая версия. Это станет важным позже.

Введите CodeSandbox.io

Это изящный небольшой инструмент, о котором я нечасто упоминаю, когда в сети поднимается тема настройки среды React. Это дает вам полное рабочее пространство с папками и столько файлов, сколько вы можете мечтать.

Но самое главное, что когда вы создаете новый проект, вас встречает вот это:

Если что-то и привлекло ваше внимание, так это большой синий шаблон «React» вверху. На самом деле это официальный шаблон, который вы можете загрузить через Node, но, честно говоря, с этим интерфейсом намного приятнее работать.

Боковое примечание: это также означает, что вы можете использовать этот метод для настройки среды практически для любого фреймворка, о котором вы только можете подумать (или, по крайней мере, в этом списке).

Когда вы открываете этот шаблон, вы получаете работающее приложение React — в комплекте со структурой папок, файлами package.json и index.js/index.html — настроенными прямо у вас на глазах. Отлично! Благодаря природе CodeSandbox теперь вы можете писать весь свой код в браузере.

Но я хотел написать это на своей машине!

Не бойтесь, у CodeSandbox есть последний трюк в рукаве! Обратите внимание на кнопку «Скачать» на верхней панели.

Это загружает .ZIP со всеми файлами и папками так, как вы оставили их в редакторе. Но самое главное, это включает в себя package.json из предыдущего.

Извлеките этот ZIP-файл в свою любимую папку comme ça:

К сожалению, именно здесь мы должны выйти из командной строки.

Если у вас установлен Node, все, что вам нужно сделать, это открыть окно терминала в этой папке (что вы можете сделать с помощью Shift + правый клик в Windows) и ввести эту команду:

npm install

Появится куча вещей, и Node волшебным образом загрузит все модули, перечисленные в файле package.json! Когда это будет сделано, он запустит свой собственный сервер разработки и откроет ваш проект в вашем любимом браузере.

Теперь, когда модули загружены, вы можете запустить этот сервер в любой момент в будущем, используя команду npm run start.

Наконец, вы можете редактировать файлы и делать все, что вам нужно, локально, и вам даже не пришлось использовать командную строку для настройки! Вы можете оставить этот сервер открытым, и он будет автоматически обновляться всякий раз, когда вы редактируете любой из файлов.

Однако будьте осторожны.

Это всего лишь сервер разработки. Есть еще несколько вещей, о которых вам нужно позаботиться, если вы хотите запустить свое приложение на реальном, реальном сервере, но я не буду вдаваться в это сегодня.

Что касается «возиться с React, пытаясь окунуться в этот дикий мир Javascript, который мы создали», тем не менее, это будет хорошо.

Послесловие

Это не должно быть исчерпывающим обзором того, как работает Node, или даже наиболее эффективным способом настройки среды. Это самый простой способ, который я мог найти, который требует наименьшего количества возни с командным терминалом, чтобы начать работу.

Надеюсь, это облегчит начало работы для тех, кто хочет начать работать с React.