REACT

Learn React: Your First React Component Explained

Part 3 of Learn React from Scratch Series

Previously on Learn React from Scratch Series:

Learn React: Advanced JSX and Everything Else You Need To Know

React apps are made out of components. But what is a component?

A component in React is a small and reusable chunk of code that renders some HTML. Here is an example of what a simple React component looks like:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
class AnIttyBittyComponent extends React.Component { 
   render(){ 
      return <h1>Hello! I am a squirrel</h1> 
   } 
} 
ReactDOM.render( 
   <AnIttyBIttyComponent />, 
   document.getElementById('app') 
);

Let’s break the above React component down, line by line.

Understanding React and ReactDOM

The first line — import React from 'react'; - brings in the React module from your React library. It also creates an Object called React which you can tap into…