ReactJs: How to build npm library - javascript

I am new to react. I want to build a npm reactjs library. I have a reactjs project and I want to general it as a package(library) that can be used by other project. For example, people can use "npm install" command to import my project.

Edit package name in package.json
Publish a package
npm publish --access public
ref

Related

Typescript in Existing React Project

My question is based on installing typescript in existing React project. It is not related to how to create typescript react!
I have cloned a repo from AWS where there is a react app. Now, I need to make an app using typescript. To install the typescript in React I have run a command "npm install --save typescript #types/node #types/react #types/react-dom #types/jest". It is creating typescript in package.json but not creating tsconfig.json file.
My other question is should index.ts file created automatically in React and if it is then how could I convert into lib/index.js within React.
Please consider the article linked in the comments of the post as a guide for migrating from JSreact to TSreact.
For a simple answer, the command below will init a tsconfig.json file
with npm as a manager.
npx tsc --init
for yarn
yarn tsc --init
(for completeness).

pnpm in monorepo - how to run a command only in a specific package?

Let's say I want to install a package in a specific package in my monorepo, how do I do this from root?
in npm, you can do this with something like this:
npm install react --workspace=a
I searched the docs and I can't find a way to do this in pnpm.
It is called "filtering" in pnpm docs (see it here).
In this case, you would run:
pnpm --filter=a add react
or
pnpm -F=a add react

How do I run a program that I git cloned?

I'm new to git. I just git cloned this library and am trying to run the code in this folder. I know that it uses Javascript so I tried using npm start but it gave me a npm ERR! missing script: start error. How do I run it?
You should use the Getting Started guide on their docs. You are meant to install the package via npm and not cloning it using git. You would only clone the repo if you intend on modifying their code.
2.1 How to Install
This charts library is intended to be installed with npm and the built into your project with a tool like Webpack. It expects React to be present, as well as our TimeSeries abstraction library, pond.js. More on this below.
To install:
npm install react-timeseries-charts pondjs --save

How can I update the package.json using meteor add?

How can I get my package.json updated by meteor add command as it can be achieved by npm install --save?
I just read there that meteor writes in the .meteor/package. Does that mean package.json can only be updated via npm install --save whereas meteor add only effects .meteor/package?
I'll highly appreciate detailed information on that.
There are two ways of adding packages to a meteor project.
With meteor add
With npm install
These are two separate ways of managing packages, and one doesn't affect the other.
If you install, for example, jquery with meteor add, you'd use import {$} 'meteor/jquery' to use in a file.
If you use npm install to install jquery, then you might use import $ from 'jquery'.
Don't confuse npm packages with meteor packages.

How do you use "yarn create <pkg-name>"?

I was reading Yarn blog and found it supports yarn create just like create-react-app.
https://yarnpkg.com/blog/2017/05/12/introducing-yarn/
I tried locally... basically made very simple application with following package.json.
{
"name": "create-test-app",
"version": "1.0.0",
"bin": {
"create-test-app": "./index.js"
},
"dependencies": {
...
}
}
But somehow,,, it is complaining that it can't find the package.
"error Couldn't find package "create-test-app" on the "npm" registry.
In order to use "yarn create", I should upload on "npm" registry? Can't try it in locally? Thanks in advance.
The way to use this is yarn create <starter-kit-package>. Starter kit package must have been installed globally. You can find create-* starter kit packages in the npm registry.
Here is the link to documentation for Yarn create
To add to #Oluwafemi Sule 's answer.
The way to use this is yarn create <starter-kit-package>. Starter kit package must have been installed globally. You can find create-* starter kit packages in the npm registry.
This means that for it to work you need to install it to your yarn global or publish it to npm registry.
Fortunately you can install your local package globally. So start by creating a starter kit package then do this:
yarn global add file:/path/to/create-kit-package
Then after this you can do:
yarn create kit-package
In the above kit-package is the name of the package without create, since you are supposed to create the package with a name that matches the following format:
create-package-name
so on the cli you call the command as :
yarn create package-name
to invoke once it is installed globally.
You can publish this to NPM once you are happy with the package so that someone else or yourself can install it the normal way without first adding the package globally.
Yarn takes from NPM and does not have its own mechanism for creating packages. When you create a package on NPM, Yarn will actually grab its details through the NPM Registry.
More information: http://blog.npmjs.org/post/151660845210/hello-yarn

Categories