Как создать проект на javascript

Настройка VS Code для разработки на JavaScript

Visual Studio Code или просто VS Code – это бесплатный, популярный и имеющий множество дополнений текстовый редактор, который в первую очередь предназначен для создания и отладки современных веб- и облачных приложений.

Разработан он компанией Microsoft и доступен для операционных систем Windows, MacOS и Linux.

Распространяется данная программа бесплатно, исходный код её доступен на GitHub.

VS Code поддерживает большое количество языков программирования, включает в себя отладчик, средства для работы с Git, подсветку синтаксиса, технологию автодополнения IntelliSense, инструменты для рефакторинга, терминал и многое другое.

VS Code является достаточно гибким инструментом, расширяемым с помощью плагинов, доступных на Visual Studio Marketplace. Открыть панель с расширениями в программе можно через комбинацию клавиш Ctrl+Shift+X .

Плагинов для Visual Studio Code очень много, но в рамках этой статьи рассмотрим только наиболее популярные из них. В VS Code уже встроен такой плагин как Emmet. Если вы не знакомы с ним, то он предназначен для быстрого набора кода. Дополнительно его устанавливать не нужно.

Установка VS Code

Для установки VS Code на компьютер необходимо перейти на этот сайт. После этого на странице выбрать вашу операционную систему и нажать на значок «Загрузки». После завершения скачивания программы установить её себе на компьютер.

Чтобы лучше ориентироваться в программе вы можете установить языковый пакет для русского языка. Для этого откройте панель «Расширения» ( Ctrl+Shift+X ) и введите в ней текст «Russian Language Pack for Visual Studio Code». После этого выберите его в результатах поиска и установите его.

В Visual Studio Code имеется огромное количество различных плагинов кроме языковых пакетов. Предназначены они для расширения функциональности этого редактора. Все плагины для этого редактора размещены на Marketplace.

Общая настройка VS Code

VS Code содержит большое количество настроек, с помощью которых вы можете настроить этот редактор под себя.

Изменение настроек в VS Code осуществляется в соответствующем окне. Открыть его можно несколькими способами:

• через комбинацию клавиш Ctrl+, ;
• через пункт меню «Файл -> Настройки -> Параметры» (в версии на английском языке «File -> Preferences -> Settings»);
• нажать на значок шестерёнки и выбрать в открывшемся меню пункт «Параметры» (Settings).

Список параметров, которые пользователи наиболее часто настраивают:

• editor.tabsize — число пробелов при табуляции;
• editor.insertSpaces — вставлять ли пробелы при нажатии Tab ;
• editor.detectIndentation — нужно ли параметры «#editor.tabsize» и «editor.insertSpaces» определять автоматически при открытии файла на основе его содержимого;
• editor.wordWrap — управляет тем, как следует переносить строки;
• editor.fontSize — размер шрифта в пикселях;
• editor.mouseWheelZoom — нужно ли включать изменение размера шрифта в редакторе при нажатой клавише Ctrl и движении колесика мыши;
• editor.minimap.enabled — включает или отключает отображение мини-карты;
• editor.formatOnSave — выполнять ли автоматическое форматирование файла при его сохранении;
• workbench.startupEditor — управляет тем, что будет отображаться при запуске, если содержимое редактора не было восстановлено из предыдущего сеанса;
• files.insertFinalNewline — если этот параметр включен, то при сохранении файла в его конец вставляется пустая строка;
• files.trimFinalNewlines — если этот параметр активен, то при сохранении файла будут удалены все пустые строки, идущие за последней в конце файла;
• files.trimTrailingWhitespace — если этот параметр включен, то при сохранении файла будут удалены все пробельные символы на концах строк;
• files.autoSave — для включения автосохранения файлов;
• terminal.integrated.cwd — позволяет задать путь явного запуска, по которому будет запущен терминал;
• telemetry.enableTelemetry — включает или отключает отправку сведений об использовании и ошибках в веб-службу Майкрософт;
• telemetry.enableCrashReporter — разрешает отправку отчетов о сбоях в веб-службу Майкрософт;

Изменять настройки можно как глобально, так и конкретно для текущего проекта. Изменение глобальных настроек осуществляется в окне «Параметры» на вкладке «Пользователь». Эти настройки сохраняются в файл «settings.json». Открыть его можно нажав на значок «Открыть параметры (JSON)».

Пример файла «settings.json»:

Кстати, изменять настройки также можно просто посредством редактирования этого файла.

Сохранение настроек для рабочей директории выполняется в специальный файл «settings.json», который будет добавлен в папку «.vscode». Настройка параметров для рабочей директории (проекта) можно также выполнить просто посредством редактирования этого файла.

Настройка VS Code для HTML и CSS

Visual Studio Code обеспечивает базовую поддержку при написании HTML и CSS из коробки. Имеется подсветка синтаксиса, умные дополнения с IntelliSense и настраиваемое форматирование. VS Code также имеет отличную поддержку Emmet.

Зачем нужен Emmet? Он позволяет очень быстро писать код.

Например, Emmet аббревиатура ul>li*3>span.item-$ после нажатии клавиши Tab создаст следующий код:

В CSS аббревиатура Emmet как dn создаст код display: none .

VS Code имеет встроенные средства для форматирования кода. Настроить параметры форматирования можно в настройках. Находятся они в разделах «Расширения -> HTML» и «Расширения -> CSS».

Комбинация клавиш для выполнения форматирования в VS Code: Shift+Alt+F .

Функциональность VS Code при работе с HTML и CSS можно улучшить с помощью расширений.

Вот перечень некоторых из них:

• Auto Rename Tag – автоматически изменяет имя закрывающего тега при переименовывании открывающегося;
• Auto Close Tag – автоматически добавляет закрывающий HTML/XML тег при вводе закрывающей скобки открывающегося тега (кроме HTML, это дополнение добавляет эту возможность в JavaScript и многие другие языки);
• HTMLHint – плагин для статического анализа HTML кода;
• HTML CSS Support — поддержка CSS для документов HTML;
• IntelliSense for CSS class names in HTML — плагин для предложения вариантов завершения имени CSS класса в HTML на основе определений, найденных им в вашем рабочем пространстве;
• Autoprefixer — для автоматического добавления CSS свойств с префиксами;
• CSS Peek — позволяет посмотреть свойства, прикреплённые к классу или идентификатору без переключения на CSS файл, в котором они описаны;
• Prettier — Code formatter — для форматирования кода (HTML, CSS, JavaScript и др.);

