ReactJS Basic Concepts

PropTypes

We can use the propType for validating any data we are receiving from props. propTypes are also objects where keys are the prop names and values are their types. Below syntax shows how to use propTypes:

import PropTypes from 'prop-types';

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

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

State/Props

Props are short for properties and they are used to pass data between React components. React’s the data flow between components is uni-directional (from parent to child only). React has another special built-in object called state, which allows components to create and manage their data. So unlike props, components cannot pass data with state, but they can create and manage it internally.

JSX

This is simple JSX code in React. But the browser does not understand this JSX because it's not valid JavaScript code. This is because we're assigning an HTML tag to a variable that is not a string but just HTML code.

const jsx = <h1>This is JSX</h1>

Component Lifecycle

Components are created (mounted on the DOM), grow by updating, and then die (unmount on DOM). This is referred to as a component lifecycle. There are different lifecycle methods that React provides at different phases of a component’s life. React automatically calls the responsible method according to the phase in which the component is.

Hooks

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

Custom Hooks

Custom Hook is a JavaScript function which we create by ourselves when we want to share logic between other JavaScript functions. It allows us to reuse some pieces of code in several parts of our app.

Context API

The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to "prop drilling" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.

Virtual DOM

It’s a neat concept: instead of manipulating the DOM directly, which is error-prone and relies on a mutable state, you instead output a value called the Virtual DOM. The Virtual DOM is then diffed from the current state of the DOM, which generates a list of DOM operations that would make the current DOM look like the new one. Those operations are applied quickly in a batch.