1 of 27

​

Crafting Reusable Code with React & TypeScript: From Design to npm

Recycle Reuse Reduce

2 of 27

My name is Dennis.

A typescript enjoyer

3 of 27

Table of contents

01

Simple component

02

Simple but dynamic

03

Generic version of the component

04

Component as a package

4 of 27

Why typescript?

5 of 27

Cons : tsconfig hell

> Suggestion : when possible use deno/bun

6 of 27

Cons : build step

> Suggestion : ignore dhh we all know js > ruby

7 of 27

Cons : speed of tsc

> Suggestion : pray microsoft cares enough to rewrite it in something faster

8 of 27

Pros

  • You can write code that adheres to your types with high guarantees that it will work just fine

​

  • Done with a big refactor? Just run tsc to check what you broke

​

​

9 of 27

Why NPM?

  • Single source of truth
  • Sharing is caring
  • It’s fun to be part of the problem

​

​

10 of 27

01

Simple component

11 of 27

observation:

> The rows can be dynamic

12 of 27

02

Dynamic component

13 of 27

Dynamic rows

observation:

> The columns can be dynamic

14 of 27

Dynamic rows and columns

observation:

> The columns can be passed in from the outside allowing the component to take in any array and render it’s contents

15 of 27

03

Generic component

16 of 27

Generic component

  • Takes in an array with objects which will be used to infer the rest of the types

​

  • The column is an array of objects , whose accessor keys need to be the same as the keys in the data array objects

​

​

17 of 27

Generic component

  • Takes in an array with objects

​

  • The column is an array of objects , whose accessor keys need to be the same as the keys in the data array objects

​

​

18 of 27

04

Packaging

19 of 27

tsconfig

20 of 27

Package json

21 of 27

tsup config

22 of 27

versioning

23 of 27

namespaces

​

When you sign up for an npm user account or create an organization, you are granted a scope that matches your user or organization name. You can use this scope as a namespace for related packages

​

Popular examples include @types/ which is used to publish dts declarations for libraries that didn’t ship their own types

​

"publishConfig": {

"access": "public"

}

​

​

24 of 27

Publish steps

  • Create an npm account
  • If it’s an update remember to bump your version
  • If you’re publishing under a namespace remember to mark it as public in the package json

"publishConfig": {

"access": "public"

}

  • Run npm publish and follow the steps

​

​

​

25 of 27

Final steps

  • Setup tests and linting
  • CI builds and deploy on push with tags and releases
  • Code documentation with jsdoc
  • Written documentation in the readme or a standalone site

​

​

26 of 27

Thank you for playing your part

27 of 27

React is awesome, Thank you 😊

@tigawanna