One of my core focuses in the React ecosystem is the world of Material Design which is becoming one of the main UI visualization toolkits. I have decided to focus on Material UI which are React components which implement Material Design. Besides Bootstrap, Material Design is probably the second or third most popular Javascript CSS Framework. I say CSS because if you think of the world of design CSS is the language that describes everything related to the web just like Mathematics is the underlying language for understanding the physical world.

If you live in a componentized world then it is important to be able to pull in components from different sources and guarantee how they look on the screen. That is why a new concept called Styled Components is emerging as the defacto standard replacing the old world view of global style sheets that dominate the current web landscape. Recently, Material UI has chosen one component platform called JSS. But this is not imperative, the only thing that really matters is the ability to pull in a React component without letting your global style sheet get in the way of your localized components.

If you are currently using Bootstrap, there is a Material Design github repo that allows you to take your Bootstrap components and have a theme or look and feel of Material UI.

One other interesting note is the way the React ecosystem gets bundled. Clearly, the most simple way to bundle a React single page application is with the tool Create React App. Recently, another Framework called Next.js has emerged which is being used by the team building Material-Ui for documenting their suite of components. The underlying documentation suite enables one to write all of the documentation in Markdown and then bundle both the components and the documentation together. This is a great way to document an open source project on github using the standard github markdown and then getting for free a gorgeously crafted documentation website with your react components.

On the data visualization front I am using D3 to display all of my data graphs. Uber has a great toolikit called React Vis which defines many of the standard graph library calls any company would need. If you are looking for the fancier D3 charts, Semiotic, built by the data visualization team at Netflix along with author Elijah Meeks who wrote the book D3.js in Action. I am fluent in both of these D3 toolkits in concert with embedding the graphs inside a Material UI framework using styled components.