
Free React.js Fundamentals Course - tm33
http://courses.reactjsprogram.com/courses/reactjsfundamentals
======
tm33
I don't know what to say. I'm deeply humbled by all the kind comments in here.
Thank you all so much, truly.

~~~
bhaisaab
Thanks a lot, as a backend distributed systems person I have hard time
understanding UI in general. I'm half way through your videos now, and for the
first time I could grok what React is all about.

~~~
tm33
This is exactly what I was going for. Thank you so much for the confirmation!
Means a lot.

------
noobie
Honest noob question, what's with all the hype about React?

Edit: Awesome replies, thank you!

~~~
hathawsh
From my point of view, React brings two important ideas to web app
development:

1\. The virtual DOM. When I'm writing jQuery-based code, I have to write both
a component template and code that updates the DOM in response to input; when
I'm writing code for a virtual DOM, the component template is sufficient to
update the DOM and I don't have to write that extra code, so there are fewer
chances for bugs to creep in.

2\. HTML-like syntax embedded in Javascript (JSX). I didn't like this at first
until I configured Sublime Text to highlight embedded HTML correctly. Embedded
HTML has pros and cons, but I think it's a net positive.

React projects also typically include new tech like ES2015, webpack, hot code
reloading, and Redux with its time-traveling debugger. You can build your own
stack that uses a virtual DOM library, embedded HTML, ES2015, and so on, but
it's helpful to start with a common stack that many people understand. That's
why React is interesting.

~~~
up_and_up
> I didn't like this at first until I configured Sublime Text to highlight
> embedded HTML correctly

Can you share your sublime settings or syntax configuration you are using?

~~~
mrcarrot
I'm not the parent, but I wrote this [1] a year ago, and I think at least the
first section still works for getting JSX syntax highlighting working.

[1]: [http://petethompson.net/blog/js/2015/02/25/sublime-
text-3-an...](http://petethompson.net/blog/js/2015/02/25/sublime-text-3-and-
modern-js/)

------
zbuttram
Tyler's course on egghead.io was amazing, can't recommend his content enough.

~~~
tm33
Thank you so much! Means the world.

~~~
enraged_camel
Tyler, I echo the parent's comments. I took your React course on Egghead back
in August and it was great.

Question: I've been meaning to come back to it and re-watch the videos, but
I'm concerned that the React ecosystem changes quickly and they may have
become outdated. Can you comment? Do you have plans to update/re-record the
videos as new versions of React/Redux/Flux etc. come out?

Thanks again for all the great work you're doing.

P.S. It would also be great if you could put timestamps on videos and courses,
as it's difficult to see when they were added.

~~~
tm33
The react ecosystem does move really quickly. I think what's important to
realize is that even though it moves quickly, if you learn the correct
principles you'll just be stuck with minor API changes rather than
architectural changes - which is a huge difference. I tried to approach the
course from this point of view as well. Even if the API changes a little bit,
the overarching methodology of building your UI will be the same. Someone who
did the amazingly was Dan Abramov in is egghead series. Learn concepts, not
libraries.

------
sergiotapia
"Why should I use React?"

Read this: [http://reactfordesigners.com/labs/reactjs-introduction-
for-p...](http://reactfordesigners.com/labs/reactjs-introduction-for-people-
who-know-just-enough-jquery-to-get-by/)

If this article does not convince you, React is not for you and that's OK.

~~~
polishninja
For what it's worth, all the JSBins with the react code don't work. I'm using
Chrome. I keep getting Uncaught ReferenceError: ReactDOM is not defined.

I fiddled with it a bit but I couldn't get any of the examples working.
<shrug>

~~~
sergiotapia
That's unfortunate that article was my go to on why React, it's the reason I
decided to use it. I'll try to reach out to the other.

------
eecks
Really can't decide to go ahead with an Angular approach (2.0) or use React. I
know React is only for the view layer so what are people using with React to
do stuff like api calls?

