10 things you need to know about React

1. Framework or library

Library is a small thing where you can take your own decision. On the other hand, the framework is a big thing where you do your
work according to the framework. React is a library. You can make things from your comfort zone using the library. But in the framework, you’ll have to break your comfort zone to make any thing. The Framework is hard for beginners whereas the library is beginner-friendly.

2. JSX

JSX is very simple to understand. It’s often become very irritating to write the same thing again and again. So, Facebook came up with JSX. Using JSX you can avoid much repetitive code. Such as…

//Without JSX
<div id="apple">
I love apple
</div>
document.getElementById('apple').style.color = "red"
//with JSX
<div id="apple" style={{color:red}} >I love apple </div>

3. Ternary Operator

You can use a ternary operator in react. It is simple and short. In JSX you can use the ternary operator. Like this….

return( 
<div>
{
isPass ? <Holiday/> : <StudyHard/>
}
</div>
)

4. Component Lifecycle

Every component maintains a lifecycle to process all the orders.

• Mounting:
  1. constructor()
  2. static getDerivedStateFromProps()
  3. render()
  4. componentDidMount()
• Updating:
  1.static getDerivedStateFromProps()
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate()
  5. componentDidUpdate()
• Unmounting:
  1. componentWillUnmount()
• Error Handling:
  1. static getDerivedStateFromError()
  2. componentDidCatch()

5. React PropTypes

Before talking about the props, you should know there are diffferent types of props.Such as …
Component.propTypes = {
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
}

6. Data transfer

=> In react, we can transfer data from parent component to child component using props.

//Parent component
<Students information={information}></Students>
//Child component
const { name, roll, age } = props.information;
return (
 <div>
 <h1>Student Name : {name}</h1>
 <h1>Student Roll : {roll}</h1>
 <h1>Student age : {age}</h1>
 </div>
)

7. State

The best part about react is you can use State to avoid much repetitive code. It’ll help you to change the condition of a
situation.

const [count, setCount] = useState(0);
const handleCount = () => {
 setCount(count + 1);
}
return (
 <div>
 <h1>{count}</h1>
 <button onClick={{ handleCount }}>Increase</button>
 </div>
)

8. React tress’s Reconciliation

In this process, internal software compares the previous code with the upcoming code. After comparing it starts to find the changes and update the internal code. If any changes happen then it updates the dom according to the changes.

9. Javascript in react

React is javascript friendly. You can use javascript in react like this.

<main value={this.state.value} onChange={this.handleChange}>
 {array.map(element => <option value={element.value}>
 {element.text}
 </option>)}
</main>

10. Declarative

In react you can write declarative components like <Section></Section><Main></Main><Footer></Footer>.
You are not saying what should be done just how it should look like.