От автора: в одном из предыдущих уроков мы познакомились с React и JSX. В этом уроке мы узнаем, как создать приложение на React. Особое внимание мы уделим маршрутизации в React приложениях при помощи react-router.
Начинаем
Начнем с инициализации нашего проекта с помощью npm.
|
1 2 3 |
mkdir reactRoutingApp cd reactRoutingApp npm init |
Установите обязательные библиотеки react и react-dom в проект.
|
1 |
npm install react react-dom --save |
Мы будем использовать запаковщик модулей webpack в этом проекте. Установите webpack и webpack development server.
|
1 |
npm install webpack webpack-dev-server --save-dev |
Конвертировать синтаксис JSX в JavaScript мы будем с помощью Babel. Установите пакет лейблов в наш проект.
|
1 |
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 |
webpack-dev-server необходим файл конфигурации, где мы пропишем входной файл, выходной файл, а также загрузчик лейблов. Вот так будет выглядеть наш файл webpack.config.js:
|
1 2 3 4 5 6 7 8 9 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 приложении.
|
1 2 3 4 5 6 7 8 9 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.html.
Запустим сервер webpack. Приложение должно запуститься и показать сообщение из компонента.
|
1 |
webpack-dev-server |
Перейдите в своем браузере по адресу localhost:8080/app.html, это должно запустить приложение.
Создаем виды React
Только что мы запустили приложение на React. Давайте создадим пару видов для нашего приложения по маршрутизации. Чтобы все не усложнять, все компоненты мы создадим в одном файле app.js.
Создадим главный компонент navigation в файле app.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const Navigation = () => { return ( <section> <App /> <ul> <li>{'Home'}</li> <li>{'Contact'}</li> <li>{'About'}</li> </ul> </section> ); }; |
В компоненте Navigation у нас есть заголовок приложения и вновь созданное меню для перемещения между экранами. Компонент довольно простой, HTML код стандартный. Давайте создадим экраны для страниц Contact и About.
|
1 2 3 4 5 6 7 8 9 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.
Соединяем виды с помощью react-router
Чтобы соединить разные виды, нам понадобится react-router. Установите react-router через npm.
|
1 |
npm install react-router --save |
Импортируйте нужную библиотеку из react-router в app.js.
|
1 |
import {Link, Route, Router} from 'react-router'; |
Чтобы не прописывать, какой компонент нужно нарисовать, мы зададим разные маршруты в нашем приложении. Для этого нам понадобится react-router. Пропишем маршруты для экранов Home, Contact и About.
|
1 2 3 4 5 6 7 8 9 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') ); |
Когда пользователь будет заходить на маршрут /, будет отрисовываться компонент Navigation. При заходе на /about будет отрисовываться компонент About, а при переходе на /contact будет отрисовываться Contact.
Измените экраны About и Contact, добавьте в них ссылку на домашний экран. Для связки экранов мы будем использовать Link, который работает точно так же, как HTML ссылка.
|
1 2 3 4 5 6 7 8 9 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, добавьте ссылки на остальные экраны.
|
1 2 3 4 5 6 7 8 9 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 |
Перейдите в браузере по адресу localhost:8080/app.html, и перед вами откроется приложение с настроенной базовой маршрутизацией.
Заключение
В этом уроке мы узнали, как создать приложение в React, а также как связать компоненты с помощью react-router. Мы научились создавать разные маршруты и связывать их при помощи react-router.
Вы уже работали с react-router или любой другой библиотекой для маршрутизации? Пишите об этом в комментариях.
Исходники можно посмотреть на GitHub.
Автор: Roy Agasthyan
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
