know more about react
Before I start I want to let you know that, this is a beginner-friendly blog that covers some of react js topics such as jsx , render state, virtual DOM, etc. If you are learning to react js now, then I think you might become interested to read this blog.
JSX: jsx stands for javascript XML .in short it helps us to write HTML in react.the first part of jsx tag determines the type of react element.it is an extension to the javascript language syntax.just like HTML jsx has tag name,attribute,children.jsx makes the react code simpler and familiar.
Example:
//with jsx
const hello = () =>{
return (
<div>
<h1>hello,,,what is your name?</h1>
</div>
)
}
//without jsx
const hello = () =>{
return React.createElement(‘div’,null,React.createElement(‘h1’,null,’hello,,,what is your name’))
PropTypes: React has a feature called props which helps to pass data to one component from another. with props a component receives data from outside. this data may come also from external API.in react there is a way to check the type of data at runtime which is coming with props is called prop types. we can also use prop types to document the intended types of properties passed to the components.
DefaultProps: We can define the default property object which means that when a property is undefined then the default property takes place.it can be defined as a property on the component class itself. this is used for undefined props, not for null props.
Virtual DOM: In modern JavaScript, DOM stands for document object model. Its mainly used to create a Node using JavaScript. In every JavaScript DOM, there is a corresponding Virtual DOM. Virtual DOM is an object identical to the JavaScript Object. Virtual DOM is simply a representation of a JavaScript DOM object. Virtual DOM objects have the same power and properties and methods as the DOM object. But virtual can’t decide what’s on the screen. Manipulating a virtual DOM is much faster than an actual DOM. Virtual DOM can update so quickly than the actual DOM. When the virtual DOM is updated then the react compares the virtual DOM with the virtual DOM snapshot, which was taken right before the update. Then by comparing both react figure out which virtual dome has changed. This process is called diffing. At any given time react maintains two virtual DOM. One is the updated state virtual DOM and the others are the previous state virtual DOM. Once react knows which virtual DOM object has changed then the react updates those objects and only those objects on the real DOM. In this way, react can only update the necessary part of the DOM.
Conditional Rendering: when we are building react application we may often need to show or hide HTML code based on some certain condition. conditional rendering in React works the same way as condition works in javascript. we have four different approaches for conditional rendering. such as if/else, element variables, ternary conditional operator, and short circuit operator.in JSX it is possible to use ternary operators.
State: we know that every react component returns jsx which describes the user interface. the state is managed within the component. variables declared in the function body. the state can be accessed using the use hooks such as useState in functional components and this. state in class components. in the beginning, we set the initial state of the component. to update the state we passed value in the setState() method. state update will re-scheduled and components will be re-rendered after it is done. we need to call the setState method to inform react about the change.
Rendering in React: When we run react application, the code written in our components gets translated into elements that get mounted onto the DOM.the react documentation splits this work into two phases. one is the render phase and the other phase is the commit phase. during the render phase react will start at the root of the component tree and goes downwards to the leaf of the components. while traversing for each of the components react invokes the create element method and converts the components JSX into react elements and stores that rendered output. once the JSX to react elements conversion is done for the entire component tree all the react elements are handed over to the commit phase.
Is react js library or framework: React js is a javascript library. It's not a framework. it's a small library. we often need to use more libraries with react js to build a complete project. We know that libraries are more flexible. moreover, frameworks are not flexible and easy to handle. In the framework, we need to code everything in a certain way.in react we have to make all the decisions. react help us to build user interfaces with the help of components.
Helper function: a helper function is a useful approach when the component is big. also, we can achieve code reusability using the helper function. our code will be more organized if we use the helper function. This keeps the component clean and separates the concerns inside of the component.
Component: React is all about components.in react, a component represents a part of a user interface. the root component contains all other components. components are also reusable. the same component can be used with different properties to display different information.
Hope you have enjoyed reading this article and found this article helpful.if you have enjoyed this then follow me on LinkedIn.
