ReactJs Fundamental Concepts.

ReactJs, a widely used most popular javaScript library which is created by Facebook. It takes the web application in the updated level. In this blog, we will talk about the fundamental concepts of reactJs.

1. Virtual DOM : ReactJs creates a virtual DOM. DOM is document object model. It is hard to work with browser DOM but react gives us a virtual DOM that is simpler to use and it basically like an agent to work with browser DOM. When we render a Component in react it actually draw a tree in the memory then it connects with DOM and process the data in the browser. Updating the main DOM is quite expensive because it has to render the full DOM again and it has to loads the css and other external dependencies. React basically creates a copy of virtual DOM. When something changes in react it immediately checks with the previous DOM with the updated DOM and if it finds any changes it only updates where it should update, rest will be the same as before.

2. React.createElement : In javaScript, we use document.createElement to create an element. React gives us an updated built in method React.createElement. It is same as document.createElement but it has some extra power. In this method we can pass three parameters. First one is the content we want to pass, second one is children and the third one is props. We can pass nested component in createElement method.

3. Component : Components are basically an UI chunk that can be reusable, composable and stateful. We can make small components and reuse them. When a component is big, it it harder to work with this. React gives us the opportunity to create small components and connects them to big ones. Components are two types. One is functional component and other one is class Component. here bellow, I have given an example of functional components

const Demo = () => {
  return (
     <h1>This is a react component</h1>
  ) 
}

4. JSX : Most of the people think that JSX is like as HTML. But actually jsx is like html not not html. It has some extra power. First of all, JSX is not supported in browser. We can use dynamic value in JSX. We also can make calculation in a jsx template. You can include a JavaScript expression using a pair of curly brackets anywhere within JSX.

const Demo = () => {
  return (
     <h1>{ Math.floor(Math.random() * 100) }</h1>
  ) 
}

5. Props : Props are variable passed to the children component from the parent component. Its like arguments and functions works on javaScript. Props is the main mechanism of the communication in react components. We can pass a all data types that are defined in javaScript through props and can easily read this from the child component.

6. State : State is what allows you to create components that are dynamic and interactive. If any data that will be changing with user interactivity then we should keep it in state. State is similar to props, but it is private and fully controlled by the component. In ES6 class components, if we want to change the state, we have to use setState method. And in functional component, we have to call useState method of react to define a state.

7. defaultProps : When we pass props to children component from parent component, we can define some default props in the child component. It is very useful. Suppose, if one forget to send the props to the component, it will through an runtime error but with the defaultProps we can get rid of this error.

const Component = ({prop1}) => (
  <div>Hello</div>
)
Component.defaultProps = {
  prop1: {name:'Pritom'}
}

8. Events handling : Handling event in react is same as handling event in browser DOM. ReactJs is basically uses one way data binding. Parent component passes down a function (as a prop) that can be used by Child component to push some data up. With JSX you pass a function as the event handler rather than a string.

9. Conditional Rendering : Conditional rendering is a process that render UI components based on a condition. It allows to render different component or logic based on the condition. We can use conditional rendering in many ways such as ternary operator, AND operator (&&), check weather its null or undefined or not etc.

function Element = () => {
   const check = false;
   return (
      {
         check && <h1>Hello world</h1>
      }
   )
}

10. Rendering elements : Rendering elements means to render one or multiple components into the DOM. render() function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the specified HTML element.

const element = <h1>My name is Pritom</h1>;
ReactDOM.render(element, document.getElementById('root'));