Deep Into React
React conversation
What is react? React is a library or we can say it is a framework. frameworks come with a purpose. Frameworks have so many things pre-build into them. All we need is to use it correctly. But there is a problem, we have to code in its specific way otherwise it will break our website. React builds UI on our behalf. building UIs with native Web APIs and JavaScript makes it many herders. React is getting popular day by day but why? It can be easy to use and its performance. Let’s talk about DOM. DOM means Document Object Model.DOM is another reason why React is popular.
Benefits of components
components are the best. components are one of the best reasons why we use React or other libraries. Components make our code more readable and easy to manage. we can create components static or dynamic.
What’s Virtual DOM?
lets have a look at this example :
<div>
<div id=”header”>
<h1>Hello, {{state.world}}!</h1>
<p>How are you today?</p>
</div>
</div>
if state.world value changed it will re-render that whole module. But P tag is static. no need to re render this thing. what virtual DOM does is it creates another virtual dom inside it. it will render only the dynamic part.
Deep into JSX
JSX is an XML syntax that constructs the markup in React components. JSX makes things easy to read and write React components.
JSX Example :
<FormButton color=”green” buttonSize={5}> Submit </FormButton>
JSX simply creates a React element using the createElement method in the end.
Learn React Default Props
default props is a property in the React component used to set default values for the props argument. It will be changed if the prop property is passed. default props can be set as a property on the component class itself, to set the default props for the class.
6.PropTypes
PropTypes are the core part of the React module.
Installation
npm install — save prop-types
to use propTypes we have to import propTypes from prop-types.
Optimizing Performance
the performance will depend on how we are using React when building it. According to React’s documentation, while we are still in development mode, we can use the “Performance” tab in the Chrome browser to visualize how React components mount, update, and unmount.
web applications to update or Optimized
React offers us a lot of performance improvements to a web app, and you can achieve improvements through some techniques, features, and tools.
I found 12 techniques to optimize web applications. first of all, we need to figure out what is our website speed. Once you have tested the speed of our website, you can start optimizing it. There are a lot of different ways to make your website work faster and we created a list of the most effective ones.
React State
I usually use prop drilling to pass my data from one component to another. but state makes this thing more easy and intersting.
here is a example of setState :
function Counter() {
const [count, setCount] = useState(0)
const increment = () => setCount(x => x + 1)
return <button onClick={increment}>{count}</button>
}
function App() {
return <Counter />
}
the state helps us to store our data in a specific area. there are more states. we can also use these stats to send our data to other components.
How React works!
before how React works we need to know about Virtual DOM, Declarative, and Diff and Updates. We already talked about Virtual DOM. let’s talk about Declarative. React calls render everytime a component’s state changes. when we want to make a yellow button green, we write code like : $(button).removeClass(‘yellow’).addClass(‘green’).
modify a component’s state and the component tree rerenders. This is declarative in React.
