https://github.com/dmnsgn/react-redux-workshop

An introductory workshop featuring React, Redux, react-router, i18next, gsap and createjs.
https://github.com/dmnsgn/react-redux-workshop

createjs gsap i18next react react-redux react-router react-router-v4 redux workshop

Last synced: 6 days ago
JSON representation

An introductory workshop featuring React, Redux, react-router, i18next, gsap and createjs.

• Host: GitHub
• URL: https://github.com/dmnsgn/react-redux-workshop
• Owner: dmnsgn
• Created: 2017-03-07T11:01:22.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2024-08-27T20:04:04.000Z (5 months ago)
• Last Synced: 2024-12-03T02:54:56.401Z (about 2 months ago)
• Topics: createjs, gsap, i18next, react, react-redux, react-router, react-router-v4, redux, workshop
• Language: JavaScript
• Homepage: https://react-redux-workshop.firebaseapp.com/
• Size: 10.7 MB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
React Redux Workshop

====================

## Requirements

* `node` >= 6

* `npm` >= 3 or `yarn`

## Optional

* [React Devtools extension](https://github.com/facebook/react-devtools)

* [Redux Devtools extension](https://github.com/zalmoxisus/redux-devtools-extension)

## Editor packages

* [Babel Sublime](https://github.com/babel/babel-sublime)

* [atom language-babel](https://atom.io/packages/language-babel)

## Glossary

* [01 - Setup](/workshop/01-setup.md)

* [02 - React](/workshop/02-react.md)

* [03 - Redux](/workshop/03-redux.md)

* [04 - Router](/workshop/04-router.md)

* [05 - i18n](/workshop/05-i18n.md)

* [06 - Preloading](/workshop/06-preloading.md)

* [07 - Case study: complex transitions](/workshop/07-case-study-complex-transitions.md)

* [Going further](/workshop/going-further.md)

## What are we going to learn?

* A view library and a syntax extension for JS: [React](https://facebook.github.io/react/) and [JSX](https://facebook.github.io/jsx/)

* A data state model: [Redux](https://github.com/reactjs/redux/) and the [react-redux](https://github.com/reactjs/react-redux/) binding

* A routing library: [react-router](https://reacttraining.com/react-router/) v4

* Typechecking: built-in PropTypes

* Asset preloading and i18n integration

* A real life example using complex loading and transitions

## JavaScript features used:

* [Module syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)

* [Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)

* [Template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals)

* [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

* [Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

* [Spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)

* [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)

* [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

## Final result

[Demo](https://react-redux-workshop.firebaseapp.com/)

---

Next: [01 - Setup](/workshop/01-setup.md)