habr-appReact tutorial for Habrahabr
React isomorphic / universal front-end application with authentication tutorial for HabraHabr
Эта ветка соответствует состоянию приложения из третьей части статьи для Хабрахабра
Состояние приложения из первой части можно найти в ветке v1
Состояние приложения из второй части можно найти в ветке v2
React Tutorial
Я написал цикл из трех статей для habrahabr, который поможет новичкам собрать стек React-приложения с нуля, добавляя шаг за шагом различные библиотеки и компоненты с полным пониманием того, что и зачем делается. К концу третьей части статьи получается сайт, который ничем не отличается от существующих крупных и успешных проектов с точки зрения архитектуры и механизмов работы с пользователями и внешними информационными системами.
Ключевые слова
- react
- redux
- isomorphic / universal web-application
- server-side rendering
- authentication
- omniauth
- API
- node.js
Установка и запуск
- Устанавливаем зависимости
npm instal
- Запускаем серверную часть
npm run nodemon
- Запускаем webpack-dev-server, который будет отдавать клиентские js, css и другие ресурсы
npm run webpack-devserver
Приложение будет доступно по адресу http://localhost:3001 Внимание: для корректной работы необходимо, чтобы nodemon и webpack-dev-server были запущены одновременно!
Содержание
Первая часть
- Создаем node.js приложение
- Добавляем express и пишем заготовку для серверной части изоморфного приложения
- Добавляем и настраиваем babel
- Добавляем webpack, пишем конфиг сборки клиентского JavaScript
- Добавляем eslint и определяем требования к исходному коду
- Добавляем react и react-dom
- Создаем компонент "Hello World"
Вторая часть
- Добавляем react-bootstrap и создаем общий layout приложения
- Создаем несколько страниц
- Добавляем react-router и настраиваем навигацию для сайта
- Добавляем redux и учимся работать с состоянием
Третья часть
- Добавляем redux-devtools
- Добавляем redux-oauth и реализуем аутификацию
- Реализуем взаимодействие с внешними источниками данных
- Добавляем запросы к API в server-side rendering
Copyright
Yury Dymov, 2016.