~~~
iLoch
Here's a look at the folder structure we're using for our app:
[https://i.imgur.com/wc7DyOA.png](https://i.imgur.com/wc7DyOA.png)

/actions: Flux action creators

/components: These are all the JSX React components (the presentation layer) -
so there are subfolders like "pages", "controls", etc.

/reducers: These are Redux reducers - they're the logic that handles all of
the application state

/services: This is what your question was really about. We use basic ES6
modules for services, with methods like "fetchUser(id)" which use the new JS
Fetch API behind the scenes. We then have redux-thunk and redux-promise
middleware so we can easily offload state manipulation to these services
without actually putting state logic in them.

I've set up a few React projects at this point and this always seems to keep a
nice separation of logic. I'm never asking where data is coming from or where
it's going. I think Redux has been the biggest difference maker when dealing
with all of these parts.

It's no framework, but it's composed of well understood libraries, each with
their own important function. You build the structure out yourself so you know
exactly how it works, and the pattern will be very familiar to anyone who has
used React before.

~~~
threatofrain
I've been hesitant of Fetch() because of the lack of timeout; has anyone been
able to successfully get around this issue?

~~~
iLoch
Yeah, this is an important question. I don't have answer for you and neither
do the people in charge of the fetch API. It's an issue with promises not
being cancelable. There's probably a reasonable argument that promises just
aren't that great because you can only resolve or reject.

Personally I don't see a huge problem with either resolving or rejecting with
a message about the cause of the result. Others see it differently but they
haven't been able to make any progress on a major problem.

If you want to avoid this altogether there's no reason why you can't use a
different library.

~~~
EvanPlaice
What about using observables? Unlike promises, they can be cancelled at any
time.

Rxjs provides the observable data type. The extensions are functional reactive
operators. There are operators used to retry, throttle, filter, debounce, etc.

Angular2's http module is already based on Rxjs observables for this exact
reason.

------
bpesquet
A nice example of what can be done with the Teachable platform
([https://teachable.com](https://teachable.com)).

------
enraged_camel
Here's a potentially dumb question about React: can it be used inside a
client-side application that was written using Angular?

Part of my job involves customizing a commercial, closed-source web
application that lets you build web forms. The application's front-end was
written using Angular, but it lets you add your own custom JavaScript to add
more functionality to forms, such as character counts, hiding/showing relevant
fields based on conditions and auto-capitalization of user input. Basically,
each form has its own JSFiddle-like section that gets published alongside the
form.

We currently use native JS and JQuery for these customizations, usually within
a monolithic document.ready block. The problem is that our code can get pretty
complex, especially when hooking up multiple event handlers to the same
elements. I've been thinking that React may be able to solve this problem, but
I'm uncertain about using it alongside Angular, especially since I have no
control over the latter.

Based on this description, would there be any advantages to trying to shoehorn
React into our projects, or should we stick with native JS and JQuery?

~~~
Geee
It's possible:
[http://ngreact.github.io/ngReact/](http://ngreact.github.io/ngReact/)

------
ausjke
Just started learning js etc. Was told Angularjs has everything loaded so it's
easy for beginners, while React is better for the more experienced who knows
how to pull various things together? is this true? if so is there a "React-
stack" for me to start with?

~~~
vr3690
It would probably be best to understand the fundamentals and then to figure
out how components of the "stack" are wired together. This might help be a
starting point - [https://github.com/gaearon/react-makes-you-
sad](https://github.com/gaearon/react-makes-you-sad)

------
brosky117
I've watched both his React and React Native tutorials and loved both of them!

I had the chance to talk with him after a local JS meetup and he was super
nice. Can't recommend his stuff more.

~~~
tm33
Thanks so much! Utah FTW.

------
yexponential
Serious question, and sorry(?) for bringing this up. But is everyone here
really okay with reacts licencing?

Apart from stubbornly refusing to accept embedding html in js directly is a
good idea (although I see the pros), licencing is the main reason I avoid this
ecosystem altogether. Even though it has an outstanding community.

perhaps I'm making a deal out of nothing.

In any case will definitely take the course, im sure it will be as excellent
as the others. Many thanks for your efforts Tyler.

~~~
SiVal
What specifically about the licensing? This is an actual question, not
advocacy. IIRC, Facebook had a provision that disallowed use of React for a
ridiculously broad range of offenses with respect to any of FBs intellectual
property but that they narrowed it considerably last year to a more
reasonable: you aren't allowed to use any of our intellectual property in
React if you dispute our ownership of that specific property.

I could be characterizing this incorrectly, or you could be referring to
something I'm not aware of, so what specifically are you objecting to?

------
christopher_
Hi Tyler! I'm a big fan of your blog and I really enjoyed your egghead course.
Thanks for making this. Just signed up.

------
joshmanders
Great work Tyler! You're one of the reasons I even am remotely interested in
React. You're a very good teacher.

~~~
tm33
Huge compliment. Thank you SO much!

------
mgadams3
I’ve been following your blog for a while. Just signed up. Thanks!

------
halayli
Thanks Tyler! It might be helpful to also add redux + async to it.

~~~
tm33
Check out the other courses. I think they're what you're looking for :)

~~~
halayli
Thanks! I wasn't aware of them :)

------
pmontra
Login problems: at
[http://courses.reactjsprogram.com/courses/enrolled](http://courses.reactjsprogram.com/courses/enrolled)
I'm logged in, then I click on the course and go to
[http://courses.reactjsprogram.com/courses/reactjsfundamental...](http://courses.reactjsprogram.com/courses/reactjsfundamentals)
and I'm logged in. Then I click any of the Start buttons and I'm not logged in
anymore (Lecture contents locked - Enroll in Course to Unlock).

Opera on Android, cookies enabled; Adblock Plus enabled or disabled, no
changes.

Edit: I checked with Firefox and Opera on Ubuntu and it works.

------
imh
I wish there was some way to speed up the videos.

~~~
namocat
It's an HTML5 video, so you can adjust the speed with JS if you can get the
right element. e.g. to set the playback speed to 120%, you can do:

    
    
      document.getElementsByTagName('video')[0].playbackRate = 1.2;
    

in the JS console.

~~~
tm33
This is genius!

------
evo_9
Is anyone using React with .Net ([http://reactjs.net](http://reactjs.net))? If
so how has your experience been? This would seem to fit well with a MVC WebApi
backend.

~~~
merpnderp
We're using React/Redux to replace our Angular front end to MVC WebAPI. But
we're also slowly replacing our MVC WebAPI backend to Node.js/Express. AD,
LDAP, Tedious-Pooling, etc make it work perfectly in our MS environment.

------
idibidiart
When you're ready for it, improve your React game with GraphQL/Relay! :)

[https://gist.github.com/idibidiart/49a095b6bc528638f34f](https://gist.github.com/idibidiart/49a095b6bc528638f34f)

------
sotojuan
I think I'm going to go through this this coming weekend, even if I am
comfortable with React. Tyler is a great teacher and I could use help with the
router and webpack.

Thanks for making this free!

~~~
tm33
Thank you so much!

------
squints
Tyler has taught me everything I know about javascript and React. Can't
recommend him and his teaching style enough! He is a truly gifted teacher.

~~~
tm33
Besitos.

------
troncheadle
Thanks for posting this! I've been dragging my feet about learning react for a
week or so now and I think this will push me over the edge. Much appreciated.

------
artf
Truly convincing!!! Hope to master soon this so acclaimed React (is that so
productive?!?) Thank you so much for posting this resource

------
DanMarcos
Wasn't interested in React until I began this course. (Angular background)

------
adakkak
hi, I am wondering if the website is built on top of existing elearning
systems.

thanks

~~~
tm33
Yup. Using teachable.com

------
mgrpowers
This is awesome! Thank you!

