- Сообщения
- 27
Видео-материал:
Реально полезного материала на эту тему я не находил, поэтому поковырялся и рассказал вам в видео о двух способах. В текстовой версии нет смысла рассказывать, что куда тыкать, потому что лучше это все увидеть, иначе может возникнуть путаница. В этой статье просто поговорим о некоторых моментах. Во-первых, в интернете есть одна статья, в принципе хорошая, по подключению React.JS к вашему проекту, при помощи настройки webpack'а, но есть одно но! Начнем издалека и придем к моим вариантам, так вы поймете в чем их преимущество.
Представим, что вы написали свое react-приложение, к примеру какой-то худ. Теперь вам надо как-то подключить его к вашему проекту, но как?
-Как раньше с обычной версткой просто перекинуть все файлы?
-Ну нет, у вас работать не будет, ибо для этого надо запустить ваше приложение.
-Окей, в чем проблема? Сейчас запущу! Стоп, а это мне каждый раз его запускать? Ну ладно, сделаю сервер и просто кину куда-нибудь на ВДС.
-Работать не будет, ибо ты запустишь локальный сервер в папке с проектом, и не сможешь зайти не ты, не другой игрок, ибо у тебя будут грузиться не обычные файлы а весь сервер, и просто КРАШ.
-Ну не проблема, я вынесу в отдельную папку.. а как подключить тогда?
-
Плавно переходим к webpack'у. Для понимания, что это абстрагируемся от всего и представим следующую ситуацию. Вы владелец крупного завода, у вас свое производство (ваша папка с проектом на React.JS), на нем есть рабочие, которые делают сковородки (компоненты). Все сделано, осталось лишь это все упаковать и отправить в города на продажу, но люди это будут делать долго, либо допустят ошибку, еще и все это сложить сразу в склад (папка build которую генерирует webpack). На помощь приходит робот Konders, он собирает всю информацию о сковородках, их количество, материал (модули, которые есть на вашем проекте) и пихает на склад (создает папку build где будет храниться все ваше приложение) после садится на машину и едет в указанный город.
Я думаю, что хоть что-то стало понятно. Таким образом, переходим к примеру о котором я говорил, что он не очень. Там webpack настроен таким образом, что все сковородки будут отправлять все время в один город. Это не есть хорошо, потому что мы хотим расширить наше производство и сделать поставку по всей стране. В этом и минус того материала, не практично и не удобно. Без настройки webpack'а вы можете build'ить ваше приложение и эту папку перекидывать в CEF часть вашего проекта, после просто подключать в клиенте html файл build'а, либо создать отдельную папку вне проекта, где у вас будут храниться все ваши приложения, запустить то которое вам необходимо, и на клиентской части подключиться не к html, а к локальному хосту. Так вы сможете в режиме реального времени отслеживать изменения в проекте, без перезапуска сервера. Если бы вы это сделали в папке проекта, то он бы у вас просто не запустился.
Я надеюсь внес ясность в некоторые моменты, это лишь часть того о чем я рассказал в видео. По сути наверное самое необходимое перед просмотром. Дальше если вы не знакомы с React.JS и не понимаете что к чему - смотрите видео, уделил много времени пояснению работы React.JS. Приятного просмотра и чистого кода!
Реально полезного материала на эту тему я не находил, поэтому поковырялся и рассказал вам в видео о двух способах. В текстовой версии нет смысла рассказывать, что куда тыкать, потому что лучше это все увидеть, иначе может возникнуть путаница. В этой статье просто поговорим о некоторых моментах. Во-первых, в интернете есть одна статья, в принципе хорошая, по подключению React.JS к вашему проекту, при помощи настройки webpack'а, но есть одно но! Начнем издалека и придем к моим вариантам, так вы поймете в чем их преимущество.
Представим, что вы написали свое react-приложение, к примеру какой-то худ. Теперь вам надо как-то подключить его к вашему проекту, но как?
-Как раньше с обычной версткой просто перекинуть все файлы?
-Ну нет, у вас работать не будет, ибо для этого надо запустить ваше приложение.
-Окей, в чем проблема? Сейчас запущу! Стоп, а это мне каждый раз его запускать? Ну ладно, сделаю сервер и просто кину куда-нибудь на ВДС.
-Работать не будет, ибо ты запустишь локальный сервер в папке с проектом, и не сможешь зайти не ты, не другой игрок, ибо у тебя будут грузиться не обычные файлы а весь сервер, и просто КРАШ.
-Ну не проблема, я вынесу в отдельную папку.. а как подключить тогда?
-
Плавно переходим к webpack'у. Для понимания, что это абстрагируемся от всего и представим следующую ситуацию. Вы владелец крупного завода, у вас свое производство (ваша папка с проектом на React.JS), на нем есть рабочие, которые делают сковородки (компоненты). Все сделано, осталось лишь это все упаковать и отправить в города на продажу, но люди это будут делать долго, либо допустят ошибку, еще и все это сложить сразу в склад (папка build которую генерирует webpack). На помощь приходит робот Konders, он собирает всю информацию о сковородках, их количество, материал (модули, которые есть на вашем проекте) и пихает на склад (создает папку build где будет храниться все ваше приложение) после садится на машину и едет в указанный город.
Я думаю, что хоть что-то стало понятно. Таким образом, переходим к примеру о котором я говорил, что он не очень. Там webpack настроен таким образом, что все сковородки будут отправлять все время в один город. Это не есть хорошо, потому что мы хотим расширить наше производство и сделать поставку по всей стране. В этом и минус того материала, не практично и не удобно. Без настройки webpack'а вы можете build'ить ваше приложение и эту папку перекидывать в CEF часть вашего проекта, после просто подключать в клиенте html файл build'а, либо создать отдельную папку вне проекта, где у вас будут храниться все ваши приложения, запустить то которое вам необходимо, и на клиентской части подключиться не к html, а к локальному хосту. Так вы сможете в режиме реального времени отслеживать изменения в проекте, без перезапуска сервера. Если бы вы это сделали в папке проекта, то он бы у вас просто не запустился.
Я надеюсь внес ясность в некоторые моменты, это лишь часть того о чем я рассказал в видео. По сути наверное самое необходимое перед просмотром. Дальше если вы не знакомы с React.JS и не понимаете что к чему - смотрите видео, уделил много времени пояснению работы React.JS. Приятного просмотра и чистого кода!