Deprecated: This package has been deprecated. We recommend using @mskcc/carbon-reactinstead.

DSM React Component TypeScript and JavaScript transpiler.

TypeScript cheatsheet

> This setup is meant for developing React component libraries that can be published to NPM.

Get Started

``zsh


npm

npm install @mskcc/components-react

yarn

yarn @mskcc/components-react
`

Import into your component

`js
import { Header, Footer } from '@mskcc/components-react';
`

> If you get a hook error, you'll need to point component-react to the package's react and react-dom you're trying to run.
>
> `js
> // in demo-react-spa directory
> cd node_modules/react && npm link
> cd .../react-dom && npm link
>
> // Go to components-react direction
> npm link react
> npm link react-dom
> `

How it works

- This package builds to /dist.
- New components are to be housed in src/ts with it being exported from src/index.ts.
- Components are written in TypeScript, then transpiled to JavaScript.
- demo directory has a lightweight page that will render your component.
- The default demo imports and live reloads whatever is in /dist. No symlinking required via Parcel's aliasing.

Code Quality

Code quality is set up for you with prettier and eslint. Adjust the respective fields in package.json accordingly.

$3

This is the folder structure we set up for you:

`txt
/demo
index.html # add cdn and other header elements here
index.tsx # add your component
package.json
tsconfig.json
/src
index.ts # export all your components here
/components # house your components here
rollup.config.js # config file for transpiling to CJS, ESM, UMD
tsconfig.json # config file to handle and compiling TypeScript files
`

#### Rollup

This package uses Rollup as a bundler and generates multiple rollup configs for various module formats and build settings.

#### TypeScript

tsconfig.json is set up to interpret dom and esnext types, as well as react for jsx. Adjust according to your needs.

$3

CJS, ESModules, and UMD module formats are supported.

The appropriate paths are configured in package.json and dist/index.js accordingly.

$3

The Playground is just a simple Parcel app, you can deploy it anywhere you would normally deploy that.

`shell


components-react/demo/package.json


npm run build # builds to dist
``

$3

always use named exports. Code split inside your React app instead of your React library.

$3

- CSS-in-JS
- We can inject the style sheet into the component (TBD)