React DOM is browsers’ programming interface for HTML (and XML) documents that treats them as tree structures. The DOM API can be used to change a document structure, style, and content.

React Components are like functions that return HTML elements. Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function. Components come in two types, Class components and Function components.

Props are arguments passed into React components. Props are passed to components via HTML attributes. React Props are like function arguments in JavaScript and attributes in HTML. Props are also how we pass data from one component to another, as parameters. React components has a built-in State object. The state object is where we store property values that belongs to the component. When the state object changes, the component re-renders.

Each component in React has a lifecycle which we can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting. Just like HTML, React can perform actions based on user events. React has the same events as HTML: click, change, mouseover etc.

How Virtual-DOM Works in React

Understand how DOM is build

ReactDOM is a package that provides DOM specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing following methods and a few more.

  • render()
  • findDOMNode()
  • unmountComponentAtNode()
  • hydrate()
  • createPortal()

Lifecycle of Components

  • Initialization: This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.
  • Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.
  • Updating: Updating is the stage when the state of a component is updated and the application is repainted.
  • Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.

Explaining React Life Cycle:

React Components

  1. Functional Components
  2. Class Components

React JSX

ReactJS Define PropTypes

  1. We can easily open up a component and check which props are required and what type they should be.
  2. When things get messed up React will give you an awesome error message in the console, saying which props is wrong/missing plus the render method that caused the problem.

React Optimizing Performance

  1. Use the production build
  2. Create React app
  3. Single file builds
  4. Brunch
  5. Browserify
  6. Roll up
  7. Web pack
  8. Profiling Components with the Chrome Performance Tab

10. Profiling Components with the DevTools Profiler

Frond-End developer comfortable with react, node and mongoDB