React (также известный как ReactJS) во многом похож по функциональности и возможностям на AngularJS; который используется для разработки интерфейсных приложений. Библиотека JavaScript и набор предопределенных API-интерфейсов и функций позволяют разработчикам создавать интерактивные дизайны пользовательских интерфейсов. Ключевое различие между ReactJS и AngularJS заключается в том, что хотя AngularJS преимущественно используется для разработки и реализации веб-приложений; ReactJS может быть предпочтительным для одностраничных приложений или даже мобильных приложений, так как у него есть специальные библиотеки, подходящие для конкретной цели.

В отличие от ReactJS, NodeJS фокусируется на функциональности на стороне сервера и используется для кодирования библиотек JavaScript, которые выполняются вне интернет-браузера.

Причина интеграции NodeJS и ReactJS

Как уже указывалось в предыдущем разделе; NodeJS полностью отличается по функциональности или удобству использования от ReactJS - в то время как один выполняется на стороне клиента, другой - на стороне сервера.

Теперь не все коды и бизнес-логика работают на стороне клиента (то есть в браузере). Существуют определенные требования, по которым на стороне сервера должны выполняться определенные проверки или бизнес-логика. В таких ситуациях ReactJS интегрируется с NodeJS, так что запрос, отправленный ReactJS, перехватывается NodeJS на стороне сервера; и выполняются необходимые процессы валидации.

Настройка React API на сервере NodeJS

Первым шагом к настройке приложения React является установка инструмента create React App, который может помочь в процессе разработки интерфейса. Однако это приложение не поддерживает выполнение на стороне сервера. Для этого на следующих шагах будет показано, как «сервер Express Node» может быть динамически связан с React API.

Как только приведенный выше код будет выполнен; приложение React готово к развертыванию. Следующим шагом будет интеграция этого с сервером Node. Зависимости сервера можно интегрировать с помощью приведенного ниже фрагмента кода.

Как показано на рисунке, среда Node устанавливается в коде. Есть четыре ключевых фактора, о которых необходимо позаботиться:

1. 'Node-env-run' - эта функция помогает загружать все переменные среды, связанные с библиотеками NodeJS, для дальнейшего использования.
2. 'Nodemon' - эта функция автоматически перезапускает сервер NodeJS по мере внесения каких-либо изменений в существующую систему.
3. 'Npm-run-all' - эта функция позволяет разработчикам одновременно выполнять несколько сценариев NodeJS на сервере.
4. Помимо этих функций, есть еще несколько функций регистратора, которые используются для обеспечения правильного ведения журнала сервера.

Следовательно, на этом этапе запускается сервер. Однако для того, чтобы получить желаемый результат; и сервер Node, и клиентский скрипт ReactJS должны выполняться одновременно; который будет рассмотрен в последнем разделе статьи.

Запуск приложения React и сервера Node одновременно

При запуске или запуске их обоих по отдельности может быть довольно просто; выполнение обоих из них синхронно друг с другом требует еще нескольких шагов. Первый шаг касается создания «прокси»; который, в свою очередь, должен указывать на тот же IP-адрес и порт, на котором работает сервер.

Как только прокси-сервер указывает на указанный порт; следующим шагом будет использование двух функций - npm-run-all (которая позволит разработчикам запускать несколько функций на сервере) и run-p, которая обеспечит параллельное выполнение процессов. Сценарий, используемый для выполнения этого, упомянут ниже для справки -

Выполнение приведенного выше сценария обеспечит одновременную работу как сервера Node, так и приложения React.