1 What is React...?
Frameworks use for great purpose, especially for young developers. Framework already has smart design for you. When you need small piece of code, you have to include the whole thing anyway. UIs are everywhere, from the simple buttons on a microwave to the dashboard of a space shuttle. React is good for developed UI. React have virtual DOM, thats why react is best for modern developer.
2 React JSX
3 React is all about components
In react everythings are component base. React has two type of component one is class component another is functional component. Component are small piece of reusable, composable, and stateful codes. React components are exactly the same; their input is a set of props and their output is a description of a UI. We can reuse a single component in multiple UIs. Components can contain other components. React component can have a private state. Those state to hold data. This private state is an implicit part of the input that drives the component’s output.
4 React DOM
React DOM means Document Object Model. In react has a virtual DOM. A virtual DOM object is a representation of a DOM object, like a lightweight copy. Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.
5 React defaultProps
React components take inputs in the props argument. Then passed down from the Parent component. The child component will access them from the props object with the attribute name serving as the key. The problem here is what happens if the parent component doesn’t pass any attributes to the child component? Sure we will see undefined display in place of the props not sent by the parent component. To solve this issue, we can use the logical operator to set a fallback value, so when a prop is missing it displays the fallback value in place of the missing prop.
6 React optimizing Performance
Performance is important for any project. Clients wants their application have too much faster. Thats why's react is much concern of performacne. If you’re faceing performance problems in your React apps, make sure you’re test. React includes many helpful warnings. These warnings are very useful in development. You can read this warning and find the problem easily
7 React State
React has a built-in state object. Where store property and values that belongs to the component. When the state changes, the component will be re-renders. State contain as many properties. You can changes the state values by setState function. Always use the setState() method to change the state values, it will ensure that the component knows its been updated.After that it calls the render() method again,
8 Conditional rendering
In JSX when we thing conditional rendering, Ternary operator come out first in oor mind. In conditional rendering ternary operator vary helpful to us, its give two value depend on true false condition.
9 How rendering works
Every setState function call react state to change new State. Then react call render method to update the components in memory (DOM). Raect compares it with browser. If there are any changes, React does the smallest possible update to the DOM.
10 Raect props
Props means property. Props are used for passing data from one component to another. Parent component pass values to children using props.