React Fundamental Concept

Pranto Shikder

Nov 4, 2020

Basic

React is a JavaScript “Library” for building a user interface. React is not JavaScript “Framework”.

User Interface (UI)

DOM (“Document Object Model”). It’s a browser programming interface for HTML and XML.

React Code

It user the array is the starting.

import React from 'react';
const user: [
  { name: Pranto Shikder },
  { name: Sudipta Shikder },
];<ul>
  {user.map(user=>
    <li>{user.name}</li>
  )}
</ul>

`Default Props`

defaultProps defined as a property class component. Used for undefined props or null props.

Prop-types

install: npm install — save prop-types
import:

import PropTypes from ‘prop-types’; // ES6
var PropTypes = require(‘prop-types’); // ES5 with npm

Prop-types Usage

import React from 'react';
import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

PropTypes.checkPropTypes

Automatically check these prop-types on the component, but using prop-types without React, then manually call this PropTypes.checkPropTypes.

PropTypes.resetWarningCache()

PropTypes.checkPropTypes(...) only console.errors a given message once. Error warning and call PropTypes.resetWarningCache().

Virtual-DOM and diffing works in React

Understand how DOM is build

Create this DOM and painting to the screen and understand the full stages of converting HTML to DOM.

Benefits of components

“component” used by frameworks and libraries. Components using HTML5 features like custom elements.

Clickable image

<a href=”http://google.com”>
 <img src=”google.png” />
</a>