@lundiak/react-sum NPM

React Sum

Experimental ReactJS component to show sum of 2 numbers.

Experiment related to Component creation process and usage of tolls, such as: npm, ESLINT, Webpack, Babel, Create React App, React Scripts, Storybook, Jest, Enzyme, Cucumber and CI tools.

Consumer Usage

Installation

npm install --save @lundiak/react-sum

Import the component where you want to use it, and you ready to use it in render().

Approach 1:

import ReactSum from '@lundiak/react-sum'

<ReactSum.Sum />

Approach 2:

import { Sum } from '@lundiak/react-sum';

<Sum />

Props

Prop	Description	Default value
a	a	2
b	b	2

Example

Your file MyApp.jsx:

import React, { Component } from 'react';
import { Sum } from '@lundiak/react-sum';

class MyApp extends Component {
  render() {
    return (
        <Sum a={2} b={3}/>
    );
  }
}

export default MyApp;

Development

Installation

npm install

Tests

npm test

Style Guide vs. Documentation

Storybook

To run locally:

npm run storybook

Docz and Styleguidist and other

https://css-tricks.com/front-end-documentation-style-guides-and-the-rise-of-mdx/

Publish new version

npm version patch

Note: it will run:

npm run prodBuild to build JSX files into dist folder.
npm test to verify Component logic (but for now Jest and Cucumber uses dist folder files).
npm run build-storybook to build local, static version of Storybook ready for publish.
will add changes files to git commit and publish changes.
Using patch will increase SemVer patch only.

Resources

About npm main, browser and module, jsnext:main, esm, esnext(2017)

If package.json has "main" field but not a "module" field, all files in that package are loaded as CommonJS. If a package.json has a "module" field but not "main" field, all files in that package are loaded as ES Modules. If a package.json has neither "main" nor "module" fields, it will depend on on whether an index.js or a module.js exists in the package as to whether to load files in the package as CommonJS or ES Modules respectively.

About rename .babelrc to babel.config.js and how this fix import-ing issue.

Webpack related

https://itnext.io/how-to-package-your-react-component-for-distribution-via-npm-d32d4bf71b4f

Math related

https://github.com/cezary/react-math + https://github.com/ForbesLindesay/ascii-math
HTML math tag isn't supported by Chrome, and works only in Firefox and Safari.
http://eyeasme.com/Joe/MathML/MathML_browser_test.html

Testing

Jest + Enzyme

Cucumber for JavaScript

cucumber, since 2011, 979 commits
- react-cucumber, since 2017, 16 commits
- jest-cucumber, since 2018, 153 commits

TODO

JSS - https://cssinjs.org/
Styled Component?
ReactCSS - https://github.com/casesandberg/reactcss
How to convert valid DOM element of math tag into JSX/React Valid element? This maybe be helpful.