Today we are going to explore some fundamentals about React Js that we should know.

React is a JavaScript library used to build user interfaces. React allow you to build dynamic and interactive web apps. Some core concepts on react that you should know as a developer is

React Components

In React Js there is a concept about reusable components. You can create small components and put them together to make bigger components. All the components in React are reusable. We can compare a react component with a simple JavaScript function.

• The component name should start with a capital letter. Lowercase names are reserved for HTML elements. If you named a component that starts with a lowercase the ReactDom will ignore the function.

• Every component receives a list of attributes and in React this attribute list is called props but you can name it as you want.

• Every component returned output from the function component. Any HTML element can be returned from the function. It's called JSX which is a JavaScript extension.

          import React from 'react';
  
               const Example = ( props ) => {
                return (
                       <div>
                         <h3> type HTML element you want to return </h3>
                      </div>
                     );
           };
  
     export default Example;
  

JSX

JSX just provides syntactic sugar for the React.createElement function. It converts the createElement function into simple HTML markup. Any HTML element can be returned from the component function. JSX is a JavaScript extension.

Example Code:

                        <PlayButton color="red" shadowSize={2}>
                            Click Me
                       </PlayButton>

compiles into:

                     React.createElement(
                     MyButton,
                     {color: 'blue', shadowSize: 2},
                        'Click Me'
                     )

Default props

It can be defined as a property on a class component, to set the default props for the class. This is used when we forget to define any props but not for the null props.

      class MyButton extends React.Component {
      render() {
      return <MyButton  style={{color: this.props.color}}>Submit</MyButton>
       }
      }
  MyButton.defaultProps = {
     color: 'blue'
   }
 <MyButton/> // render a button with default blue text for undefine props
 <MyButton color='red'/> // render a button with red text for define props

Virtual DOM

Basically, DOM stands for Document Object Model . As we know DOM is represented as a tree structure, and changes in DOM happens quickly but the changed element and its children have to go through a stage and the changes have to be re-painted which is slow. In the case of Virtual DOM it tries to minimize the other stages and only renders the necessary part of the DOM that needs to be changed.