React

The following is a collection of links and related things that I have used for learning React this last two weeks. I’ve attempted to sort them into a way that seems useful, at least to me, and hope that this can be useful to others. Where the link was given via Twitter, I’ve embedded to tweet so it gives reference to those that have helped me along the way. Others are just inline as I found them via google or via whatever method.

These materials actually step through or explain in detail design and implementation concepts behind React or various parts of React.

From Joachim @PelotonTechIO an article written by Indrek Lasn on Medium @ https://medium.com/@wesharehoodies/easy-guide-for-webpack-2-0-from-scratch-fe508a3ce44e

This tweet and links by Christopher Biscardi were super helpful. There is the Codebase Overview and Implementation Notes links. Both, super helpful and information that I wasn’t finding easy to get at.

Babel Handbook > https://github.com/thejameskyle/babel-handbook/blob/master/translations/en/README.md

This is actually broken down into the Babel Handbook and then the Plugin Handbook.

Here are some links I’ve found that I’m currently working through as examples. They’re fairly useful in the context of getting some hands on experience just putting something together that is simple, works, and can be built off of.

The hello world on the React site. It’s ok, but I found it lacking so I had to search onwards for more specific information.

Some other frameworks/elements that work with/within React.

Notes

React is a declarative, component-based library for building user interfaces. The components in which React provides take data and then executes a render() function that builds and returns what to display.

Inside the React library there is a feature called the virtual DOM which is used to render components. React keeps two copies of this virtual DOM in action, one for what is rendered and one that is used for updated versions of the view. When rendering new elements, React executes a diff between the original and updated version, then returns the the appropriate operations to provide an updated view.

React has three main areas it brings innovation in:

  1. React - It provides a different way to handle event and data binding with components.
  2. Virtual DOM - This provides React with its power for fast rendering, and related architectural differences. It’s also what enables the ability to have simple points of state and render the view according to this within the browser DOM.
  3. Components - the design around components provides a way in which to break down the overall design, organization, and implmentation of applications within React.

JSX, or JavaScript eXtension syntax is used for quoting of HTML and HTML tag syntax to render subcomponents.

Other characteristics of React that are important to note:

  • React can be rendered on the server side in addition to the obvious ability to render on the client side.
  • Because of the rendering process of the virtual DOM diff and then the push to the browser DOM, the components and properties are immutable.
  • The React library is only the view of whatever architecture you’re using to build your overall application.

Other related to but not React things to know:

  • React Native uses libraries to build native iOS, Android, and Universal Windows Platform (UWP) Applications.

History

Jordan Walke created React working at Facebook. His influence was a PHP Component Framework called XHP. It was deployed first on Facebook in 2011 and then Instagram in 2012. In 2013 React was made open source during the May 2013 JSConf.

Fini That’s it for today.