React 18 Contacts manager

name Github pages hosted app
type link
action http://hearsid.com/react-contact-manager/#/contacts

Found this link online: https://contact-manager-react.herokuapp.com

Performance

Dom_Content_Loaded → 0.35s #first_contentful_paint → 1.21s #largest_contentful_paint →1.21s

1.1k contacts

Other

Issues:

• prop type issue, solved by providing any in React.Component generics.

Q. Why do we need react prop type? Ans. Maybe for type checking the prop provided since value are stored as PropType.String etc. so basically just for type checking.

Q. Do I need to put context API and useReducer here? Ans. The functionality is small so don’t need it but still will try the same to avoid component communication issues.

Use this for ng-container functionality:

React.Fragment

Q. How to connectuseReducer andContextAPI ? Ans.

name Reducer + Context API
type link
action https://medium.com/hmh-engineering/using-react-contextapi-usereducer-as-a-replacement-of-redux-as-a-state-management-architecture-336452b2930e

Q. Where to put react static resources? Ans. The public folder contains static files such as index. html, javascript library files, images, and other assets, etc. which you don’t want to be processed by webpack. Files in this folder are copied and pasted as they are directly into the build folder.

Q. How to add typescript and scss support? Ans. // Initialize React app with Typescript // $ npx create-react-app yourProjectName —template typescript

// Go into project folder // $ cd yourProjectName

// Install node-sass dependency // $ npm i node-sass

// You can now import .scss / .sass files into your React components // and use Typescript too. Happy coding!

Q. Why are routes not working after deployment?

How to create

1. create_react_app use npx to make sure latest version is used.
2. It will install React, react-dom and react-scripts

Github pages performance