Tools and Frameworks
Explore key React tools and frameworks such as Storybook, React Styleguidist, Docz, React Cosmos, Gatsby, React-Static, and Next.js. Learn how these resources support component development, static site generation, documentation, and server-side rendering to improve your React projects.
We'll cover the following...
Because React has been around for a while, an ecosystem has grown around it that boasts many tools. Ranging from static site generators (to realize simple to medium-sized and complex static websites on the basis of React), to prototyping tools, to tools that allow us to display our components in some sort of a style guide, the React ecosystem has much to offer. This lesson will provide a short overview of the most commonly used tools and frameworks.
Storybook
Storybook is a development environment for UI components. It allows us to browse through a component library, view the different states of each component, and interactively develop and test components.
Storybook is a tool that allows us to create isolated UI components for React, Vue.js, and Angular. Storybook bundles our components in some form of Sandbox environment in which components can be independently developed in stories. Stories can then be displayed and viewed in a tidy and easy-to-use interface. By isolating these components, we allow for a great degree of abstraction and can also easily test for and display edge cases.
License: MIT (Open Source)
React Styleguidist
React Styleguidist is a component development environment with a hot reloaded dev server and a living style guide that can be shared with your team.
Styleguidist is similar to Storybook. It also enables us to create a styleguide from our React components that are currently used in an application. However, Styleguidist is more implicit than Storybook and can be extended with PropTypes and JSDoc comments. Markdown files in the directory of the components can also be used to further add information on the component.
License: MIT (Open Source)
Docz
It has never been so easy to document your things!
Docz is a tool that is centered around documentation, as the name might suggest. It can also be seen as a styleguide, but it is completely MDX based. MDX is an extended version of the Markdown format, which can also include React components. This way, our components can be described in mdx format and can be imported and used just like regular JavaScript files.
License: MIT (Open Source)
React Cosmos
Dev tool for creating reusable React components.
React Cosmos takes things a little bit further and allows us to include external dependencies, such as React Router or Redux, in our component overview by using the concepts of fixtures and proxies. This allows us to display and test such components more simply. React Cosmos breaks up the encapsulation of components—which we found in the three previously mentioned tools and allows us to move beyond just UI components.
License: MIT (Open Source)
Gatsby
Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps.
Gatsby is a generator for static websites and allows us to create components using React and GraphQL and then transforms them into static HTML files. Gatsby also creates a JavaScript bundle that is loaded as soon as the page loads. Once the bundle has loaded, Gatsby uses client-side rendering, which means that sites are rendered to the user quicker because the HTTP overhead is drastically reduced. Gatsby began as an Open Source project and still maintains that status today. In May 2018, it received an investment of 3.8 million US dollars.
License: MIT (Open Source)
React-Static
React-Static is a fast, lightweight, and powerful progressive static site generator based on React and its ecosystem.
React-Static is also a static site generator and an alternative to Gatsby. Gatsby might be the more well-known tool, especially since its last investment. However, React-Static is a serious contender and also boasts a vast and active community.
License: MIT (Open Source)
Next.js
Next.js describes itself as “The React Framework” for many different use cases, ranging from static to dynamic websites, small to large companies, and mobile to classic websites. Next.js lives up to its claim and is extremely popular within
the community. For many, Next.js is a serious alternative to Create React App. As opposed to CRA, Next.js supports server-side rendering out of the box, which is especially important for developers optimizing for SEO.
License: MIT (Open Source)