React Basic concept
React is a JavaScript “library”. It is not exactly a “framework”. It is not a complete solution and you will often need to use more libraries with React to form any solution. React does not assume anything about the other parts in any solution.
#Creat React Application
install: npx install create-react-app my-app
cd my-app
npm start
Your application is ready to build.
#Components
A React component can be either “stateful” or “stateless.”
“Stateful” components are of the class type, while “stateless” components are of the function type.
Functional Components Example:
Calss Components Example:
#Props
Props are an optional input, and can be used to send data to the component. They are immutable properties, which makes them read-only. This also makes them come in handy when you want to display fixed values.
Example:
#JSX Syntax
JSX is a syntax extension of JavaScript. It’s used to create DOM elements which are then rendered in the React DOM. A JavaScript file containing JSX will have to be compiled before it reaches a web browser.
Example:
#Default-Props
We know Parent components pass props and child components receive these props.
Example:
What happens if the parent component doesn’t pass any attributes to the child component?
Example:
To solve this problem we can use default props.
It can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but not for null props. For example:
How it is used. Let's see an example:
#prop-types
when an invalid value is provided for a prop, a warning will be shown in the Javascript console. For performance reasons, propType is only checked in development mode.
Install:
npm install prop-types
To Run type checking on the props for components, you can assign the special propTypes property.
Example:
#Performance Optimization Techniques for React Apps
- Need to use Immutable Data Structures
- Need to use Multiple Chunk Files
- Function/Stateless Components and React.PureComponent
- Dependency optimization
