Создание приложения для управления списком клиентов с помощью React и TypeScript: маршрутизация и точка входа
TypeScript внес много улучшений в структурирование и написание кода приложений JavaScript , особенно веб-приложений. Так называемый расширенный набор JavaScript, TypeScript ведет себя идентично JavaScript, но предоставляет дополнительные функции, цель которых – упростить разработку более крупных и сложных программ, уменьшить количество ошибок или полностью устранить их. TypeScript становится все популярнее и уже используется крупными компаниями (такими как Google – для веб-фреймворка Angular). Бэкенд фреймворк Nest.js также был разработан с помощью TypeScript.
Одним из способов повышения производительности труда разработчика является возможность максимально быстро внедрять новые функции, не беспокоясь о том, что существующее приложение перестанет работать. Для этого многие опытные разработчики пишут статически типизированный код. Статически типизированные языки программирования, такие как TypeScript, привязывают к каждой переменной тип данных (типы – строки, целые числа, логические данные и т. д.). Одним из основных преимуществ языка программирования со статической типизацией является то, что проверка типов завершается во время компиляции, поэтому разработчики могут увидеть ошибки в своем коде на самой ранней стадии.
React – это библиотека JavaScript с открытым исходным кодом, которую разработчики используют для создания высококачественных пользовательских интерфейсов масштабируемых веб-приложений. Высокая производительность и динамические пользовательские интерфейсы, созданные с помощью React, принесли этой библиотеке популярность среди разработчиков.
В этом мануале вы создадите приложение для управления списком клиентов с отдельным интерфейсом REST API и внешним интерфейсом, созданным с помощью React и TypeScript. Сейчас у вас уже есть основные повторно используемые компоненты приложения. Теперь нужно настроить маршрутизацию, обновить точку входа и, наконец, проверить, как работает полученное приложение.
Примечание: Создание основных компонентов приложения описано в этом мануале.
1: Настройка маршрутизации и обновление точки входа приложения
На этом этапе мы импортируем необходимые компоненты из пакета React Router и сконфигурируем компонент приложения для отображения остальных компонентов в зависимости от загруженного маршрута. Это позволит вам перемещаться по разным страницам приложения. Когда пользователь посещает какой-то маршрут, например /create, React Router будет использовать указанный путь для визуализации содержимого и построения логики в соответствующем компоненте, определенном для обработки такого маршрута.
Перейдите к ./src/App.tsx:
nano App.tsx
Затем замените его содержимое следующим:
import * as React from 'react';
import './App.css';
import { Switch, Route, withRouter, RouteComponentProps, Link } from 'react-router-dom';
import Home from './components/Home';
import Create from './components/customer/Create';
import EditCustomer from './components/customer/Edit';
class App extends React.Component<RouteComponentProps<any>> {
public render() {
return (
<div>
<nav>
<ul>
<li>
<Link to={'/'}> Home </Link>
</li>
<li>
<Link to={'/create'}> Create Customer </Link>
</li>
</ul>
</nav>
<Switch>
<Route path={'/'} exact component={Home} />
<Route path={'/create'} exact component={Create} />
<Route path={'/edit/:id'} exact component={EditCustomer} />
</Switch>
</div>
);
}
}
export default withRouter(App);
Вы импортировали все необходимые компоненты пакета React Router, а также повторно используемые компоненты для создания, редактирования и просмотра сведений о клиентах.
Сохраните и выйдите из App.tsx.
Файл ./src/index.tsx является точкой входа для этого приложения и отображает его. Откройте этот файл и импортируйте в него React Router, затем поместите компонент App в BrowserRouter:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root')
);
serviceWorker.unregister();
React Router использует компонент BrowserRouter для информирования приложения о навигации (такой как история и текущий путь).
Как только вы закончите редактирование Index.tsx, сохраните и закройте файл.
Сейчас нужно использовать Bootstrap, чтобы добавить стиль. Bootstrap – это популярная платформа HTML, CSS и JavaScript для разработки адаптивных мобильных проектов. Это позволяет разработчикам создавать привлекательный пользовательский интерфейс без необходимости писать много CSS. Он поставляется с адаптивной сеточной системой, которая придает веб-странице законченный вид.
Чтобы включить Bootstrap и стилизацию приложения, замените содержимое ./src/App.css следующим:
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';
.form-wrapper {
width: 500px;
margin: 0 auto;
}
.App {
text-align: center;
margin-top: 30px;
}
nav {
width: 300px;
margin: 0 auto;
background: #282c34;
height: 70px;
line-height: 70px;
}
nav ul li {
display: inline;
list-style-type: none;
text-align: center;
padding: 30px;
}
nav ul li a {
margin: 50px 0;
font-weight: bold;
color: white;
text-decoration: none;
}
nav ul li a:hover {
color: white;
text-decoration: none;
}
table {
margin-top: 50px;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Bootstrap улучшит внешний вид приложения с помощью указанного макета, стиля и цвета по умолчанию. Вы также добавили несколько пользовательских стилей, в частности в панель навигации.
Сохраните и выйдите из App.css.
Вы настроили React Router для рендеринга компонентов в зависимости от маршрута, который посетил пользователь, а также добавили стили для повышения привлекательности приложения. Пора протестировать всю функциональность приложения.
2: Запуск приложения
Теперь, когда вы настроили внешний интерфейс с помощью React и TypeScript, создав несколько повторно используемых компонентов и REST API с помощью json-server, вы можете попробовать запустить свое приложение.
Вернитесь в корневую папку проекта:
cd ~/typescript-react-app
Затем введите следующую команду, чтобы запустить ваше приложение:
yarn start
Примечание: Убедитесь, что ваш сервер все еще работает в другом окне терминала. В противном случае, запустите его с помощью yarn server.
Перейдите по адресу http://localhost:3000, чтобы просмотреть приложение в браузере. Затем нажмите кнопку Create и введите данные клиента.
Введите соответствующие значения в поля и нажмите кнопку Create Customer, чтобы отправить форму. Приложение перенаправит вас обратно на домашнюю страницу, когда вы создадите нового клиента.
Нажмите кнопку Edit Customer в любой строчке, и вы будете перенаправлены на страницу, на которой размещены функции редактирования для соответствующего клиента в этой строке.
Отредактируйте данные клиента и затем нажмите Edit Customer, чтобы обновить данные.
Итак, вы запустили свое приложение, чтобы убедиться, что все компоненты работают.
Заключение
В этом мануале вы создали приложение для управления списком клиентов с помощью React и TypeScript. Процесс в этом руководстве отличается от традиционного способа использования JavaScript для структурирования и создания приложений.
Чтобы продолжить разработку этого проекта, вы можете переместить свой фиктивный бэкенд сервер на готовую к работе бэкенд технологию, такую как Express или Nest.js.
Кроме того, вы можете расширить то приложение, что вы создали в этом мануале, добавив новые функции, такие как аутентификация и авторизация. Это можно сделать с помощью различных инструментов, например, с помощью библиотеки аутентификации Passport.js.
Вы можете найти полный исходный код проекта на GitHub.
Tags: Javascript, Node.js, React, TypeScript