stephengrider/reactcasts

App by app code for Build Web Apps with React JS

ReactCasts

This is the companion git repository for the course Build Web Apps with React JS and Flux.

Each example from the course can be found within this repo. You can either look at the files in a completed state, or check out the changes that were made in a particular section by clicking on one of the links below.

Section Number	Section Name	Link to Commit
1	Introduction
2	Link to Github Repository
3	JSX Markup in Our Views
4	First Application - Basic Building Blocks	6eac86c
5	First Application - Creating a React Class	8ee74dd
6	First Application - Showing Content	df8b9ed
7	Exploring Props - Customizing Views	d67b329
8	Exploring Props - Wiring Up Our Data	0f49ee5
9	Composition - Views Within Views	5693d3c
10	Composition - Props Selection
11	Lists	ee7157f
12	Tooling - Breaking Up Our Code	3ac4d7c
13	Tooling - Applying NPM	c3f7c77
14	Tooling - Exporting Code
15	Tooling - Gulpfile	2112054
16	Tooling - Final Refactor	50d6b89
17	Exploring State and Events - Purpose of State	c8c0da4
18	Exploring State and Events - Bringing Button Back	86d0dc1
19	Exploring State and Events - Adding Content	b2bf2d4
20	Exploring State and Events - Toggling Visibility	3e8921a
21	Exploring State and Events - Selecting Items	3625a8d
22	Firebase - Building From a New Start
23	Firebase - Signing up and Integrating Firebase
24	Building From a New Start
25	Signing up and Integrating Firebase	2ca16df
26	Building Our Application Architecture	4567631
27	Hooking Up Our Remote Datastore	0233b4a
28	Scaffolding the Header	74f393e
29	Handling Form Input	952235f
30	Pushing Data to Firebase	65eae7c
31	Rendering a List of Items	6336102
32	Waiting on Data Before Rendering	c9cf6c9
33	Building Item Component	323226d
34	Updating Data to the Remote Datastore	a466ecb
35	Debugging Firebase Updating	631007d
36	Allowing Editing and Undoing	f3d0640
37	Saving Edit	4650605
38	Bulk Delete Data	6ff8591
39	Project Overview
40	Imgur API Overview
41	Imgur API in Detail
42	React Router Demo	3ea1d06
43	Nesting Route	f268536
44	Refactor to Separate Rendering and Routing	3403ae6
45	In-App Navigation	92a5b98
46	Implementing Fetch	0d47fe0
47	Working with Fetch's Promise	cacf778
48	Display a List of Topic	42bcfc6
49	Fetching Data Naively	f6c8c35
50	Working With Stores	f114d82
51	Triggering Changes From a Store	136aa1f
52	Working with Action	10519ed
53	Recap of Flux Data Fetching
54	Routing with Parameters	6c2e386
55	Matching Parameters	fcfe2fc
56	Rendering Topics in the Header	6680a3a
57	React Router Helper	b9a82f7
58	Implementing Image Store	c8ea3ad
59	Refetching Data on Rerender	265e9cd
60	Scaffolding Image Preview	b61d75e
61	Filtering Image Data	56668a1
62	Playing Videos on Mouseover	54c0f79
63	Showing a Play Button for Each Image	77ef623
64	Adding an Image Stats Overlay	7c86a66
65	Scaffolding Image Detail	e606fad
66	Fetching Single Records from a Store	2528ac5
67	Fetching Single Records from a Store Continue	b573cb7
68	Rendering an Image Detail	95af337
69	Actions With Multiple Methods	43e3865
70	Listening to Many Changes in a Component	a3a6207
71	CSS Animation	9bfde96

reactcasts's Issues

Gulp build doesn't update main.js

Couldn't start gulp with ReactStart

Hello,
I checkout the reactstart repo and I cannot have gulp working.

---

fs.js:1063
throw errnoException(process._errno, 'watch');
^
Error: watch EMFILE
at errnoException (fs.js:1031:11)
at FSWatcher.start (fs.js:1063:11)
at Object.fs.watch (fs.js:1088:11)
at watch (/Users/ChloeGyuriKim/Desktop/Webproject/React/ReactTutorial_Stephen_Grider/ReactStarter/node_modules/gulp-server-livereload/node_modules/node-watch/lib/watch.js:221:8)
at /Users/ChloeGyuriKim/Desktop/Webproject/React/ReactTutorial_Stephen_Grider/ReactStarter/node_modules/gulp-server-livereload/node_modules/node-watch/lib/watch.js:230:9
at /Users/ChloeGyuriKim/Desktop/Webproject/React/ReactTutorial_Stephen_Grider/ReactStarter/node_modules/gulp-server-livereload/node_modules/node-watch/lib/watch.js:41:14
at Array.forEach (native)
at /Users/ChloeGyuriKim/Desktop/Webproject/React/ReactTutorial_Stephen_Grider/ReactStarter/node_modules/gulp-server-livereload/node_modules/node-watch/lib/watch.js:38:18
at ReaddirReq.Req.done (/Users/ChloeGyuriKim/Desktop/Webproject/React/ReactTutorial_Stephen_Grider/ReactStarter/node_modules/gulp-watch/node_modules/chokidar/node_modules/readdirp/node_modules/graceful-fs/graceful-fs.js:143:5)
at ReaddirReq.done (/Users/ChloeGyuriKim/Desktop/Webproject/React/ReactTutorial_Stephen_Grider/ReactStarter/node_modules/gulp-watch/node_modules/chokidar/node_modules/readdirp/node_modules/graceful-fs/graceful-fs.js:90:22)

