Creating React Libraries from Scratch

Creating React Libraries from Scratch

English | MP4 | AVC 1920Ă—1080 | AAC 44KHz 2ch | 19 Lessons (1h 06m) | 217 MB

In this course we’ll cover what it takes to maintain, write, and publish a React library from scratch.

What You Will Learn

  • Creating a React library from `yarn init` to deployed on npm
  • The different types of JavaScript dependency types and versioning
  • Setting up documentation for contributers and consumers
  • Keeping up with code quality while multiple people work on a project
  • Different JavaScript module systems

In this course, we’ll cover what it takes to write, maintain, and publish a React library from scratch. In the 2020 State of JS survey, an annual survey conducted of the frontend JavaScript community, React came in as the most used framework for frontend development. Because React is so popular, building libraries in it can open you up to a wide range of users, contributors, and possibilities!

Why this course
Building a library is so much more than just the code. We need to know the ins and outs of versioning, deploying, building, documenting, dependency management, module types, tooling, and more. This is a daunting task for just one tutorial to cover. Creating React Libraries from Scratch will teach you everything you need to know to succeed in creating a library.

Don’t worry if you’re not a React wizard. This course is designed for beginners who have never deployed a library before and have minimal React experience. However, you should be familiar with JavaScript.

Course Topics
Throughout Creating React Libraries from Scratch we’ll develop a React Hook called Scroller that will provide a utility for scrolling around web pages—taking advantage of window.scrollTo. We’ll start in module 1 with an empty directory; adding documentation files, installing dependencies, and setting up GitHub. Right away, you’ll have a project that could be deployable as a fully functional library! In module 2 we’ll implement scroller while taking advantage of Storybook to visually test our code. By module 3 Scroller will be deployed to npm in multiple JavaScript module formats. Finally, in module 4, we’ll look at different tools and techniques in software development to maintain a library. This includes linting, unit tests, TypeScript, and Lint-Staged! By the end of this course, you’ll be able to run npm install scroller, and take advantage of React code you wrote in future projects.

Creating React Libraries from Scratch will dive into:

  • initializing a new npm package
  • maintaining code quality
  • publishing to npm
  • keeping contributors on track
  • exposing modules that work in NodeJS and the Web
  • unit-testing
  • Storybook for demoing components
  • exposing typing using TypeScript
  • and more!
Table of Contents

1 Welcome
2 Setting up our development environment
3 Setting Up Our Project
4 What are Dependencies?
5 Installing Scroller’s Dependencies
6 Initializing Git and GitHub
7 Scroller schema
8 Implementing Scroller
9 Setting up Storybook
10 Setting up ESBuild
11 JS Modules
12 Building Multiple JS Modules
13 Deploying to NPM
14 Introduction
15 Typescript
16 Jest
17 ESLint
18 Lint-staged
19 Summary

Homepage