Scribd
Upload
3 views

React Components Cheatsheet

The document serves as a cheatsheet for React components, detailing essential concepts such as importing the React library, rendering components, and the distinction between function and class components. It emphasizes the importance of capitalization in component names, modular organization through importing and exporting, and handling multi-line JSX expressions. Additionally, it covers incorporating logic before the return statement and using object properties as attribute values in JSX.

Uploaded by

sumitbehera245
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

React Components Cheatsheet

The document serves as a cheatsheet for React components, detailing essential concepts such as importing the React library, rendering components, and the distinction between function and class components. It emphasizes the importance of capitalization in component names, modular organization through importing and exporting, and handling multi-line JSX expressions. Additionally, it covers incorporating logic before the return statement and using object properties as attribute values in JSX.

Uploaded by

sumitbehera245
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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>

);

You might also like