---
# System prepended metadata

title: React Components

---

https://www.codecademy.com/learn/react-101/modules/learn-react-components-interacting/cheatsheet
# React Components

# render() Method
render method return JSX including HTML elements and custom React components.given example below.
class Header extends React.Component {
  render() {
    return (
      <div>
        <Logo />// custom react component
        <h1>{name}</h1>// jax including html element
      </div>
    );
  }
}

# Importing React

import React from 'react';

to use React, we must first import the React library.it creates an object that contains properties needed to make React work, including JSX and creating custom components.

# React Components

A React component is a reusable piece of code.Using the component as a factory, an infinite number of component  can be created. it is 2 type

function MyFunctionComponent() {
  return <h1>Hello from a function component!</h1>;
}
 
class MyClassComponent extends React.Component {
  render() {
    return <h1>Hello from a class component!</h1>;
  }
}

# JSX Capitalization

React requires that the first letter of components be capitalized. JSX will use this capitalization to tell the difference between an HTML tag and a component. If the first letter of a name is capitalized, then JSX knows it’s a component; if not, then it’s an HTML element.

<ThisComponent />  
 //This is considered a JSX HTML tag. 


# Object Properties As Attribute Values

const seaAnemones = {
  src:
    'https://commons.wikimedia.org/wiki/Category:Images#/media/File:Anemones_0429.jpg',
  alt: 'Sea Anemones',
  width: '300px',
};
 
class SeaAnemones extends React.Component {
  render() {
    return (
      <div>
        <h1>Colorful Sea Anemones</h1>
        <img
          src={seaAnemones.src}
          alt={seaAnemones.alt}
          width={seaAnemones.width}
        />
      </div>
    );
  }
}

# Returning HTML Elements and Components

class component’s render() method can return JSX, HTML elements and custom React components.
In the example, we return a <Logo /> custom component and HTML element.
class Header extends React.Component {
  render() {
    return (
      <div>
        <Logo />
        <h1>Codecademy</h1>
      </div>
    );
  }
}

# props

When one component passes information to another component, it is passed as props through one or more attributes.
<SpaceShip ride="Millennium Falcon" />
SpaceShip is the component and ride is the attribute. The SpaceShip component will receive ride in its props.

# this.props
React class components can access their props with the this.props object.

class Hello extends React.Component{
    constructor(width, height){  
        this.width = width;
        this.height = height;
    }    
}

# this.setState()
React class components can change their state with this.setState().