GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → yury-dymov → Habr App

yury-dymov / Habr App

Licence: mit
React tutorial for Habrahabr

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactreduxwebpackeslintreact-boilerplate

Projects that are alternatives of or similar to Habr App

React Boilerplate
React Boilerplate
Stars: ✭ 128 (+10.34%)
Mutual labels:  webpack, eslint, react-boilerplate
Vue Web Extension
🛠️ A Vue CLI 3+ preset (previously a Vue CLI 2 boilerplate) for quickly starting a web extension with Vue, Babel, ESLint and more!
Stars: ✭ 1,147 (+888.79%)
Mutual labels:  webpack, eslint
Bathe
The simplest WordPress starter theme including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, Eslint, imagemin, Browsersync, etc.
Stars: ✭ 65 (-43.97%)
Mutual labels:  webpack, eslint
Threejs Es6 Webpack Starter
Three.js ES6 starter project with a sane webpack configuration
Stars: ✭ 85 (-26.72%)
Mutual labels:  webpack, eslint
React Redux Auth0 Kit
Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Stars: ✭ 115 (-0.86%)
Mutual labels:  webpack, eslint
Astexplorer.app
https://astexplorer.net with ES Modules support and Hot Reloading
Stars: ✭ 65 (-43.97%)
Mutual labels:  webpack, eslint
Mostly
They mostly come at night; mostly.
Stars: ✭ 78 (-32.76%)
Mutual labels:  webpack, eslint
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-69.83%)
Mutual labels:  webpack, eslint
Simple React Calendar
A simple react based calendar component to be used for selecting dates and date ranges
Stars: ✭ 97 (-16.38%)
Mutual labels:  webpack, eslint
Vuedemo sell eleme
ele by vue2.x 🐧
Stars: ✭ 1,349 (+1062.93%)
Mutual labels:  webpack, eslint
Lecture Frontend Dev Env
"[인프런] 프론트엔드 개발환경의 이해와 실습" 강의 실습 자료입니다.
Stars: ✭ 108 (-6.9%)
Mutual labels:  webpack, eslint
Vue Music
使用vue2.0构建音乐播放器
Stars: ✭ 60 (-48.28%)
Mutual labels:  webpack, eslint
React Boilerplate
Production-ready boilerplate for building universal web apps with React and Redux
Stars: ✭ 53 (-54.31%)
Mutual labels:  webpack, react-boilerplate
Starter React Flux
Generate your React PWA project with TypeScript or JavaScript
Stars: ✭ 65 (-43.97%)
Mutual labels:  webpack, eslint
Webgl Structure
🚀 A modern, ES6 based, javascript structure for WebGL based projects with THREE.js!
Stars: ✭ 44 (-62.07%)
Mutual labels:  webpack, eslint
Cordovue
A sample Apache Cordova application using VueJS.
Stars: ✭ 66 (-43.1%)
Mutual labels:  webpack, eslint
Easywebpack Cli
A Powerful Cross-platform Webpack CLI Tool
Stars: ✭ 110 (-5.17%)
Mutual labels:  webpack, react-boilerplate
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-72.41%)
Mutual labels:  webpack, eslint
Budgeting
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Stars: ✭ 971 (+737.07%)
Mutual labels:  webpack, eslint
Fork Ts Checker Webpack Plugin
Webpack plugin that runs typescript type checker on a separate process.
Stars: ✭ 1,343 (+1057.76%)
Mutual labels:  webpack, eslint
View All Similar Projects ➔

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].