---

I am so stuck at firebase chapter :/ Plz help me to solve this.

Thank you so much in advance!

Cheers,
CK

Tagging

Hi! would it be possible to tag the the commits so its easier to move to the corresponding lecture? Thanks

react 0.14 - Flux - 11 - Fetching Data Naively

Console log:
Uncaught (in promise) Error: Invariant Violation: Objects are not valid as a React child (found: object with keys {id, name, description, css, ephemeral, readonly}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of exports.

(anonymous function) @ topicList.jsx:13

Organizing Sections

Hi Stephen,

Possible to just create folders for each section with a starter folder and completed folder?

I just think it would help new students and easier for everyone to jump right in.

Cheers!

Section 3 - Tooling - Target container is not a DOM element - ReactDOM

Hello @StephenGrider and first of all, thank you for this great course

At the end of the gulp lesson, I had the "Target container is not a DOM element" error.

I could fix this by moving the <script src="main.js"></script> at the end of the <body> in index.html

also, I've kept the method ReactDOM.render() at the end of the app.jsx file. But this needs to require react-dom at the beginning of the file :
var ReactDOM = require('react-dom');

but also to have it installed in the gulp modules:
npm install --save react-dom

this cannot be allowed if you previously install [email protected] which is an early stages react version which, i guess, includes react and react-dom altogether. So, long story short, if you have [email protected] installed, uninstall it by using
npm uninstall --save react

THEN install react AND react-dom
npm install --save react react-dom

THEN require it in your app.jsx

var React = require('react');
var ReactDOM = require('react-dom');

THEN use the ReactDOM.render() method
ReactDOM.render(element,document.querySelector('.target'));

Hope this can help you @StephenGrider to improve the lesson a bit and help you guys in the same situation I was into.

NB : the react references in the index.html are no longer necessary

<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>

can be removed

(bug) imgur app - imgur API errors

• Imgur is throwing errors on requests to topic ID's
• The errors are intermittent at any given minute
• This even comes up in Postman requests

This is one of the best courses EVER

Gulp doesnt work.

Here is the error that i`m getting :

events.js:141
throw er; // Unhandled 'error' event
^

Error: watch Y:\dan-testing\site\ReactWorkspace\thumbnail-list\node_modules\react\lib\ExecutionEnvironment.js UNKNOWN
at exports._errnoException (util.js:874:11)
at FSWatcher.start (fs.js:1234:19)
at Object.fs.watch (fs.js:1262:11)
at createFsWatchInstance (Y:\dan-testing\site\ReactWorkspace\thumbnail-list\node_modules\watchify\node_modules\chokidar\lib\nodefs-handler.js:24:15)
at setFsWatchListener (Y:\dan-testing\site\ReactWorkspace\thumbnail-list\node_modules\watchify\node_modules\chokidar\lib\nodefs-handler.js:47:19)
at EventEmitter.NodeFsHandler._watchWithNodeFs (Y:\dan-testing\site\ReactWorkspace\thumbnail-list\node_modules\watchify\node_modules\chokidar\lib\nodefs-handler.js:177:15)
at EventEmitter.NodeFsHandler._handleFile (Y:\dan-testing\site\ReactWorkspace\thumbnail-list\node_modules\watchify\node_modules\chokidar\lib\nodefs-handler.js:201:8)
at EventEmitter. (Y:\dan-testing\site\ReactWorkspace\thumbnail-list\node_modules\watchify\node_modules\chokidar\lib\nodefs-handler.js:353:12)
at FSReqWrap.oncomplete (fs.js:82:15)

The gulpfile.js other files and package.json are the same as yours.

npm install fails

Hi,

I'm unable to run npm install.
Which version of node is recommended? I've tried 4.2.0 and 4.0.0.

➜  imgur-client git:(master) ✗ git checkout 42bcfc6
➜  imgur-client git:(42bcfc6) ✗ npm i
npm WARN package.json [email protected] No repository field.
npm WARN unmet dependency /node_modules/node-sass/node_modules/meow requires object-assign@'^4.0.1' but will load
npm WARN unmet dependency /node_modules/object-assign,
npm WARN unmet dependency which is version 2.1.1
npm WARN unmet dependency /node_modules/node-sass/node_modules/node-gyp requires glob@'3 || 4' but will load
npm WARN unmet dependency /node_modules/node-sass/node_modules/glob,
npm WARN unmet dependency which is version 5.0.15
➜  imgur-client git:(42bcfc6) ✗ node -v
v4.0.0