From f73ff161acd1610ff8be74d25a8fc10e5e183012 Mon Sep 17 00:00:00 2001 From: Darren Cooney Date: Wed, 30 Aug 2023 09:51:22 -0400 Subject: [PATCH] Readme update --- README.md | 16 ++++++++-------- package.json | 2 +- src/App.tsx | 5 ----- 3 files changed, 9 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index ef570f4..36deea6 100644 --- a/README.md +++ b/README.md @@ -40,9 +40,11 @@ From the project directory, you can run the following scripts with `npm` or `yar After the project setup is complete, it's time to select a package name and start developing the package. +Note: Package source files are located in the `src/lib` directory. + ### Package Naming -The first thing you to do is to choose a **unique** name for the package. +The first thing to do is to choose a **unique** name for the package. Go to the [NPM registry](https://www.npmjs.com/) and run a search. Be sure there isn't an exact match to the name you intend to use or you will need to do one of the following: @@ -53,21 +55,19 @@ Go to the [NPM registry](https://www.npmjs.com/) and run a search. Be sure there In the `src/lib` directory of the project is an example component. This is the component we intend to distribute on npm, which happens to be a simple HTML button component. -You can rename this component or create an entirely new component. Either way, this will be the main component for distribution so add your logic to this file entry point in the `src/lib` directory. +You can rename this component or create an entirely new component. Either way, this will be the main component used for distribution so add your component logic to this entry point. ### Component Functionality -Locate the `App.tsx` component found in the root of the `src` directory. This is the file we are using for testing the functionality of the distributed package. - -You will notice that we are importing the `Example` component and passing various props to the component. +The `App.tsx` component found in the root of the `src` directory is the file we are using for testing the functionality of the distributed package. You will notice that we are importing the `Example` component from the `libs` directory and passing various props to the component. -Use this as the package demo and import your component/package into this file for testing. +Use this file and import your component for testing when runing the local development server. ### Package.json -The next step is to update the project config found in `package.json` to reference your specific project. +The next step is to update the project config found in `package.json` to reference your project specifics. -It's recommended that you change the following fields: +At minimum you must update the following fields: | Field | Description | |--------------: |------------------------------------------ | diff --git a/package.json b/package.json index 6729753..2f77ec7 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,10 @@ "description": "A starter project for publishing NPM packages with React and Typescript.", "homepage": "https://dcooney.github.io/react-npm-starter/", "source": "src/lib/Example.tsx", + "types": "dist/lib/Example.d.ts", "main": "dist/index.js", "module": "dist/index.module.js", "unpkg": "dist/index.umd.js", - "types": "dist/lib/example.d.ts", "overrides": { "typescript": "^5.2.2" }, diff --git a/src/App.tsx b/src/App.tsx index a1ab866..47a5985 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,11 +6,6 @@ function App() {

React NPM Starter

-

- A starter project for rapidly publishing{' '} - NPM packages with React and - Typescript. -