/habr-app

React tutorial for Habrahabr

Primary LanguageJavaScriptMIT LicenseMIT

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

Установка и запуск

  1. Устанавливаем зависимости
npm instal
  1. Запускаем серверную часть
npm run nodemon
  1. Запускаем 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.