Советы и ресурсы по изучению стека MERN

Это моя первая статья на Medium, и пока я размышлял над тем, на какую тему написать, я понял, что мне очень нравится читать статьи типа «Как начать…» и «Мой опыт…», поскольку они дают вам представление опыта других людей и дает вам представление о том, как подойти к этой конкретной теме.

Эта статья о том, как я изучил MERN Stack Development, и дает вам несколько советов, что можно и чего нельзя делать по этой теме. Я не ожидаю, что все будут следовать этой практике, поскольку у каждого свой способ изучения вещей. Но я надеюсь, что это поможет тем, кто запутался (как и я!) в том, как начать.

Что такое МЕРН?

MERN — это сочетание 4 ведущих технологий в области разработки.

  1. MongoDB — документно-ориентированная база данных NoSQL.
  2. Express /Express.js — бэкэнд-фреймворк для веб-приложений Node.js.
  3. ReactJS — внешняя библиотека Javascript
  4. Node.js — внутренняя среда выполнения JavaScript

Все 4 из этих технологий могут построить трехуровневую архитектуру (интерфейс, серверная часть, база данных) веб-приложения, в основном с использованием JavaScript и JSON.

Внешний интерфейс

ReactJS отвечает за разработку динамических веб-страниц веб-приложения. Он написан на чистом JavaScript или JSX (это позволяет нам писать HTML в React). Вы можете создавать страницы с помощью CSS, React Bootstrap или React-strap.

Бэкэнд

Express.js и Node.js вместе составляют серверный уровень MERN.

Express обрабатывает различные функции разработки веб-приложения, такие как маршрутизация URL-адресов, обработка HTTP-запросов и ответов, а также динамическое отображение страниц на основе передаваемых аргументов.

Node.js используется для управления данными в базе данных (добавление, удаление или изменение данных). Он также используется для сбора данных формы (если в вашем веб-приложении есть какие-либо формы), управления файлами на сервере и создания динамического содержимого страницы.

База данных

Если вы хотите хранить какие-либо данные (имена, пароли, изображения, комментарии, обзоры и т. д.), вам понадобится база данных.

MongoDB — это база данных, которая лучше всего работает с Express и Node.js. Базы данных NoSQL не ограничивают типы данных, которые мы можем хранить, а также позволяют нам добавлять новые типы данных в любое время. Поэтому мы предпочитаем базы данных NoSQL (например, MongoDB) для приложений реального времени.

Схема обучения и ресурсы

Я никогда не следовал фиксированному курсу изучения MERN. Я просто взялся за множество проектов и дурачился с различными концепциями, выискивая их значения и способы использования. Но была куча документов и видео, которые помогли мне разобраться в некоторых темах.

Я начал с создания простого фронтенд-приложения ERP с помощью React, что дало мне представление о его различных компонентах (реквизиты, состояния, хуки, компоненты и т. д.). Поскольку создание динамического приложения может быть слишком сложным для новичка, я бы посоветовал вам начать с простого статического приложения, которое вы создали в HTML и CSS, и преобразовать его в приложение React.

Вот некоторые из ресурсов, которые помогли мне изучить React:

Получив достаточно хорошее представление о внешнем интерфейсе, я перешел к созданию динамического приложения для электронной коммерции, в котором на первый план вышли серверная часть и часть базы данных. Изучение серверных технологий может быть немного сложным, и вы можете столкнуться с множеством ошибок в начале. Но не беспокойтесь об этом и постарайтесь понять причину каждой ошибки. Не просто погуглите и скопируйте и вставьте измененный код. Поймите, почему ваш код не работал, и внесите в него изменения самостоятельно (даже если вы копируете какой-либо фрагмент кода, разбирайтесь в каждой строке и пишите ее самостоятельно, а не просто вставляйте. Это поможет вам вспомнить, что вы сделали. )

Вот некоторые из ресурсов, которые помогли мне понять Node, Express и MongoDB:

Если вы тот, кто любит учиться по структурированным курсам, то вот некоторые из курсов, которые использовали многие мои друзья, и это им очень помогло:

Советы

  • Не пытайтесь забить себе голову всей теорией, которая есть на курсах/сайтах/блогах. Прочтите основы каждой технологии и примите базовое приложение. Не волнуйтесь, вы узнаете все, что вам нужно, во время выполнения практического упражнения.
  • Как я упоминал выше, даже если вы копируете какой-то код из Интернета, избегайте возможности копирования и вставки. Вместо этого напишите код самостоятельно. Это поможет вам вспомнить, что вы делаете.
  • Многие курсы, которые мы видим на таких платформах, как Udemy, Udacity, Coursera и т. д., обучают вас концепциям, а также создают что-то на стороне. Таким образом, в конце курса у вас будет готовый проект. Никогда не останавливайтесь на достигнутом и не думайте, что «у меня есть готовый проект, так что теперь я все знаю об этой технологии». Возьмите собственное определение и начните его строить. Вы должны быть в состоянии самостоятельно применить свои знания на практике.
  • Несмотря на то, что у многих из вас может быть привычка учиться чему-то на курсах, не застревайте в «туториальном аду» и вообще не используйте свою собственную логику. Поверьте мне, нет лучшего обучения, чем практическая техника обучения.
  • Наконец, пусть ваш творческий ум придумывает удивительные идеи! Посмотрите на приложения, которые вы используете, и подумайте, как вы можете попробовать сделать их или добавить дополнительные функции. Пока я изучал React, я сделал клон Trello, чтобы поэкспериментировать с его UI/UX и добавить некоторые собственные функции.

Вывод

Изучение любой технологии может быть трудным, и это определенно расстраивает, когда вы получаете сотни ошибок, и на их решение уходят часы (иногда даже дни!). Когда я разрабатывал приложение для электронной коммерции, мой бэкенд не работал, и я не получал никаких ошибок, так как мой код не был ошибочным. Покопавшись в этом 2 дня, я понял, что произошла какая-то внутренняя ошибка установки, поэтому мне пришлось переделывать весь бэкенд. Но это просто поможет вам более тщательно изучить эту технологию.

Спасибо за чтение!

Прия Рой

ЛинкедИн