Getting Started with Create React App

Step 1. Preparing the Project In the command line of your project, execute: npm init -y

Add React and TypeScript to the project (I’m going to use yarn , if you don’t mind) yarn add -D react react-dom typescript @types/react

In order to compile TypeScript, create a tsconfig.jsonfile in the project

Step 2. Create Your React Application Inside src create the folder components.

create here within this article only one file App.tsx Now, create a file index.ts inside the src folder

Let’s change our package.json and replace the scripts section:

yarn build

Folder dist should be appeared

Step 3. Configure git

git init

Create the .gitignore

Step 4. Configure ESLint

yarn add -D eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser

create an .eslintrc

Add .eslintignore:

add to scripts section: -> lint

yarn lint

Step 5. Configure Prettier

yarn add -D eslint-config-prettier eslint-plugin-prettier prettier

Add a prettier plugin to .eslintrc:

scriptsin package.json: -> prettier

Step 6. Adding Tests with Jest yarn add -D jest jest-canvas-mock jest-environment-jsdom ts-jest @types/jest @testing-library/react

Create the project root file jestconfig.json:

Create folder tests . In the folder tests, create file common.test.tsx:

scripts section in package.json: -> test

Step 7. Configure package.json and Prepare for Publishing

package.json, replace: -> build

Replace: main

Step 8. Commit and Push Your Code

Step 9. Publishing to NPM Choose the package name

Step 10. Icon injection yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/react-fontawesome