JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src SSR fix v2.0 Jan 8, 2017
.babelrc
.eslintrc
.gitignore
LICENSE
README.md
package.json
server.js
webpack.config.js

README.md

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.