В одном из моих предыдущих руководств мы увидели, как начать работу с React и JSX . В этом уроке мы увидим, как начать настройку и создание приложения React. Мы сосредоточимся на том, как обрабатывать маршрутизацию в приложении React с использованием react-router .
Начиная
Давайте начнем с запуска нашего проекта с помощью Node Package Manager (npm).
|
1
2
3
|
mkdir reactRoutingApp
cd reactRoutingApp
npm init
|
Установите в проекте необходимые библиотеки react и react-dom .
|
1
|
npm install react react-dom —save
|
Мы будем использовать webpack модуль для этого проекта. Установите webpack и сервер разработки webpack пакетов.
|
1
|
npm install webpack webpack-dev-server —save-dev
|
Мы будем использовать Babel для преобразования синтаксиса JSX в JavaScript. Установите следующий пакет babel в нашем проекте.
|
1
|
npm install —save-dev babel-core babel-loader babel-preset-react babel-preset-es2015
|
webpack-dev-server требуется файл конфигурации, в котором мы определим входной файл, выходной файл и загрузчик babel. Вот как будет выглядеть наш файл webpack.config.js :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
module.exports = {
entry: ‘./app.js’,
module: {
loaders: [
{
exclude: /node_modules/,
loader: ‘babel-loader?presets[]=es2015&presets[]=react’
}
]
},
output: {
filename: ‘bundle.js’
}
};
|
Далее мы создадим app.html где будет отображаться приложение React.
|
1
2
3
4
5
6
7
8
9
|
<html>
<head>
<title>TutsPlus — React Routing Basic</title>
</head>
<body>
<div id=»app»></div>
<script src=»bundle.js»></script>
</body>
</html>
|
Давайте создадим файл точки входа app.js для нашего приложения React.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
import React from ‘react’;
import {render} from ‘react-dom’;
const App = () => {
return (
<h2>{‘TutsPlus — Welcome to React Routing Basic!’}</h2>
);
};
render(
<App />,
document.getElementById(‘app’)
);
|
Как видно из приведенного выше кода, мы импортировали react и react-dom . Мы создали компонент без сохранения состояния, который называется App возвращает заголовок. Функция render отображает компонент внутри элемента app на странице app.html .
Давайте запустим сервер веб-пакетов, и приложение должно быть запущено и отображать сообщение от компонента.
|
1
|
webpack-dev-server
|
Укажите в браузере http: // localhost: 8080 / app.html, и приложение должно быть запущено.
Создание React Views
Теперь мы работаем с нашим приложением React. Давайте начнем с создания пары представлений для нашего приложения маршрутизации React. Для простоты мы создадим все компоненты в одном файле app.js
Давайте создадим основной компонент с именем navigation в app.js
|
01
02
03
04
05
06
07
08
09
10
11
12
|
const Navigation = () => {
return (
<section>
<App />
<ul>
<li>{‘Home’}</li>
<li>{‘Contact’}</li>
<li>{‘About’}</li>
</ul>
</section>
);
};
|
В вышеуказанном компоненте Navigation у нас есть заголовок приложения и недавно созданное меню для навигации по различным экранам приложения. Компонент довольно простой, с базовым HTML-кодом. Давайте продолжим и создадим экраны для контактов и информации.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
const About = () => {
return (
<section>
<h2>{‘Welcome to About!’}</h2>
</section>
);
};
const Contact = () => {
return (
<section>
<h2>{‘Welcome to Contact!’}</h2>
</section>
);
};
|
Мы только что создали компонент для отображения экранов « About и « Contact .
Подключение просмотров с помощьюact-router
Для соединения разных представлений мы будем использовать react-router . Установите react-router используя npm.
|
1
|
npm install react-router —save
|
Импортируйте нужную библиотеку app.js react-router в app.js
|
1
|
import {Link, Route, Router} from ‘react-router’;
|
Вместо того, чтобы указывать, какой компонент визуализировать, мы определим различные маршруты для нашего приложения. Для этого воспользуемся react-router .
Давайте определим маршруты для главного экрана, экрана контактов и экрана «О программе».
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
render(
<Router>
<Route
component={Navigation}
path=»/»
/>
<Route
component={About}
path=»/about»
/>
<Route
component={Contact}
path=»/contact»
/>
</Router>,
document.getElementById(‘app’)
);
|
Когда пользователь посещает / route, визуализируется компонент Navigation , при посещении /about компоненте About отображается и /contact рендерит компонент Contact .
Измените экраны « About и « Contact чтобы включить ссылку на главный экран. Для ссылок на экранах мы будем использовать Link , которая работает аналогично тегу привязки HTML.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
const About = () => {
return (
<section>
<h2>{‘Welcome to About!’}</h2>
<Link to=»/»>{‘Back to Home’}</Link>
</section>
);
};
const Contact = () => {
return (
<section>
<h2>{‘Welcome to Contact!’}</h2>
<Link to=»/»>{‘Back to Home’}</Link>
</section>
);
};
|
Измените компонент « Navigation добавив ссылку на другие экраны с главного экрана.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
const Navigation = () => {
return (
<section>
<App />
<ul>
<li>{‘Home’}</li>
<li>
<Link to=»/contact»>{‘Contact’}</Link>
</li>
<li>
<Link to=»/about»>{‘About’}</Link>
</li>
</ul>
</section>
);
};
|
Сохраните изменения и перезапустите сервер webpack .
|
1
|
webpack-dev-server
|
Укажите в браузере http: // localhost: 8080 / app.html , и вы должны запустить приложение с базовой маршрутизацией.
Завершение
В этом уроке мы увидели, как начать создавать приложение React и соединять различные компоненты вместе с react-router . Мы узнали, как определять различные маршруты и связывать их вместе, используя react-router .
Вы пытались использовать react-router или любую другую библиотеку маршрутизации? Дайте нам знать ваши мысли в комментариях ниже.
Исходный код из этого урока доступен на GitHub .