@mskcc/components-react

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

# npm
npm install @mskcc/components-react

# yarn
yarn @mskcc/components-react

Import into your component

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.

// 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.

Setup Files

This is the folder structure we set up for you:

/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.

Module Formats

CJS, ESModules, and UMD module formats are supported.

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

Deploying the demo Playground

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

# components-react/demo/package.json
npm run build # builds to dist

Named Exports

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

Including Styles

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