Experimental ReactJS component to show sum of 2 numbers, as npm package.
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 />
Prop | Description | Default value |
---|---|---|
a | a | 2 |
b | b | 2 |
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;
npm install
npm test
Storybook
To run locally:
npm run storybook
Docz and Styleguidist and other
npm version patch
Note: it will run:
npm run prodBuild
to build JSX files intodist
folder.npm test
to verify Component logic (but for now Jest and Cucumber usesdist
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.
About npm main
, browser
and module
, jsnext:main
, esm
, esnext
(2017)
- https://webpack.js.org/configuration/resolve/#resolvemainfields
- https://shuheikagawa.com/blog/2017/01/05/main-jsnext-main-and-module/
- https://nodesource.com/blog/es-modules-and-node-js-hard-choices/
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.
- 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
- https://www.codementor.io/vijayst/unit-testing-react-components-jest-or-enzyme-du1087lh8
- https://raygun.com/blog/mocha-vs-jasmine-chai-sinon-cucumber/
- https://jestjs.io/docs/en/tutorial-react
- https://blog.bitsrc.io/how-to-test-react-components-with-jest-and-enzyme-in-depth-145fcd06b90
cucumber
, since 2011, 979 commitsreact-cucumber
, since 2017, 16 commitsjest-cucumber
, since 2018, 153 commits
- 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.