VS Code имеет возможность, которая позволяет сворачивать области CSS кода заключенные между /*#region*/ и /*#endregion*/ :

Настройка VS Code для разработки на JavaScript

Разработку веб-проекта в Windows 10 можно ввести не только с использованием программ, предназначенных только для этой операционной системы, но и посредством WSL (Linux). Если вам нравится Linux и вы хотите его использовать, то Windows 10 позволяет вам это сделать из коробки (то есть непосредственно из дистрибутива). В следующем разделе приведена инструкция по установке WSL в Windows 10 и настройке Visual Studio Code для её использования в качестве среды разработки.

Кроме этого, ОС Linux в большинстве случаев — это система, которая затем у вас будет установлена на продакшене. А это значит, что вы получите окружение как на сервере или более близкое к этому.

Если вы не хотите использовать WSL в качестве среды разработки или работаете в другой операционной системе, то в этом случае можете сразу же перейти к разделу «Установка и настройка ES Lint».

Как в Windows 10 установить WSL и использовать её в VS Code

Коротко о подсистеме Windows для Linux (WSL). В Windows 10 появилась возможность осуществлять веб-разработку прямо в среде на основе Linux. Для этого вам необходимо просто включить компонент Windows 10 «Подсистема Windows для Linux (WSL)» и установить из Microsoft Store «любимый» дистрибутив Linux (например, Ubuntu 18.04). Подсистема WSL появилась в Windows 10, начиная с обновления «Anniversary Update» (1607), а версия 2004 этой ОС уже включает WSL 2.

Более подробно процесс установки WSL описан в этой статье, а именно в разделах «Включение подсистемы Windows для Linux» и «Установка приложения «Ubuntu». Если вы ещё не читали эту статью, то можете это сделать, перейдя по представленной выше ссылке.

Установка расширения «Remote – WSL» в VS Code. Для использования WSL в качестве среды для полной разработки прямо из VS Code необходимо установить расширение «Remote – WSL».

Это позволит вам ввести веб-разработку прямо в среде на основе Linux, использовать специфичные для неё наборы инструментов и утилит, а также запускать и отлаживать свои приложения в Linux, не выходя при этом из Windows.

Это расширение позволит выполнять команды непосредственно в WSL, а также редактировать файлы, расположенные в WSL или в смонтированной файловой системе Windows (локальные диски находятся в /mnt ) не беспокоясь о проблемах с совместимостью.

После установки расширения и перезагрузки редактора VS Code у вас появится индикатор WSL в нижнем левом углу окна программы.

При нажатии на него вам будут показаны команды Remote-WSL. Используя их, вы можете открыть новое окно VS Code, в котором в качестве среды будет использоваться WSL. При этом команда «Remote-WSL: New Window» выполнит это с использованием дистрибутива Linux, который у вас назначен по умолчанию, а команда «Remote-WSL: New Window using Distro. » — используя конкретный дистрибутив Linux из установленных.

Версия дистрибутива Linux, которая сейчас используется в WSL отображается в индикаторе следующим образом:

Установка и настройка ESLint

ESLint – это инструмент, который крайне желательно установить в систему, если вы разрабатываете код на JavaScript. Он будет показывать вам ошибки в коде, а также направлять вас при его написании так, чтобы он был выдержан в едином стиле.

Перед тем как переходить к установке ESLint сначала инсталлируем в ОС «Node.js v12.x».

В Ubuntu это осуществляется следующим образом:

