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().