The notes mentioned in the video are available below.
WTF Is React?
Do we really need another framework??
Just good ol' views.
React's basic philosophy is that components trigger events (e.g. after a name is input into a field). That event can then be listened to by a model. The model can then trigger an event (e.g., name updated), and then the view can respond to the model's event to re-render.
Events flow out/up, data flows in/down.
So Will It Replace Angular?
Uh, no. Comparing React to Angular is like comparing Bootstrap to Ember. Again, React is just a UI library for building components.
Since React only represents the "V"** in MVC, you could potentially use React as the view layer in Angular.
**Well, actually, some could argue that complex UI views in React also act as a "C", but this is more like the concept of a "Presenter" -- a presenter is basically a root view that controls sub views -- think of it as a "view controller".
What Are The Pros?
Data travels down. In short, this has the same benefit as dependency injection in object-oriented development.
Virtual DOM means the UI only updates when it is actually changed. This leads to super fast rendering times.
You can render your views on both the server and the client. No more rendering with PhantomJS and serving that up to search engines like you would have to do with a client-only rendering system like Angular's view layer. Yuck.
Makes modifying and reusing UI components super easy
Backed by Facebook (and powering their site), so not likely to disappear anytime soon
Even though it's still not at 1.0 release, it is already in production use by Facebook, Netflix, Airbnb, Yahoo
Big community online
As it is not a framework, it can be used with other frameworks and libraries such as Angular, jQuery, Backbone, Vue, etc
What Are The Cons?
Because it is only concerned with the view layer, it means gluing the other parts has been a bit chaotic during early adoption. It doesn't come bundled with an event framework, so a lot of people have reinvented the wheel there.
React is a large library for not being a framework
Documentation is not the best, so the learning curve can be steep. Not something you want to roll out for a large new project -- best to start practicing with it on side projects.
The problem with trying to learn React is that there are so many other web technologies that are usually combined with it that, if you are not familiar with those technologies, you can easily get lost of all of the new and shiny
No native support for IE8 or below
Components. Think of these as custom HTML elements.
<VideoPlayer startAtFrame="30"/>, <LikeButton likes="100"> or <Login>
Follow Single Responsibility here: each component does one thing and one thing well -- several smaller components are better than one big monolithic component
E.g. Don't build a list and the ajax call to fetch that list data in the same component -- first build the list component and then use that component inside the data fetcher. A good example of this is shown here.
Just like when refactoring functions -- if a function does more than one thing, you break it down until it does only one thing -- do this same thing with components
Props: Initialize component state
These are declarative attributes of a component. Think of these in the same way you would think of things like 'src', 'width' and 'height' on an '' element. Another way to think of this is the component's config options. This is injected into the component: "data travels down". These are immutable -- set once during initialization, and not changed. If you need to change these values, that is handled with State (see below).
Accessible via this.props in the component
E.g., if we have a "startAtFrame" variable, it would be in this.props.startAtFrame
Think of props as the "public" data that you can set
PropTypes: Allows your properties to be strictly typed.
If you "like" a photo, that photo's state now changes to "liked"
Managing state can get complicated. Rather than reinvent the wheel, it's best to start off with a community supported library, such as Redux, which was based on Facebook's Flux theory for state management. Here is a cartoon intro to Redux that helps explain it.
Think of state as "private" data that only the component can set
You will typically have a root component, such as <App>, that will act as your view presenter (or view controller). This container component manages state by pushing data down, in reaction to events that have flown up.
JSX is the part inside the render() function that looks like HTML. This was done to allow you create components in the way you would think of them like in HTML.
Do not use class. Instead, use className. It's because JSX gets translated to JS, and class is a keyword in the newest version of JS.
If you use <code><br></code> instead of <code><br/></code>
, it won't work. Make sure to use self-closing tags.