Вводить эти команды будем через терминал VS Code. Открыть его можно посредством комбинации клавиш Ctrl+Shift+` или кликнув в главном меню на пункт «Терминал -> Создать терминал».

Проверить номер установленной версии «Node.js» можно так:

После установки «Node.js» создадим папку для проекта в файловой системе ОС, а затем откроем её с помощью VS Code.

Создание проекта обычно начинается с его инициализации посредством npm. Этот процесс можно выполнить посредством следующей команды:

В результате выполнения этой команды у вас появится файл «package.json». Этот файл кроме информации о проекте и других вещей, ещё будет содержать набор зависимостей для данного проекта. Имея этот файл, мы сможем при необходимости очень быстро развернуть проект на любом другом компьютере.

Теперь перейдём к установке ESLint и некоторых других npm пакетов в проект:

Ключ —save-dev используется для того чтобы сделать запись об этих пакетах в «package.json». Данный ключ добавит их в секцию devDependencies .

Установка npm пакетов осуществляется в папку «node_modules» этого проекта.

В качестве стиля кода мы будем использовать Airbnb . Это руководство используется многими известными организациями и имеет очень большое количество звёзд на GitHub.

Для того, чтобы можно было использовать Airbnb для расширения базовой конфигурации ESLint мы установили пакеты eslint-config-airbnb-base (без зависимостей от React) и eslint-plugin-import (для поддержки синтаксиса импорта/экспорта ES6+ и предотвращения проблем с неправильным написанием путей к файлам и имен импорта).

После окончания загрузки пакетов приступим к интегрированию ESLint в Visual Studio Code. Осуществляется это посредством установки расширения с одноимённым названием.

Для того чтобы ESLint работал необходимо создать конфигурационный файл. Это можно выполнить как посредством команды ./node_modules/.bin/eslint —init (настройка осуществляется посредством ответов на вопросы мастера), так и самостоятельно.

Конфигурационный файл необходим для задания настроек, в соответствии с которыми ESLint будет осуществлять проверку JavaScript кода.

Чтобы сделать это самостоятельно нам необходимо в корне проекта создать файл .eslintrc и добавить в него, например, следующие данные:

Эти данные будут определять следующие настройки для ESLint:

• env — это свойство определяет среды, в которых JavaScript должен работать. Для фронтенда средой выступает браузер, поэтому добавим в env свойство «browser»: true . Свойство «es6»: true предназначено для автоматического включения синтаксиса ES6.
• extends — предназначен для указания конфигурации, с помощью которой мы хотим расширить общую конфигурацию ESLint. В качестве значения extends укажем конфигурацию airbnb-base (без React). При необходимости можно указать не одну, а несколько конфигурации. В этом случае каждая следующая конфигурация будет расширять предыдущую. Т.е. если мы укажем какую-то конфигурацию после airbnb-base , то она будет уже расширять не общую конфигурацию ESLint, а airbnb-base ;
• parserOptions — позволяет задать параметры языку JavaScript, которые мы хотим поддерживать. В настоящее время рекомендуется использовать при разработке проектов синтаксис ECMAScript 6. Указание поддержки этой версии осуществляется посредством задания ключу ecmaVersion значения 6. При необходимости вы можете указать вместо этой другую версию.

Если вам необходимо дополнительно линтить ошибки кода, размещенного в теге <script>, то установите плагин eslint-plugin-html :

Форматирование кода JavaScript будем выполнять с помощью Prettier. Для правильной совместной работы Prettier и ESLint установим следующие npm пакеты:

Для того чтобы ESLint не просматривал определённые папки и не выдавал по ним ошибки следует создать файл .eslintignore и прописать их в нём:

Если у вас включено стандартное форматирование кода в VS Code при сохранении, то чтобы в качестве плагина для форматирования js файлов применялся ESLint, следует в конфигурационный файл «settings.json» добавить следующее:

Если вы хотите чтобы при сохранении файлов форматировались только js файлы, то editor.formatOnSave необходимо установить значение false , а true этому ключу только в секции «[javascript]» :

Теперь, ESlint будет проверять JavaScript код и показывать в нём ошибки и предупреждения. Они будут помечаться с использованием волнистых линий.

Результат проверки JavaScript кода ESLint:

Дополнительная настройка VS Code

Вот ещё некоторый список плагинов для VS Code, которые могут расширить возможности Visual Studio Code для фронтенд разработки и не только:

Using React in Visual Studio Code

React is a popular JavaScript library developed by Facebook for building user interfaces. The Visual Studio Code editor supports React.js IntelliSense and code navigation out of the box.

Welcome to React

We’ll be using the create-react-app generator for this tutorial. To use the generator as well as run the React application server, you’ll need Node.js JavaScript runtime and npm (Node.js package manager) installed. npm is included with Node.js which you can download and install from Node.js downloads.

Tip: To test that you have Node.js and npm correctly installed on your machine, you can type node —version and npm —version in a terminal or command prompt.

You can now create a new React application by typing:

where my-app is the name of the folder for your application. This may take a few minutes to create the React application and install its dependencies.

Note: If you’ve previously installed create-react-app globally via npm install -g create-react-app , we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version.

Let’s quickly run our React application by navigating to the new folder and typing npm start to start the web server and open the application in a browser:

You should see the React logo and a link to "Learn React" on http://localhost:3000 in your browser. We’ll leave the web server running while we look at the application with VS Code.

To open your React application in VS Code, open another terminal or command prompt window, navigate to the my-app folder and type code . :

Markdown preview

In the File Explorer, one file you’ll see is the application README.md Markdown file. This has lots of great information about the application and React in general. A nice way to review the README is by using the VS Code Markdown Preview. You can open the preview in either the current editor group (Markdown: Open Preview ⇧⌘V (Windows, Linux Ctrl+Shift+V ) ) or in a new editor group to the side (Markdown: Open Preview to the Side ⌘K V (Windows, Linux Ctrl+K V ) ). You’ll get nice formatting, hyperlink navigation to headers, and syntax highlighting in code blocks.

Syntax highlighting and bracket matching

Now expand the src folder and select the index.js file. You’ll notice that VS Code has syntax highlighting for the various source code elements and, if you put the cursor on a parenthesis, the matching bracket is also selected.

IntelliSense

As you start typing in index.js , you’ll see smart suggestions or completions.

After you select a suggestion and type . , you see the types and methods on the object through IntelliSense.

VS Code uses the TypeScript language service for its JavaScript code intelligence and it has a feature called Automatic Type Acquisition (ATA). ATA pulls down the npm Type Declaration files ( *.d.ts ) for the npm modules referenced in the package.json .

If you select a method, you’ll also get parameter help:

Go to Definition, Peek definition

Through the TypeScript language service, VS Code can also provide type definition information in the editor through Go to Definition ( F12 ) or Peek Definition ( ⌥F12 (Windows Alt+F12 , Linux Ctrl+Shift+F10 ) ). Put the cursor over the App , right click and select Peek Definition. A Peek window will open showing the App definition from App.js .

Press Escape to close the Peek window.

Hello World

Let’s update the sample application to "Hello World!". Create a new H1 header with "Hello, world!" and replace the <App /> tag in ReactDOM.render with element .

Once you save the index.js file, the running instance of the server will update the web page and you’ll see "Hello World!" when you refresh your browser.

Tip: VS Code supports Auto Save, which by default saves your files after a delay. Check the Auto Save option in the File menu to turn on Auto Save or directly configure the files.autoSave user setting.

Debugging React

To debug the client side React code, we’ll use the built-in JavaScript debugger.

Note: This tutorial assumes you have the Edge browser installed. If you want to debug using Chrome, replace the launch type with chrome . There is also a debugger for the Firefox browser.

Set a breakpoint

To set a breakpoint in index.js , click on the gutter to the left of the line numbers. This will set a breakpoint which will be visible as a red circle.

Configure the debugger

We need to initially configure the debugger. To do so, go to the Run and Debug view ( ⇧⌘D (Windows, Linux Ctrl+Shift+D ) ) and select the create a launch.json file link to create a launch.json debugger configuration file. Choose Web App (Edge) from the Select debugger dropdown list. This will create a launch.json file in a new .vscode folder in your project which includes a configuration to launch the website.

We need to make one change for our example: change the port of the url from 8080 to 3000 . Your launch.json should look like this:

Ensure that your development server is running ( npm start ). Then press F5 or the green arrow to launch the debugger and open a new browser instance. The source code where the breakpoint is set runs on startup before the debugger was attached, so we won’t hit the breakpoint until we refresh the web page. Refresh the page and you should hit your breakpoint.

You can step through your source code ( F10 ), inspect variables such as element , and see the call stack of the client side React application.

For more information about the debugger and its available options, check out our documentation on browser debugging.

Live editing and debugging

If you are using webpack together with your React app, you can have a more efficient workflow by taking advantage of webpack’s HMR mechanism which enables you to have live editing and debugging directly from VS Code. You can learn more in this Live edit and debug your React apps directly from VS Code blog post and the webpack Hot Module Replacement documentation.

Linting

Linters analyze your source code and can warn you about potential problems before you run your application. The JavaScript language services included with VS Code has syntax error checking support by default, which you can see in action in the Problems panel (View > Problems ⇧⌘M (Windows, Linux Ctrl+Shift+M ) ).

Try making a small error in your React source code and you’ll see a red squiggle and an error in the Problems panel.

Linters can provide more sophisticated analysis, enforcing coding conventions and detecting anti-patterns. A popular JavaScript linter is ESLint. ESLint, when combined with the ESLint VS Code extension, provides a great in-product linting experience.

First, install the ESLint command-line tool:

Then install the ESLint extension by going to the Extensions view and typing ‘eslint’.

Once the ESLint extension is installed and VS Code reloaded, you’ll want to create an ESLint configuration file, .eslintrc.js . You can create one using the extension’s ESLint: Create ESLint configuration command from the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ).

The command will prompt you to answer a series of questions in the Terminal panel. Take the defaults, and it will create a .eslintrc.js file in your project root that looks something like this:

ESLint will now analyze open files and shows a warning in index.js about ‘App’ being defined but never used.

You can modify the ESLint rules in the .eslintrc.js file.

Let’s add an error rule for extra semi-colons:

Now when you mistakenly have multiple semicolons on a line, you’ll see an error (red squiggle) in the editor and error entry in the Problems panel.

Popular Starter Kits

In this tutorial, we used the create-react-app generator to create a simple React application. There are lots of great samples and starter kits available to help build your first React application.

VS Code React Sample

This is a sample React application, which creates a simple TODO application and includes the source code for a Node.js Express server. It also shows how to use the Babel ES6 transpiler and then use webpack to bundle the site assets.

TypeScript React

If you’re curious about TypeScript and React, you can also create a TypeScript version of the create-react-app application by specifying that you want to use the TypeScript template:

Создание и настройка проекта React с помощью приложения Create React App

React — популярная система JavaScript для создания клиентских приложений. Первоначально эта система была разработана Facebook и быстро стала популярной, поскольку она позволяет разработчикам создавать быстрые приложения на основе интуитивно понятной парадигмы программирования, соединяющей JavaScript с похожим на HTML синтаксисом под названием JSX.

Раньше для создания нового проекта React требовался сложный процесс, состоящий из множества шагов и включающий систему для сборки, компилятор для конвертации современного синтаксиса в читаемый всеми браузерами код, а также базовую структуру директорий. Однако сейчас появилось приложение Create React App, включающее все пакеты JavaScript, необходимые для запуска проекта React, включая системы компиляции кода, проверки соблюдения стандартов кодирования, тестирования и сборки. Также приложение включает сервер с функцией горячей перезагрузки, обновляющей страницу при внесении изменений в код. Также оно создает структуру директорий и компонентов, позволяя перейти к программированию уже через несколько минут.

Другими словами, вам не нужно беспокоиться о настройке Webpack или другой системы сборки. Вам не нужно настраивать Babel для компиляции кода для совместимости с разными браузерами. Вам не нужно беспокоиться о работе со сложными системами разработки современных клиентских интерфейсов. Вы можете начать создание кода React с минимумом начальной подготовки.

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

Предварительные требования

Для прохождения этого обучающего руководства вам потребуется следующее:

Node.js версии 10.16.0, установленный на вашем компьютере. Чтобы установить его в macOS или Ubuntu 18.04, следуйте указаниям руководства Установка Node.js и создание локальной среды разработки в macOS или раздела Установка с помощью PPA руководства Установка Node.js в Ubuntu 18.04.

Также вам нужно понимать основы языка JavaScript, для изучения которого вам подойдет серия Программирование на JavaScript, а также обладать базовыми знаниями языков HTML и CSS.

Шаг 1 — Создание нового проекта с помощью приложения Create React App

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

При установке Node вы также установили приложение для управления пакетами npm . npm установит пакеты JavaScript для вашего проекта и будет отслеживать детали проекта. Если вы хотите узнать больше об npm , воспользуйтесь обучающим руководством Использование модулей Node.js с npm и package.json.

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

Используемый пакет выполнит установку create-react-app в указанную вами директорию. Для начала он создаст в директории новый пакет, которому в этом обучающем руководстве мы присвоим имя digital-ocean-tutorial . Если этой директории не существует, исполняемый пакет просто создаст ее. Скрипт также запустит команду npm install в директории проекта для загрузки всех дополнительных зависимостей.

Для установки базового проекта выполните следующую команду:

Эта команда запустит процесс сборки, во время которого будет загружен базовый код вместе с определенным числом зависимостей.

После успешного выполнения скрипта вы увидите соответствующее сообщение:

your_file_path будет текущим путем. Если вы используете macOS, путь будет выглядеть как /Users/ your_username ; а если вы используете сервер Ubuntu — /home/ your_username .

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

Примечание. Также для JavaScript можно использовать диспетчер пакетов yarn . Он поддерживается Facebook и во многом аналогичен по функционалу npm . Изначально в yarn были добавлены некоторые новые функции, такие как блокировка файлов, однако сейчас они реализованы и в npm . Кроме того, в yarn имеются и другие функции, такие как кэширование в автономном режиме. О других отличиях можно узнать из документации по yarn .

Если вы ранее устанавливали yarn в вашей системе, вы увидите список команд yarn , таких как yarn start . Эти команды работают так же, как и команды npm . Вы можете запускать команды npm , даже если у вас установлен yarn . Если вы предпочитаете yarn , просто заменяйте npm на yarn во всех будущих командах. Результат будет точно таким же.

Теперь ваш проект настроен в новой директории. Перейдите в новую директорию:

Теперь вы находитесь в корневой директории вашего проекта. Вы уже создали новый проект и добавили в него все зависимости. Однако вы не предприняли никаких действий для запуска проекта. В следующем разделе вы научитесь использовать пользовательские скрипты для сборки и тестирования проекта.

Шаг 2 — Использование скриптов react-scripts

На этом шаге вы узнаете о различных скриптах react-scripts , устанавливаемых вместе с репозиторием. Вначале вы запустите скрипт test для выполнения тестового кода. Затем вы запустите скрипт build для создания минифицированной версии. В заключение вы узнаете, как использовать скрипт eject для полного контроля персонализированной настройки.

Перейдите в директорию проекта и изучите ее. Вы можете открыть всю директорию в текстовом редакторе или вывести файлы из него в терминале с помощью следующей команды:

Флаг -a обеспечивает добавление в вывод скрытых файлов.

В любом случае вы увидите примерно следующую структуру:

Расскажем обо всех элементах подробнее:

node_modules/ содержит все внешние библиотеки JavaScript, используемые приложением. Вам нечасто потребуется использовать его.

Директория public/ содержит базовые файлы HTML, JSON и изображений. Это корневые ресурсы вашего проекта. Вы сможете узнать о них более подробно на шаге 4.

В директории src/ содержится код React JavaScript для вашего проекта. В основном вы будете работать именно с этой директорией. Более подробно мы расскажем об этой директории на шаге 5.

Файл .gitignore содержит несколько директорий и файлов по умолчанию, которые система контроля исходного кода git будет игнорировать, в том числе директорию node_modules . Игнорируемые элементы — это большие директории или файлы журнала, которые не нужны при контроле исходного кода. Также здесь указаны некоторые директории, которые вы создадите с помощью некоторых скриптов React.

README.md — это файл разметки, содержащий много полезной информации о приложении Create React App, в том числе обзор команд и ссылки на расширенные опции конфигурации. Сейчас лучше оставить файл README.md в первозданном виде. По мере развития проекта вы будете заменять данные по умолчанию более подробной информацией о вашем проекте.

Последние два файла используются вашим диспетчером пакетов. При запуске первоначальной команды npx вы создали базовый проект, а также установили дополнительные зависимости. При установке зависимостей вы создали файл package-lock.json . Этот файл используется npm для проверки точного соответствия версий пакетов. Так вы можете быть уверены, что если кто-то другой установит ваш проект, у него будут идентичные зависимости. Поскольку этот файл создается автоматически, вам нечасто потребуется редактировать его.

Последний файл — package.json . Он содержит метаданные о вашем проекте, включая заголовок, номер версии и зависимости. Также он содержит скрипты, которые вы можете использовать для запуска проекта.

Откройте файл package.json в предпочитаемом текстовом редакторе:

Открыв файл, вы увидите объект JSON, содержащий все метаданные. Если посмотреть на объект scripts , вы увидите, что он содержит четыре разных скрипта: start , build , test и eject .

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

Скрипт build

Для запуска любого скрипта npm нужно просто ввести в терминале команду npm run script_name . Существует несколько особых скриптов, где можно опустить run в составе команды, но вводить команду полностью никогда не будет ошибкой. Чтобы запустить скрипт build , введите в терминале следующую команду:

Вы немедленно увидите следующее сообщение:

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

После завершения вы увидите следующее:

Выведите содержимое проекта, и вы увидите несколько новых директорий:

Теперь у вас появилась директория build . Если вы открывали файл .gitignore , вы могли заметить, что директория build игнорируется git. Это связано с тем, что директория build просто представляет собой минифицированную и оптимизированную версию других файлов. Контроль версий не требуется, поскольку вы можете в любое время запустить команду build . О результатах выполнения этого скрипта мы поговорим чуть позже, а пока что перейдем к скрипту test .

Скрипт test

Скрипт test — один из специальных скриптов, для которых не требуется ключевое слово run , однако он будет работать и с этим ключевым словом. Этот скрипт запускает программу тестирования Jest. Программа тестирования ищет в проекте файлы с расширением .spec.js или .test.js , а затем запускает эти файлы.

Для запуска скрипта test введите следующую команду:

После запуска этого скрипта на вашем терминале будут выведены результаты тестирования, а командная строка терминала будет скрыта. Он будет выглядеть примерно так:

Здесь нужно обратить внимание на несколько вещей. Во-первых, как говорилось выше, тест автоматически обнаруживает все файлы с тестовыми расширениями, включая .test.js и .spec.js . В нашем случае у нас имеется только один тестовый набор, то есть только один файл с расширением .test.js , и этот набор содержит только один тест. Jest может обнаруживать тесты в иерархии кода, то есть вы можете размещать тесты в директории, и Jest найдет их там.

Во-вторых, Jest не просто запускает тест один раз и закрывается. Он продолжает работать в терминале. Если вы внесете изменения в исходный код, он проведет тесты снова.

Также вы можете ограничить состав запускаемых тестов, использовав одну из опций с клавиатуры. Например, если вы наберете o , тесты будут выполняться только с файлами, в которые были внесены изменения. Это поможет вам сэкономить много времени при увеличении объемов тестовых наборов.

Для выхода из системы тестирования следует ввести q . Сделайте это сейчас, чтобы вернуться в командную строку.

Скрипт eject

Последний скрипт называется npm eject . Этот скрипт копирует зависимости и файлы конфигурации в ваш проект, обеспечивая полный контроль над кодом, но при этом извлекая проект из интегрированной системы инструментов приложения Create React App. Сейчас мы не будем запускать этот скрипт, поскольку это действие нельзя отменить, а при его запуске вы потеряете все будущие обновления приложения Create React App.

Ценность приложения Create React App заключается в том, что вам не нужно беспокоиться о значительном количестве аспектов настройки конфигурации. Для создания современных приложений JavaScript требуется множество разных инструментов, от Webpack и других сборочных систем до Babel и других средств компиляции. Приложение Create React App выполняет за вас все задачи по настройке конфигурации, поэтому извлечение проекта из приложения означает, что вам придется вносить все сложные настройки самостоятельно.

Минус приложения Create React App заключается в том, что вы не можете полностью персонализировать проект. Для большинства проектов это неважно, однако если вы захотите полностью контролировать все аспекты процесса сборки, вам нужно будет выполнить извлечение кода. Однако, как мы уже говорили выше, после извлечения кода вы не сможете обновлять его с новыми версиями приложения Create React App, и вам придется вручную добавлять все улучшения.

На данный момент вы выполнили скрипты для сборки и тестирования вашего кода. На следующем шаге мы запустим проект на рабочем сервере.

Шаг 3 — Запуск сервера

На этом шаге вы инициализируете локальный сервер и запустите проект в своем браузере.

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

Запустите проект, введя следующую команду в корневой директории проекта. В данном обучающем руководстве в качестве корневой директории проекта выступает директория digital-ocean-tutorial . Откройте ее на отдельном терминале или вкладке, поскольку этот скрипт будет работать все время, пока вы это разрешаете:

Перед запуском сервера вы ненадолго увидите замещающий текст, а потом появится следующий экран:

Если вы запускаете скрипт в локальной системе, он откроет проект в окне браузера и переключит фокус с терминала на браузер.

Если этого не произойдет, вы можете открыть URL-адрес http://localhost:3000/ , чтобы увидеть сайт в работе. Если на порту 3000 уже запущен другой сервер, это не представляет проблемы. Приложение Create React App найдет следующий доступный порт и запустит сервер на нем. Другими словами, если у вас уже запущен проект на порту 3000 , новый проект будет запущен на порту 3001 .

При запуске с удаленного сервера вы все равно сможете увидеть свой сайт без дополнительной настройки. Он будет иметь адрес http:// your_server_ip :3000 . Если у вас включен и настроен брандмауэр, вам нужно будет открыть данный порт на удаленном сервере.

В браузере вы увидите следующий шаблон проекта React:

Пока скрипт работает, у вас будет активный локальный сервер. Для остановки скрипта следует закрыть окно или вкладку терминала или ввести CTRL+C или ⌘-+c в окне или на вкладке терминала, где выполняется ваш скрипт.

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

Шаг 4 — Изменение главной страницы

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

Если вы отключили сервер, запустите его с помощью команды npm start , а затем откройте public/ в предпочитаемом текстовом редакторе в новом окне терминала:

Также вы можете вывести список файлов с помощью команды ls :

Вы увидите список файлов следующего вида:

favicon.ico , logo192.png и logo512.png — это значки, которые пользователь будет видеть на вкладке браузера или в телефоне. Браузер автоматически выберет значок подходящего размера. Впоследствии вы можете заменить их на другие значки, которые лучше подойдут для вашего проекта. Пока же вы можете использовать их как есть.

Файл manifest.json содержит структурированный набор метаданных, описывающий ваш проект. Помимо прочего, в нем указывается, какие значки следует использовать для разных размеров экрана.

Файл robots.txt содержит информацию для поисковых роботов. Он указывает роботам, какие страницы можно индексировать, а какие нельзя. Вам не нужно изменять ни один из этих файлов, если у вас нет на это важных причин. Например, если вы хотите дать некоторым пользователям URL для доступа к особому контенту, который не должен быть общедоступным, вы можете добавить этот URL в файл robots.txt , и он останется общедоступным, но не будет индексироваться поисковыми системами.

Файл index.html представляет собой корневую часть вашего приложения. Именно этот файл считывает сервер, и именно его отображает ваш браузер. Откройте файл в текстовом редакторе и посмотрите на него.

Если вы работаете из командной строки, вы можете использовать следующую команду:

Вот что вы увидите:

Сам файл довольно короткий. В части <body> нет изображений или слов. Это связано с тем, что React самостоятельно строит всю структуру HTML и вставляет ее с помощью JavaScript. Однако React нужно знать, куда вставлять код, и для этого и используется файл index.html .

В текстовом редакторе измените значение тега <title> с React App на Sandbox :

Сохраните изменения и закройте текстовый редактор. Откройте файл в браузере. Заголовок отображается на вкладке браузера и должен обновиться автоматически. Если этого не произойдет, обновите страницу и посмотрите на изменения.

Теперь вернитесь в текстовый редактор. Каждый проект React начинается с корневого элемента. На странице может быть несколько корневых элементов, но один должен присутствовать обязательно. Так React узнает, куда поместить сгенерированный код HTML. Найдите элемент <div >. Этот элемент div будет использоваться React для всех будущих обновлений. Измените id с root на base :

В браузере вы увидите сообщение об ошибке:

React искал элемент с id root . Теперь этого элемента нет, и React не может запустить проект.

Измените имя с base на root :

Сохраните и закройте файл index.html .

Вы запустили сервер и внесли небольшое изменение в корневую страницу HTML. Пока еще вы не меняли код JavaScript. В следующем разделе мы начнем изменять код React JavaScript.

Шаг 5 — Изменение тега заголовка и стилей

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

Если вы остановили сервер, обязательно перезапустите его с помощью команды npm start . Познакомьтесь с содержимым директории src/ . Вы можете открыть полную директорию в предпочитаемом текстовом редакторе или вывести проект на терминал с помощью следующей команды:

Вы увидите в терминале или текстовом редакторе следующие файлы.

Рассмотрим каждый из этих файлов по отдельности.

Вначале вы не будете тратить много времени на файл serviceWorker.js , но он может оказаться важным, когда вы начнете создавать прогрессивные веб-приложения. Сервисный рабочий может выполнять много разных задач, в том числе отправлять push-уведомления и обеспечивать кэширование в автономном режиме, но пока что мы не будем его трогать.

Далее взглянем на файлы setupTests.js и App.test.js . Они используются для тестовых файлов. При запуске npm test на шаге 2 скрипт уже запускал эти файлы. Файл setupTests.js небольшой и содержит несколько настраиваемых методов expect . Вы узнаете о них больше в следующих обучающих руководствах этой серии.

Откройте файл App.test.js :

Когда вы откроете этот файл, вы увидите простой тест:

Этот тест проверяет наличие в документе фразы learn react . Если вы вернетесь в браузер, где запущен ваш проект, вы увидите фразу на странице. Тестирование React отличается от большинства блочных тестов. Поскольку компоненты могут содержать и визуальную информацию (например разметку), и логику управления данными, традиционные блочные тесты могут не сработать. Тестирование React скорее является формой функционального тестирования или тестирования интеграции.

Далее вы видите несколько файлов стилей: App.css , index.css и logo.svg . Существует много вариантов работы со стилями в React, но проще всего написать простой код CSS, не требующий дополнительной настройки.

Здесь имеется несколько файлов CSS, поскольку вы можете импортировать стили в компонент, как если бы они представляли собой другой файл JavaScript. Поскольку у вас имеется возможность импортировать CSS в компонент напрямую, вы также можете разделить файл CSS для его применения к отдельному компоненту. Так вы разделяете области беспокойства. Вы не храните все файлы CSS отдельно от JavaScript. Вместо этого все элементы CSS, JavaScript, разметки и изображений сгруппированы вместе.

Откройте файл App.css в предпочитаемом текстовом редакторе. Если вы работаете из командной строки, вы можете использовать следующую команду:

Вы увидите следующий код:

Это стандартный файл CSS без специальных инструментов предварительной обработки CSS. Если хотите, вы можете добавить их позднее, но вначале у вас будут только простые файлы CSS. Создатели приложения Create React App старались не делать его безапелляционным, но при этом предоставить полностью готовую среду.

Вернемся к файлу App.css . Одно из преимуществ приложения Create React заключается в том, что оно наблюдает за всеми файлами, и при внесении изменения вы увидите его в браузере без перезагрузки.

Чтобы увидеть это, внесем небольшое изменение в параметр background-color в файле App.css . Измените его с #282c34 на blue , а затем сохраните файл. Окончательный стиль будет выглядеть следующим образом:

Проверьте браузер. Вот как это выглядело раньше:

Вот как это будет выглядеть после изменения:

Измените значение background-color обратно на #282c34 .

Сохраните и закройте файл.

Вы внесли небольшое изменение в файл CSS. Теперь внесем изменения в код React JavaScript. Для начала откройте файл index.js .

Вы увидите следующее:

Прежде всего, вы импортируете React , ReactDOM , index.css , App и serviceWorker . Импортируя React , вы фактически извлекаете код для конвертации JSX в JavaScript. JSX — это элементы в стиле HTML. Обратите внимание, что при использовании App вы обращаетесь с ним как с элементом HTML <App /> . Вы узнаете об этом подробнее из следующих обучающих руководств этой серии.

ReactDOM — это код, который связывает ваш код React с базовыми элементами, такими как страница index.html , которую мы увидели в public/ . Посмотрите на следующую выделенную строку:

Этот код предписывает React найти элемент с id root и вставить в него код React. <App/> — это корневой элемент, от которого идут все ответвления. Это исходная точка для всего будущего кода React.

Вверху файла имеется несколько операций импорта. Мы импортируем index.css , но ничего не делаем с этим файлом. Импортируя его, мы предписываем Webpack через скрипты React включить этот код CSS в окончательную скомпилированную версию пакета. Если его не импортировать, он не будет отображаться.

Выйдите из файла src/index.js .

Пока что вы еще не видели ничего, что вы видите в браузере. Чтобы увидеть это, откройте файл App.js :

Код в этом файле выглядит как набор стандартных элементов HTML. Вы увидите следующее:

Измените содержимое тега <p> с Edit <code>src/App.js</code> and save to reload. на Hello, world и сохраните изменения.

Переключитесь в браузер, и вы увидите изменения:

Вы внесли первое изменение в компонент React.

Прежде чем заканчивать, обратите внимание еще на несколько вещей. В этом компоненте мы импортируем файл logo.svg и назначаем его переменной. Затем в элементе <img> мы добавляем этот код как src .

Здесь происходит еще несколько вещей. Посмотрите на элемент img :

Обратите внимание, как вы передаете logo в фигурных скобках. Каждый раз, когда вы передаете атрибуты, которые не являются строками или числами, вам нужно будет использовать фигурные скобки. React обрабатывает их как элементы JavaScript, а не как строки. В этом случае вы не импортируете образ, а ссылаетесь на него. Когда Webpack выполняет сборку проекта, он обрабатывает образ и задает для источника соответствующее место.

Закройте текстовый редактор.

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

Вот как это будет выглядеть в браузере:

В DOM содержится следующая строка:

Ваш код будет немного отличаться, поскольку у логотипа другое имя. Webpack нужно убедиться, что путь изображения уникальный. Так что даже если вы импортируете изображения с одинаковым именем, они будут сохраняться на разных путях.

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

Шаг 6 — Сборка проекта

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

Вернитесь в терминал и выполните сборку проекта. Вы уже запускали эту команду, но напомним, что она запускает скрипт build . В результате будет создан новая директория с комбинированными и минифицированными файлами. Для выполнения сборки запустите следующую команду из корневой директории проекта:

Возможна небольшая задержка, пока код будет компилироваться, а после завершения компиляции будет создана новая директория build/ .

Откройте build/index.html в текстовом редакторе.

Вы увидите примерно следующее:

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

Заключение

В этом обучающем руководстве вы создали свое первое приложение React и настроили проект с помощью инструментов сборки JavaScript без необходимости вдаваться в технические детали. В этом и заключается польза приложения Create React App: вам не нужно знать все, чтобы начать работу. Приложение позволяет игнорировать сложные этапы сборки и сосредоточиться исключительно на коде React.

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

Если вы хотите увидеть React в действии, пройдите обучающее руководство Отображение данных из DigitalOcean API с помощью React.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Гайд по Nest.js: что это такое и как написать свой первый код

Nest.js — самый важный и популярный фреймворк для создания серверных веб-приложений Node.js. В этом большом гайде мы поможем новичкам сделать первый шаг в освоении этого фреймворка для серверного JavaScript и расскажем, в чем вообще особенности Nest.js.

Для комфортного усвоения этого гайда вам потребуется:

• Знание JavaScript на среднем уровне
• Знание основ TypeScript, особенно синтаксиса декораторов
• Базовые знания Node.js. Желательно, опыт с Express.js
• Знание базовых понятий MVC (Model-View-Controller)

Также нам понадобятся установленные на компьютер:

• Node.js версии 10+. Инструкция по установке
• Docker

Docker мы будем использовать для развертывания базы данных. Развертывание СУБД в контейнере — один из самых простых способов. Но если вы хотите использовать другой способ, или же работать с уже имеющейся СУБД — нет проблем. В таком случае Docker вам не понадобится.

Прокачивайте свой уровень программирования: На Хекслете есть несколько десятков треков — специальных курсов для опытных программистов, позволяющие повысить уровень компетентности разработчика в разных направлениях.

Введение

Зачем нам нужен фреймворк?

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

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

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

Создадим проект

Чтобы каждый раз не приходилось настраивать проект с нуля, разработчики Nest.js вооружили нас консольной утилитой — @nestjs/cli . Установим ее глобально:

Теперь в вашей директории с проектами выполним команду nest new , указав имя проекта.

Когда cli закончит свою работу, мы можем перейти в директорию nestjs-getting-started и посмотреть, что получилось:

Все основные зависимости уже установлены, сборка TypeScript настроена. Кроме этого, создана папка src, которая и будет интересовать нас больше всего. Здесь уже есть несколько файлов — это демонстрационное приложение от создателей Nest.js.

Самое приятное, что приложение уже рабочее и его можно запустить. Делается это при помощи команды

Теперь, если ввести в адресную строку браузера http://localhost:3000 , то мы увидим возвращённую сервером фразу Hello world!.

Запущенное командой npm run start:dev приложение будет перезагружаться каждый раз, когда изменяется исходный код проекта.

Остановить работающее приложение можно комбинацией клавиш Ctrl+C .

Точка входа

Точкой входа в приложение на Nest.js, как и в любом другом MVC-подобном фреймворке, являются контроллеры. Пока в приложении имеется один: app.controller.ts:

Обратите внимание, что класс AppController и метод getHello() помечены декораторами @Controller() и @Get() . Nest.js очень широко использует декораторы, поэтому к ним лучше сразу привыкать. Они позволяют писать приложение в более декларативном ключе, указывая что мы хотим сделать, и оставляя детали реализации фреймворку.

Если читатель «плавает» в теме декораторов, рекомендуем к прочтению эту статью.

Декоратор @Get() говорит, что когда в приложение придёт HTTP-запрос методом GET на роут '/' (это значение по умолчанию, поэтому его можно не указывать), его следует направить в метод getHello() .

Соответственно, значение, которое вернётся из метода, будет отправлено в теле ответа. Код ответа по умолчанию для GET-запросов — 200.

Метод getHello() и конструктор мы пока удалим. Взамен создадим метод index() , который будет возвращать статьи. Контроллер приобретёт такой вид:

Теперь, зайдя на http://localhost:3000 мы вместо Hello world увидим такой JSON:

Обратите внимание, что мы возвращаем не «голый» массив, а заворачиваем его в объект c ключом articles . Нам это пригодится чуть дальше.

Статьи

Пришло время наполнить блог статьями. Но что такое «статья»? Каждая статья — объект, который будет иметь уникальный идентификатор, заголовок и контент.

Создадим в папке src новый файл article.model.ts и в нём опишем класс статьи:

Почему id — необязательный параметр, выяснится позже — когда будем подключать базу данных.

Теперь представим, что у нас в блоге уже есть парочка статей. Создадим файл articles.ts:

Осталось вернуть массив статей из метода index() в контроллере:

Если теперь запустить приложение, мы увидим в браузере следующее:

Добавляем HTML-шаблоны

Для того, чтобы пользователю было комфортнее работать с сайтом, сервер должен вернуть браузеру ответ не в формате json, а в виде html-страницы.

Создадим в корне проекта директорию views — в ней мы будем размещать HTML-шаблоны.

Устанавливаем шаблонизатор

Nest.js по умолчанию не устанавливает никаких движков шаблонизации, так как не знает, какой именно по душе пользователю. Мы для этого примера возьмём pug (ранее известный как jade). Этот пакет нам придется установить самостоятельно:

Чтобы подключить pug, перепишем функцию bootstrap ( main.ts ):

Первый шаблон

Наш первый шаблон index.pug будет выглядеть так:

Добавление стилей выходит за рамки этой статьи, поэтому оставим это на усмотрение читателя.

В контроллере добавим к методу index декоратор @Render() (импортируется из пакета @nestjs/common ):

@Render('index') указывает фреймворку, что те данные, которые возвращаются из метода нужно не просто вернуть браузеру, а использовать для отрисовки шаблона с названием index (расширение не важно).

Готово. Теперь при запуске приложения мы увидим то, что и ожидали — html-страницу с двумя статьями.

Добавляем просмотр статей

В app.controller.ts добавим в импорт декоратор @Param() и создадим новый метод:

Строка :id в декораторе @Get() означает, что в этот метод будут направлены запросы на корневой роут с параметром, например: GET http://localhost/1.

При помощи декоратора @Param() мы можем достать этот идентификатор из URL, преобразовать его к числу (ParseIntPipe) и использовать для поиска нужной статьи.

Кроме декоратора @Param() в Nest.js есть также декораторы @Query() для query-параметров и @Body() для тела запроса.

Добавим в папку views шаблон article.pug:

Шапка будет та же самая, только в тэге title мы выведем название статьи. В теле страницы — ожидаемо title и content , а также ссылка «назад» — на главную страницу.

Осталось починить ссылки на главной странице:

Теперь, зайдя на главную страницу, можно кликнуть по ссылке «Читать» у любой из статей и увидеть содержимое статьи. А при клике на «Назад» — вернуться к списку статей. Также можно зайти на страницу по прямой ссылке, например http://localhost:3000/1.

Добавляем статью

Чтобы создать новую статью, браузер должен отправить на сервер title и content POST-запросом. Чтобы реализовать это, добавим в контроллер перед методом article два новых метода:

Метод getForm() не требует никакого возвращаемого значения — он просто возвращает статический HTML.

В методе create() реализуем добавление статьи в коллекцию. Думаю, читатель уже догадался, что декоратор @Post() означает одноимённый HTTP-глагол. Декоратор @Body() указывает фреймворку, что данные для параметра нужно брать из тела запроса. И, наконец, декоратор @Redirect(‘/’, 301) говорит, что после добавления статьи требуется переадресовать пользователя. Первый аргумент — ‘/’ обозначает корневой роут (то есть, главную страницу), а 301 — код ответа.

Шаблон create-article.pug будет выглядеть так:

Добавление статей реализовано. На страницу добавления можно попасть, введя в адресной строке http://localhost:3000/create. Чтобы было чуть удобнее, добавим ссылку на эту страничку вниз списка статей. index.pug приобретёт такой вид:

Заключение

Nest.js позволяет нам написать простое приложение с минимальными усилиями. Однако истинная мощь фреймворка станет очевидна при более глубоком погружении. Среди особенно мощных возможностей, выделяющих его на фоне других:

• Декларативное программирование при помощи декораторов
• Встроенный DI-контейнер (кратко о DI и IoC)
• Мощные специализированные middleware: интерцепторы, пайпы, гарды
• Механизм обработки ошибок «из коробки»
• Поддержка любых протоколов, помимо HTTP. На Nest.js можно писать сервисы на основе RabbitMQ, Nats, Kafka или даже просто TCP-протокола.

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

Весь код учебного проекта, который мы использовали в этой статье в качестве примера, вы можете посмотреть здесь.

Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях.