React Components Cheatsheet
Importing the React Library:
To employ React, you must import the React library. This library equips
you with the essential tools for creating and working with React
components, including JSX. Here's an
example:
import React from 'react';
Rendering a Component:
To render a React component, you establish a root container, typically
an HTML element, and utilize the ReactDOM library to render the
component within that container.
Example:
// Component to be rendered
function MyComponent() {
return <h1>Hello, World!</h1>;
// Rendering the component
ReactDOM.createRoot(
document.getElementById('app')
).render(<MyComponent />);
Usage of the Return Statement in React Components:
In React, function components are required to include a return
statement that yields JSX elements. This is how you specify the
composition and content of your component.
Example:
function MyComponent() {
return <h1>Hello from MyComponent!</h1>;
Distinguishing Function Components from Class
Components:
React components can be categorized as either function components
or class components. Function components are simpler and utilize
standard JavaScript functions to yield JSX elements. In contrast, class
components extend the React.Component class and implement a
render method to produce JSX.
For instance:
// Function Component
function MyFunctionComponent() {
return <h1>Hello from a function component!</h1>;
// Class Component
class MyClassComponent extends React.Component {
render() {
return <h1>Hello from a class component!</h1>;
Capitalization in JSX Component Names:
In React, it is imperative that component names commence with a
capital letter. This convention aids JSX in distinguishing between
custom components and regular HTML elements.
For illustration:
// Component names must initiate with a capital letter
<ThisComponent /> // Recognized as a React component.
// Regular HTML elements
<div>...</div> // Considered a JSX HTML tag.
Importing and Exporting Components in React:
React components can be structured modularly and made reusable by
organizing them into separate files. You can export components from
one file and import them into another for utilization.
Here's an example:
// Greeting.js
function Greeting() {
return (
<>
<h1>Hello, welcome to...</h1>
<h2>Learn React!</h2>
</>
);
export default Greeting;
// App.js
import Greeting from './Greeting';
Handling Multi-line JSX Expressions:
When constructing multi-line JSX expressions, it is customary to enclose
the JSX in parentheses for improved readability.
For instance:
return (
<blockquote>
<p>Be the change you wish to see in the world.</p>
<cite>
<a
target="_blank"
href="https://en.wikipedia.org/wiki/Mahatma_Gandhi"
>
Mahatma Gandhi
</a>
</cite>
</blockquote>
);
Incorporating Logic Before the Return Statement:
React components can encompass JavaScript logic preceding the
return statement. This logic can perform computations, fetch data, or
carry out any other necessary tasks prior to rendering JSX.
Example:
function Integer() {
const value = 3.14;
const asInteger = Math.round(value);
return <p>{asInteger}</p>;
Using Object Properties as Attribute Values in JSX:
In React, you can assign JSX attribute values using data stored in
regular JavaScript objects. This approach enhances the readability of
your JSX by employing variables to define attribute values.
Here's an example:
const seaAnemones = {
src:
'https://commons.wikimedia.org/wiki/Category:Images#/media/
File:Anemones_0429.jpg',
alt: 'Sea Anemones',
width: '300px',
};
function SeaAnemones() {
return (
<div>
<h1>Colorful Sea Anemones</h1>
<img
src={seaAnemones.src}
alt={seaAnemones.alt}
width={seaAnemones.width}
/>
</div>
);
