Having now spent some time over the past few days getting more familiar with React, here are some more thoughts on the topic:

• Use npx create-react-app projectName instead of the traditional npm install create-react-app -> create-react-app projectName route. It's quicker, easier and gets away from the challenge of managing global versions of npm packages. Read more about npx here.

• <React.Fragment> lets you contain a component without an extra surrounding div.

• In React, you pass arrow functions for event handling when you want to pass parameters. For example:

<a className="page-link" onClick={() => props.onPaginate(page)}>
    {page}
</a>

• You can pass child HTML elements of a component to the component via this.props.children. Children is an array.

• When managing events, essentially, you want to bubble the event up to the controlling parent. It's bubbles all the way up...

• In React Dev Tools (which you really should install - its great!), you can get a handle on a selected element to evaluate it on the Dev Tools console via $r. You can then apply functions to this such as $r.click(); This is similar to, in the 'Elements' tab in Dev Tools where you can access and element via $0. Sidenote: I use the 'Darcula' theme!

• Props are what you pass to a component.

• State is private or local to a component and is not shared with other components. Should you want to share state, you need to lift the state up to a parent component so you can share it. One-way data flow!

• Components that do not have their own state are known as Controlled Components. Often times, if there is no state and if there are no extra functions within the component, you can use a Stateless Function Component.

• Stateless function components can be easily setup via VS Code Simple React Snippets via:

imr

• You can then create your stateless function component via:

sfc

• There seems to be a fair amount of lifting in React ...and I don't mean weights :). As you grow your component base, you often find yourself lifting state up.

Lifecycle Hooks

1. Mount -> constructor, render, componentDidMount
2. Update -> render, componentDidUpdate
3. Unmount -> componentWillUnmount

// note that render will recursively render all child components.

Thoughts

As I spend more time using React, it strikes me as being a lot simpler in constrast to Angular. While my React experience is limited at this stage, it seems that React is quite rigid in the approach you need to take with it. By comparing the React Tutorial with the Angular Tour of Heroes Tutorial, React seems to do a lot less. No routing, no http. It is just a view and, it seems, is primarily concerned with passing props down and bubbling events up. But despite being less, it seems to me to make the app a lot easier to reason about. That being said, I feel that learning React is going to improve the clarity of my thinking when it comes to using Angular and applying these same approach there. Angular, despite being heavier than React, also advocates for one-way data flow and a functional, component based approach.

Maybe it was a lack of AngularJs experience and not fully understanding the AngularJs ecosystem when I first started learning AngularJs all those years ago. Or maybe, to some extent, it is that Angular is more magical, but it seems to me that while React is a little strange to get going with at first, and seems a lot stricter in the way it expects you to code. I find that this is liberating and exciting in that you need to stick to some fundamental rules and patterns which simplifies and clarifies your thinking and reasoning about your code.