Mastering React 18: A Comprehensive Guide to Publishing Powerful Libraries
The React landscape is evolving, and with the arrival of React 18, developers are presented with new opportunities to create and share powerful libraries that harness the latest features and improvements. In this blog post, we’ll delve into the significance of React 18 and introduce an exciting template repository designed to empower developers to set up all the compilation and publishing mechanism in a matter of a few seconds.
TL;DR
Follow step-by-step instructions and checklist on the README file to get set ready for publishing your amazing React 18 library. Video tutorial also available.
Section 1: The React 18 Advantage
React 18 brings a host of new features and improvements, unlocking possibilities for developers to build more flexible and performant applications. The new version paves the way for creating libraries that leverage cutting-edge functionality, making it an ideal time to explore the world of library publishing.
Section 2: Why Publish React 18 Libraries?
Contributing to the open-source community is not just about sharing code; it’s about making a lasting impact. Discover the benefits of publishing React 18 libraries and how your contributions can shape the future of React development.
Section 3: The React18 Turborepo Template
We understand that setting up bundlers, dev environments, tests, a simple website for your library, etc. could be an overwhelming effort. That’s why we have made it easy for you.
Do Star this repo so that you and others can find it more easily for your next projects. It also helps me understand that people are using this repo so that I can maintain the repo and the documentation well.
This template offers the following pre-configured features. Additionally, your repo will automatically be rebranded with help of workflow and post install scripts.
✅ Monorepo powered by turbo repo to build, test and deploy your library
✅ Next.js, Vite and Remix examples to demonstrate how your library can be used (Feel free to remove Remix as it is still unstable when it comes to monorepo setup and importing from folders)
✅ Examples pre-configured to use Light/Dark theme according to user preference
✅ The examples provided are ready to be deployed to Vercel
✅ Typedoc setup to automatically create documentation for your library based on tsdoc comments
✅ Code of Conduct and contributing files that you can always update
✅ Prettier and linter configured as per the modern best practices (Feel free to add your flavour)
✅ Recommended VSCode extensions — Prettier and Kanban board to auto-format your code and manage your project priorities right within your IDE
✅ Powerful code generators — try yarn turbo gen
✅ Test setup with Vitest — A modern and fast testing framework supporting Jest like APIs
✅ Workflows to automate running tests on every pull-request or code push events
✅ Workflow to automatically publish and create a GitHub release when you update your librari’s package.json file.
✅ Workflow to automatically rebrand entire template based on the name of the repo you create from this template. (As soon as you create a repo from this template, setup workflow is triggered which renames @mayank1513/fork-me to your repo name and does lots of other fixes to set you up and running.)
✅ With all these features, this readme file contains a quick checklist for you to configure Codecov and other badges, setup your docs website on GitHub pages, etc. See Checklist.
Creates a library that is
✅ Fully Treeshakable (import from @mayank1513/fork-me/client/component)
✅ Full TypeScript Support
✅ Unleash the full power of React18 Server components
✅ Works with all build systems/tools/frameworks for React18
✅ Doccumented with Typedoc (Docs)
You will find the step-by-step instructions and checklist to set up your tools swiftly in a matter of minutes.
