https://github.com/fabienjuif/react-redux-codelab

React/Redux codelab, you can use it at a starter project!
https://github.com/fabienjuif/react-redux-codelab

codelab firebase react redux

Last synced: 3 months ago
JSON representation

React/Redux codelab, you can use it at a starter project!

• Host: GitHub
• URL: https://github.com/fabienjuif/react-redux-codelab
• Owner: fabienjuif
• License: mit
• Created: 2016-09-16T18:22:36.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2016-12-15T10:31:52.000Z (over 9 years ago)
• Last Synced: 2025-11-30T03:38:17.249Z (7 months ago)
• Topics: codelab, firebase, react, redux
• Language: JavaScript
• Homepage: https://react-redux-codelab.firebaseapp.com/
• Size: 4.11 MB
• Stars: 11
• Watchers: 2
• Forks: 1
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-redux-codelab: tvscrub

In this codelab we will build a tvshows tracker with react, redux and firebase.

You can find an instance here to play with: [react-redux-codelab (hosted by Firebase)](https://react-redux-codelab.firebaseapp.com/)

![Imgur](http://i.imgur.com/FsJFZZl.png)

![Imgur](http://i.imgur.com/TCty3IV.png)

## Slides

1. Tools and libs: [Google doc -fr-](https://docs.google.com/presentation/d/1NlW5g9BY4QHIgyGbQqZxWtR3KugYmyUvSUAsHezmCo0/edit?usp=sharing)

2. Components and redux state: [Google doc -fr-](https://docs.google.com/presentation/d/1MfxJQWou7iEe9Il5MaYCqhEH4LYRBZKTClbPEN__zjc/edit?usp=sharing)

3. Steps: [PLAN -fr-](./PLAN.md)

4. Steps (detail): [Google doc -fr-](https://docs.google.com/presentation/d/1qU1pqq3TXb-0jLTKToKLcKremc8A6sVqXknNzGxdrhU/edit?usp=sharing)

## Steps

For full steps, you can look up to the Google doc.

This steps are summaries:

  * React

    * How do we create a react component (as pure function)

  * Redux

    * How do we create a reducer and an action with redux

  * react-redux

    * How do we connect our component to our state/actions

  * redux-thunk

    * How do we dispatch asynchronous actions

  * redux-little-router

    * How do we activate browser navigation

    * This is also the time to retrieve some URL options (route params)

  * reselect

    * How to we optimize our container (react-redux)

  * firebase

    * How do we deploy the application on your own account

## Get tools

Tools and dependencies that are **NEEDED**, choose between:

  * [Install everything locally](./TOOLS-LOCAL.md)

  * [Use docker](./TOOLS-DOCKER.md)

 

You should install these tools, those are must-haves (but are optionals):

  * [google-chrome](https://www.google.fr/chrome/browser/desktop/)

  * [redux-devtools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)

  * [react-devtools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)

  * [Atom](https://atom.io/)

    * Plugins:

      * highlight-selected

      * file-icons

      * react

      * pigment

      * linter-eslint

      * linter-sass-lint