https://github.com/gilbox/react-lessons
https://github.com/gilbox/react-lessons
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/gilbox/react-lessons
- Owner: gilbox
- License: mit
- Created: 2015-01-19T21:12:27.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-01-30T23:04:46.000Z (over 11 years ago)
- Last Synced: 2025-01-29T11:30:43.704Z (over 1 year ago)
- Language: JavaScript
- Size: 1.94 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-lessons
Simple to complex react concepts... Wherein we learn React by building a commenting system that automatically attaches emojis to each comment based on the comment's [sentiment](https://www.mashape.com/vivekn/sentiment-3).
# Exploring this Repo
- Clone the repo
- `npm install`
- Then either `gulp watch`
- Or `gulp watch01`, or `gulp watch02`, etc...
- Navigate to [http://localhost:4444/public](http://localhost:4444/public)
# Messing around
If `gulp watch` is running, you can open [http://localhost:4444/public](http://localhost:4444/public) and then edit any `app.js` file and the web page will auto-reload whenever you click *save* (so long as syntax errors don't cause compilation to fail).
# Topics Covered
### `01` Creating Components
#### (aka Elements... aka the artist formerly known as Component)
### `02` events, state, refs, getDOMNode()
### `03` Creating Sub-components
### `04` Top-down State
### `05` Creating a list component
### `06` Introducing basic Flux concepts
### `07` Wiring up Flux
### `08` Introduction to `immutable.js` and `morearty.js`
### `09` Refactor application to use Morearty and Immutable Data
### `10` Adding an asyc network request (with `superagent.js`) to the Action Creator
### `11` Spruce things up with classes, placeholder, remove pre-filled comments
## Resources Mentioned during the Talk
- [Using Flux with Angular](medium.com/@gilbox/how-can-react-and-flux-help-us-create-better-stronger-faster-angular-applications-639247898fb)
- [Find nice free video tutorials on react at egghead.io](http://egghead.io)