Node JS и React - как создать фулстек приложение. Полное руководство
2 года назад·3 мин. на чтение
React приложение и бэкенд на NodeJS это хорошее сочетание, которое подойдет для реализации практически любых сервисов. Эта статья поможет вам быстро создать фулстек приложение.
Необходимые инструменты
Перед началом нужно убедиться, что на компьютере установлены все необходимые библиотеки, IDE и ПО, а именно:- NodeJS и npm. Их можно скачать с официального сайта nodejs.org. npm установится автоматически вместе с NodeJS.
- Предпочитаемый IDE, например, Visual Studio Code.
- Опционально, установить git для удобной работы с кодом.
О приложении
В этой статье напишем приложение, которое будет получать и отображать список дел. Структура папок будет выглядеть следующим образом.app/ frontend/ backend/
Создание бэкэнда на NodeJS
Запустим команду в папкеapp/backend
для инициализации проекта:
Эта команда создаст файлnpm init -y
package.json
. Этот файл содержит как общую информацию о проекте (название, версия, описание и т.д.), так и информацию о зависимостях, скрипты для запуска, сборки и тестирования.
Для создания сервера будем использовать express. Установим его с помощью команды:
Создадим файлnpm i express
index.js
, который будет содержать код для запуска сервера. Этот код запускает веб сервер на порту 3010
, если он не задан в переменных среды.
// backend/index.js const express = require('express'); const PORT = process.env.PORT || 3010; const app = express(); app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); next(); }); app.listen(PORT, () => { console.log(`Server listening on ${PORT}`); });
package.json
. В результате сможем запускать наш сервер с помощью команды npm start
.
Из директории// backend/package.json ... "scripts": { "start": "node ./index.js" }, ...
app/backend
запустим команду npm start
. Если ошибок нет, получим сообщение, что сервер прослушивает порт 3010.
PS C:\tutorials-coding\nodejs-react-app\backend> npm start > backend@1.0.0 start > node ./index.js Server listening on 3010
Создание API
API это интерфейс, с помощью которого React приложение будет общаться с веб-сервером, т.е. запрашивать, изменять или удалять данные. В нашем случае мы создадим API для получения списка дел в формате JSON. Создадим файлtodo-items.json
c объектами todo. Этот массив будем отдавать по запросу /api/todo-items
.
[ { "id": 1, "text": "Изучить NodeJS", "done": true }, { "id": 2, "text": "Изучить ReactJS", "done": true }, { "id": 3, "text": "Написать приложение", "done": false } ]
/api/todo-items
. React приложение будет отправлять GET
запрос на этот эндпоинт.
Для того чтобы изменения вступили в силу, нужно перезапустить NodeJS сервер. Для остановки скрипта - в терминале, в котором запущен// backend/index.js // ... const todoItems = require('./todo-items.json'); app.get('/api/todo-items', (req, res) => { res.json({ data: todoItems }); }); app.listen(PORT, () => { console.log(`Server listening on ${PORT}`); });
npm start
, нужно нажать Ctrl + C
(Command + C
). Далее снова запускаем npm start
.
Для проверки эндпоинта, в браузере перейдем по адресу http://localhost:3010/api/todo-items
. В результате получим, такой ответ.
Создание фронтенда на React
В папкеapp/
откроем новый терминал и запустим команду для создания React приложения, где frontend
имя нашего приложения.
Дождемся установки всех зависимостей. В терминале перейдем в папкуnpx create-react-app@latest frontend
frontend
.
Установим библиотеку bootstrap для дальнейшего использования готовых компонентов.cd ./frontend
Заимпортируемnpm install react-bootstrap bootstrap
bootstrap.min.css
в файле frontend/src/index.js
.
Запустим приложение командойimport 'bootstrap/dist/css/bootstrap.min.css';
npm start
.
Получим следующее сообщение. Перейдем по указанному адресу в браузере.npm start
Compiled successfully! You can now view frontend in the browser. Local: http://localhost:3003 On Your Network: http://192.168.99.1:3003 Note that the development build is not optimized. To create a production build, use npm run build.
Отправка HTTP запроса из React в NodeJS
К этому моменту у нас уже есть рабочий сервер, который умеет принимать запросы и отдавать данные. Сделаем запрос на/api/todo-items
из React приложения. Для этого вызовем функцию fetch
из хука useEffect
в файле App.js
.
Открыв приложение в браузере, получим такой результат. Исходный код// frontend/src/App.js import { useState, useEffect } from 'react'; import Form from 'react-bootstrap/Form'; import './App.css'; function App() { const [todoItems, setTodoItems] = useState([]); useEffect(() => { fetch('http://localhost:3010/api/todo-items') .then((res) => res.json()) .then((result) => setTodoItems(result.data)); }, []); return ( <div> {todoItems.map((item) => ( <Form.Group key={item.id} className="app__todo-item"> <Form.Check type="checkbox" checked={item.done} /> <Form.Control type="text" value={item.text} /> </Form.Group> ))} </div> ); } export default App;
12 полезных советов и трюков с JavaScript массивами
2 года назад·4 мин. на чтение
Массив является одним из самых распространенных структур в JavaScript, который дает нам много возможностей для работы с данными.
Принимая во внимание, что массив является одной из основных тем в JavaScript, о которой вы узнаете в начале своего пути программирования, в этой статье рассмотрим несколько трюков, о которых вы, возможно, не знаете и которые могут быть очень полезны в разработке.
3. Как трансформировать JavaScript массив не используя
Вероятно, все знают метод массивов
1. Как удалить дубликаты из JavaScript массива?
Это очень популярный вопрос интервью о массивах JavaScript, о том, как извлечь уникальные значения из массива JavaScript. Вот быстрое и простое решение этой проблемы, вы можете использоватьnew Set()
для этой цели. Рассмотрим два способа сделать это, один с помощью метода .from()
, а второй с оператором spread (...
).
Еще несколько способов удаления дубликатов из JavaScript массива описаны в статье "Как удалить повторяющиеся элементы массива в JavaScript?"const fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]; // Первый способ const uniqueFruits = Array.from(new Set(fruits)); console.log(uniqueFruits); // возвращает ["banana", "apple", "orange", "watermelon", "grape"] // Второй способ const uniqueFruits2 = […new Set(fruits)]; console.log(uniqueFruits2); // возвращает ["banana", "apple", "orange", "watermelon", "grape"]
2. Как заменить определенное значение в JavaScript массиве?
Иногда при написании кода необходимо заменить определенное значение в массиве, и для этого есть хороший короткий метод, о котором вы, возможно, еще не знаете. Для этого мы можем использовать.splice(start, value to remove, valueToAdd)
и передать туда все три параметра, указывающие, где мы хотим начать модификацию, сколько значений мы хотим изменить, и новые значения.
const fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]; fruits.splice(0, 2, "potato", "tomato"); console.log(fruits); // возвращает ["potato", "tomato", "orange", "watermelon", "apple", "orange", "grape", "apple"]
3. Как трансформировать JavaScript массив не используя .map()
?
Вероятно, все знают метод массивов .map()
, но есть другое решение, которое может быть использовано для получения аналогичного эффекта и очень чистого кода. Для этой цели мы можем использовать метод .from()
.
const friends = [ { name: "John", age: 22 }, { name: "Peter", age: 23 }, { name: "Mark", age: 24 }, { name: "Maria", age: 22 }, { name: "Monica", age: 21 }, { name: "Martha", age: 19 }, ] const friendsNames = Array.from(friends, ({name}) => name); console.log(friendsNames); // возвращает ["John", "Peter", "Mark", "Maria", "Monica", "Martha"]
4. Как очистите JavaScript массив?
Что делать если по каким-то причинам нужно очистить массив, но не хочется удалять элементы по одному? Это очень просто сделать одной строкой кода. Чтобы очистить массив, вам нужно установить длину массива равным0
, и все.
const fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]; fruits.length = 0; console.log(fruits); // возвращает []
5. Как в JavaScript преобразовать массив в объект?
Бывает, что у нас есть массив, но для какой-то цели нам нужен объект с этими данными, и самый быстрый способ преобразовать массив в объект — использовать известный оператор spread (...
).
const fruits = ["banana", "apple", "orange", "watermelon"]; const fruitsObj = { ...fruits }; console.log(fruitsObj); // возвращает { 0: "banana", 1: "apple", 2: "orange", 3: "watermelon", 4: "apple", 5: "orange", 6: "grape", 7: "apple" }
6. Как заполнить данными массив в JavaScript?
Бывают ситуации, когда мы создаем массив, и мы хотели бы заполнить его какими-то данными, или нам нужен массив с одинаковыми значениями, и в этом случае можно использовать метод.fill()
.
const newArray = new Array(10).fill("1"); console.log(newArray); // возвращает ["1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"]
7. Как объединить несколько массивов в JavaScript?
Знаете ли вы, как объединить массивы в один массив без использования метода.concat()
? Существует простой способ объединить любое количество массивов в один одной строкой кода. Как вы, наверное, уже поняли, оператор spread (...
) довольно полезен при работе с массивами и в данном случае он тоже применим.
const fruits = ["apple", "banana", "orange"]; const meat = ["beef", "fish"]; const vegetables = ["potato", "tomato", "cucumber"]; const food = [...fruits, ...meat, ...vegetables]; console.log(food); // ["apple", "banana", "orange", "beef", "fish", "potato", "tomato", "cucumber"]
8. Как удалить ложные значений из JavaScript массива?
Сначала определим ложные значения. В JavaScript ложными значениями являютсяfalse
, 0
, ""
, null
, NaN
, undefined
. Теперь мы можем узнать, как удалить такого рода значения из нашего массива. Для этого мы будем использовать метод .filter()
.
const mixedArr = [0, "blue", "", NaN, 9, true, undefined, "white", false]; const trueArr = mixedArr.filter(Boolean); console.log(trueArr); // возвращает ["blue", 9, true, "white"]
9. Как получить случайное значение из JavaScript массива?
Иногда нам нужно выбрать значение из массива случайным образом. Простой, быстрый и короткий способ - получить случайный индекс в соответствии с длиной массива. Давайте посмотрим код:const colors = ["blue", "white", "green", "navy", "pink", "purple", "orange", "yellow", "black", "brown"]; const randomColor = colors[(Math.floor(Math.random() * (colors.length)))]
10. Как реверсировать массив на JavaScript?
Когда нам нужно перевернуть наш массив, нет необходимости создавать его через сложные циклы и функции, есть простой метод массива, который делает все это за нас, и с одной строкой кода мы можем повернуть наш массив вспять. Давайте проверим:const colors = ["blue", "white", "green", "navy", "pink", "purple", "orange", "yellow", "black", "brown"]; const reversedColors = colors.reverse(); console.log(reversedColors); // возвращает ["brown", "black", "yellow", "orange", "purple", "pink", "navy", "green", "white", "blue"]
11. Как получить n-й с конца элемент массива в JavaScript?
В JavaScript есть интересный метод, позволяющий найти индекс последнего вхождения данного элемента. Например, если наш массив имеет повторяющиеся значения, мы можем найти позицию последнего его вхождения. Рассмотрим пример кода:const nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7]; const lastIndex = nums.lastIndexOf(5); console.log(lastIndex); // возвращает 9
12. Как просуммировать все значения в JavaScript массиве?
Это еще одна популярная задача, которая очень часто возникает во время JavaScript собеседования. Здесь нет ничего сложного; ее можно решить с помощью метода.reduce
одной строкой кода. Давайте проверим код:
const nums = [1, 5, 2, 6]; const sum = nums.reduce((x, y) => x + y); console.log(sum); // возвращает 14