React basic concepts you need to know

props vs state

props are set by the caller component and state contains data specific to component.

Default Props

defaultProps can be defined as a property on the component class itself, to set the default props for the class.

Prop types

Runtime type checking can be used to make programmers life easy. In react we can use Typescript or prop types to achieve that.

react script start vs react script build

react script start vs react script build both creates an optimized version of the project. webpack does that for creat-react-app. whenever react script start command is run it starts a webpack server and keep the optimized project in temporary memory and that is why it gets vanished when server is stopped. On the other hand, react script build builds an optimized version and creates a static folder for that and store that permanently until next react script build command is found.

Jsx is not HTML

Jsx is just syntactic sugar . Under the hood it’s just plain javascript. In react preset it is set that jsx will be converted in React.createElement() and bable does that.

Change detection in React

Dom manipulation is a costly operation that is why react use virtual dom for change detection. Whenever a change is made it creates a virtual dom and compares with the previous virtual dom using diff algorithm and then update the dom.

Accesibility

Web accessibility is used so that web can be accessed by everyone smoothly. Whether a person is physically challenged or what device anyone is using that shouldn’t be mattered.

Semantic HTML

Semantic HTML is the foundation of accessibility in a web application. Using the various HTML elements to reinforce the meaning of information in our websites will often give us accessibility for free.

Focus Control

We need to ensure that our web application can be fully operated with the keyboard only.

Mouse and pointer events

Ensure that all functionality exposed through a mouse or pointer event can also be accessed using the keyboard alone. Depending only on the pointer device will lead to many cases where keyboard users cannot use your application.