Understanding Components in React

Wednesday, 11/01/2023

Tram Ho

Prologue

This article does not have a specific goal, it is not an A to Z guide for beginners
It is more like an article that lists documents related to Components, and hopefully somewhere in the article you will find a part you do not know.
If you have a part you don’t understand, don’t hesitate to leave a comment for me!

1. Components

1 Component will be written mainly in [src/features/] and [src/shared/]. Basically a Component will return a piece of html.
folder [src/features/] to save the Components of each feature, like Login, List, Detail… [src/shared/] saves the most used Components like Header, Footer, Input…
Component can be a function or a variable that stores a callBack funcion.
1 Component name MUST start with a capital letter
In Typescript I use code like this:

<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">WelcomeProps</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> string <span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> Welcome <span class="token operator">:</span> React <span class="token punctuation">.</span> <span class="token constant">FC</span> <span class="token operator">=</span> <span class="token punctuation">(</span> props <span class="token operator">:</span> WelcomeProps <span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator">&lt;</span> h1 <span class="token operator">&gt;</span> Hello <span class="token punctuation">,</span> <span class="token punctuation">{</span> props <span class="token punctuation">.</span> name <span class="token punctuation">}</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> h1 <span class="token operator">&gt;</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import React from 'react' ;

export interface WelcomeProps { name : string ; }

export const Welcome : React . FC = ( props : WelcomeProps ) = > {

return ( < h1 > Hello , { props . name } < / h1 > ) ;

}

or shortened callBack function:

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">Welcome</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">props <span class="token operator">:</span> WelcomeProps</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span> <span class="token operator">&lt;</span> h1 <span class="token operator">&gt;</span> Hello <span class="token punctuation">,</span> <span class="token punctuation">{</span> props <span class="token punctuation">.</span> name <span class="token punctuation">}</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> h1 <span class="token operator">&gt;</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">Welcome</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">props <span class="token operator">:</span> WelcomeProps</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">&lt;</span> h1 <span class="token operator">&gt;</span> Hello <span class="token punctuation">,</span> <span class="token punctuation">{</span> props <span class="token punctuation">.</span> name <span class="token punctuation">}</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> h1 <span class="token operator">&gt;</span> <span class="token punctuation">;</span>

export const Welcome = ( props : WelcomeProps ) => ( < h1 > Hello , { props . name } < / h1 > ) ;

export const Welcome = ( props : WelcomeProps ) => < h1 > Hello , { props . name } < / h1 > ;

Component only allows to return 1 tag, if you want to return more than 1 tag, you need to wrap it with another tag, if it can’t be wrapped, you can use a pair of <></> tags. This pair of tags will disappear when the html code is generated

2. TypeScript + React: Component patterns

This list is a collection of Component templates for React when working with TypeScript.

Basic function components

write Component like a normal function

<span class="token keyword">function</span> <span class="token function">Title</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">&lt;</span> h1 <span class="token operator">&gt;</span> Welcome to <span class="token keyword">this</span> application <span class="token operator">&lt;</span> <span class="token operator">/</span> h1 <span class="token operator">&gt;</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

function Title ( ) {

return < h1 > Welcome to this application < / h1 > ;

}

Props

named after component + props-suffix. No need to use React.FC

type GreetingProps <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> string <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">Greeting</span> <span class="token punctuation">(</span> <span class="token parameter">props <span class="token operator">:</span> GreetingProps</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">&lt;</span> p <span class="token operator">&gt;</span> Hi <span class="token punctuation">{</span> props <span class="token punctuation">.</span> name <span class="token punctuation">}</span> 👋 <span class="token operator">&lt;</span> <span class="token operator">/</span> p <span class="token operator">&gt;</span>
<span class="token punctuation">}</span>

type GreetingProps = { name : string ; } ;

function Greeting ( props : GreetingProps ) {

return < p > Hi { props . name } 👋 < / p >

}

Destructuring

same as above but easier to read

<span class="token keyword">function</span> <span class="token function">Greeting</span> <span class="token punctuation">(</span> <span class="token parameter"><span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token operator">:</span> GreetingProps</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">&lt;</span> p <span class="token operator">&gt;</span> Hi <span class="token punctuation">{</span> name <span class="token punctuation">}</span> 👋 <span class="token operator">&lt;</span> <span class="token operator">/</span> p <span class="token operator">&gt;</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

function Greeting ( { name } : GreetingProps ) {

return < p > Hi { name } 👋 < / p > ;

}

Default props

This method allows to set default value for the passed parameter if the Parent Component does not pass the parameter down to Children

type LoginMsgProps <span class="token operator">=</span> <span class="token punctuation">{</span> ame <span class="token operator">?</span> <span class="token operator">:</span> string <span class="token punctuation">}</span> <span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">LoginMsg</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> name <span class="token operator">=</span> <span class="token string">"Guest"</span> <span class="token punctuation">}</span> <span class="token operator">:</span> LoginMsgProps <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">&lt;</span> p <span class="token operator">&gt;</span> Logged <span class="token keyword">in</span> <span class="token keyword">as</span> <span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> p <span class="token operator">&gt;</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

type LoginMsgProps = { ame ? : string } ;

function LoginMsg ( { name = "Guest" } : LoginMsgProps ) {

return < p > Logged in as { name } < / p > ;

}

Children

instead of using FC or FunctionComponent, we will set [children] type React.ReactNode
since it accepts most (JSX elements, strings, etc.)

type CardProps <span class="token operator">=</span> <span class="token punctuation">{</span>
    title <span class="token operator">:</span> string <span class="token punctuation">;</span>
    children <span class="token operator">:</span> React <span class="token punctuation">.</span> ReactNode <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">Card</span> <span class="token punctuation">(</span> <span class="token parameter"><span class="token punctuation">{</span> title <span class="token punctuation">,</span> children <span class="token punctuation">}</span> <span class="token operator">:</span> CardProps</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
        <span class="token operator">&lt;</span> section className <span class="token operator">=</span> <span class="token string">"cards"</span> <span class="token operator">&gt;</span>
         <span class="token operator">&lt;</span> h2 <span class="token operator">&gt;</span> <span class="token punctuation">{</span> title <span class="token punctuation">}</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> h2 <span class="token operator">&gt;</span>
            <span class="token punctuation">{</span> children <span class="token punctuation">}</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> section <span class="token operator">&gt;</span>
    <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

type CardProps = {

title : string ;

children : React . ReactNode ;

} ;

export function Card ( { title , children } : CardProps ) {

return (

< section className = "cards" >

< h2 > { title } < / h2 >

{ children }

< / section >

) ;

}

how to use Children in Parent Component:

<span class="token operator">&lt;</span> Card title <span class="token operator">=</span> <span class="token string">"Title"</span> <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> p <span class="token operator">&gt;</span> This is children <span class="token operator">&lt;</span> <span class="token operator">/</span> p <span class="token operator">&gt;</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> Card <span class="token operator">&gt;</span>

< Card title = "Title" >

< p > This is children < / p >

< / Card >

Children are not allowed

instead of using FC or FunctionComponent, we will set [children] type React.ReactNode
since it accepts most (JSX elements, strings, etc.)

<span class="token comment">// This throws errors when we pass children</span>
type SaveButtonProps <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">//... whatever</span>
    children <span class="token operator">:</span> never
<span class="token punctuation">}</span>

// This throws errors when we pass children

type SaveButtonProps = {

//... whatever

children : never

}

WithChildren helper type

instead of using FC or FunctionComponent, we will set [children] type React.ReactNode
since it accepts most (JSX elements, strings, etc.)

type WithChildren <span class="token operator">&lt;</span> <span class="token constant">T</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token operator">&amp;</span> <span class="token punctuation">{</span> children <span class="token operator">?</span> <span class="token operator">:</span> React <span class="token punctuation">.</span> ReactNode <span class="token punctuation">}</span> <span class="token punctuation">;</span>
type CardProps <span class="token operator">=</span> WithChildren <span class="token operator">&lt;</span> <span class="token punctuation">{</span> title <span class="token operator">:</span> string <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator">&gt;</span> <span class="token punctuation">;</span>

type WithChildren < T = { } > = T & { children ? : React . ReactNode } ;

type CardProps = WithChildren < { title : string ; } > ;

This is very similar to FC, but with the default generic parameter {} it can be much more flexible:

<span class="token comment">// works as well</span>
type CardProps <span class="token operator">=</span> <span class="token punctuation">{</span> title <span class="token operator">:</span> string <span class="token punctuation">}</span> <span class="token operator">&amp;</span> WithChildren <span class="token punctuation">;</span>

// works as well

type CardProps = { title : string } & WithChildren ;

If you are using Preact, you can use h.JSX.Element or VNode as a type instead of React.ReactNode.
Personally, I think this part the author is drawing snakes with legs.

3. how a Component is displayed

By default the file is always displayed as index.html, any changes in this file will affect the whole Project. But this is not the place to edit global in React, ngta will try to keep this file from editing

<span class="token operator">&lt;</span> body <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> noscript <span class="token operator">&gt;</span> You need to enable JavaScript to run <span class="token keyword">this</span> app <span class="token punctuation">.</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> noscript <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> div id <span class="token operator">=</span> <span class="token string">"root"</span> <span class="token operator">&gt;</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> body <span class="token operator">&gt;</span>

< body >

< noscript > You need to enable JavaScript to run this app . < / noscript >

< div id = "root" > < / div >

< / body >

Inside this file there will be 1 tag: <div id="root"></div> . this is where React changes the displayed html content

index.tsx file change this tag with Components via code

<span class="token keyword">const</span> container <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'root'</span> <span class="token punctuation">)</span> <span class="token operator">!</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> root <span class="token operator">=</span> <span class="token function">createRoot</span> <span class="token punctuation">(</span> container <span class="token punctuation">)</span> <span class="token punctuation">;</span>
root <span class="token punctuation">.</span> <span class="token function">render</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span> App <span class="token operator">/</span> <span class="token operator">&gt;</span>
<span class="token punctuation">)</span> <span class="token punctuation">;</span>

const container = document . getElementById ( 'root' ) ! ;

const root = createRoot ( container ) ;

root . render (

< App / >

) ;

in this file there is [import ‘./index.css’;], this is where some global css is applied

The basic App.tsx file is used to categorize each page corresponding to the Url, through the Router

<span class="token keyword">const</span> App <span class="token operator">:</span> React <span class="token punctuation">.</span> <span class="token function-variable function">FC</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
        <span class="token operator">&lt;</span> div className <span class="token operator">=</span> <span class="token string">"App"</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> Router <span class="token operator">/</span> <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
    <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

const App : React . FC = ( ) => {

return (

< div className = "App" >

< Router / >

< / div >

) ;

}

Router.tsx file is usually applied with Extenstion react-router, or manual paging

    <span class="token keyword">const</span> Router <span class="token operator">:</span> React <span class="token punctuation">.</span> <span class="token function-variable function">FC</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
            <span class="token operator">&lt;</span> BrowserRouter <span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span> HeaderComponent <span class="token operator">/</span> <span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span> Routes <span class="token operator">&gt;</span>
                    <span class="token operator">&lt;</span> Route path <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token constant">URL_PATH</span> <span class="token punctuation">.</span> <span class="token constant">LIST</span> <span class="token punctuation">}</span> element <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">&lt;</span> ListComponent <span class="token operator">/</span> <span class="token operator">&gt;</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
                    <span class="token operator">&lt;</span> Route path <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token constant">URL_PATH</span> <span class="token punctuation">.</span> <span class="token constant">DATA1</span> <span class="token punctuation">}</span> element <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">&lt;</span> Data1Component <span class="token operator">/</span> <span class="token operator">&gt;</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
                    <span class="token operator">&lt;</span> Route path <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token constant">URL_PATH</span> <span class="token punctuation">.</span> <span class="token constant">DATA2</span> <span class="token punctuation">}</span> element <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">&lt;</span> Data2Component <span class="token operator">/</span> <span class="token operator">&gt;</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
                    <span class="token operator">&lt;</span> Route path <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token constant">URL_PATH</span> <span class="token punctuation">.</span> <span class="token constant">CONFIRM</span> <span class="token punctuation">}</span> element <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">&lt;</span> ConfirmComponent <span class="token operator">/</span> <span class="token operator">&gt;</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
                    <span class="token operator">&lt;</span> Route path <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token constant">URL_PATH</span> <span class="token punctuation">.</span> <span class="token constant">DETAIL</span> <span class="token punctuation">}</span> element <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">&lt;</span> DetailComponent <span class="token operator">/</span> <span class="token operator">&gt;</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
                    <span class="token operator">&lt;</span> Route path <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token constant">URL_PATH</span> <span class="token punctuation">.</span> <span class="token constant">INDEX</span> <span class="token punctuation">}</span> element <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">&lt;</span> LoginComponent <span class="token operator">/</span> <span class="token operator">&gt;</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
                    <span class="token operator">&lt;</span> Route path <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token constant">URL_PATH</span> <span class="token punctuation">.</span> <span class="token constant">LOGIN</span> <span class="token punctuation">}</span> element <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">&lt;</span> LoginComponent <span class="token operator">/</span> <span class="token operator">&gt;</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
                    <span class="token operator">&lt;</span> Route path <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token constant">URL_PATH</span> <span class="token punctuation">.</span> <span class="token constant">NOT_FOUND</span> <span class="token punctuation">}</span> element <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">&lt;</span> InvalidComponent <span class="token operator">/</span> <span class="token operator">&gt;</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span> <span class="token operator">/</span> Routes <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> <span class="token operator">/</span> BrowserRouter <span class="token operator">&gt;</span>
        <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

const Router : React . FC = ( ) => {

return (

< BrowserRouter >

< HeaderComponent / >

< Routes >

< Route path = { URL_PATH . LIST } element = { < ListComponent / > } / >

< Route path = { URL_PATH . DATA1 } element = { < Data1Component / > } / >

< Route path = { URL_PATH . DATA2 } element = { < Data2Component / > } / >

< Route path = { URL_PATH . CONFIRM } element = { < ConfirmComponent / > } / >

< Route path = { URL_PATH . DETAIL } element = { < DetailComponent / > } / >

< Route path = { URL_PATH . INDEX } element = { < LoginComponent / > } / >

< Route path = { URL_PATH . LOGIN } element = { < LoginComponent / > } / >

< Route path = { URL_PATH . NOT_FOUND } element = { < InvalidComponent / > } / >

< / Routes >

< / BrowserRouter >

) ;

}

However, each Component is not a Page, the Component can be as small as a Button, an Area or as large as the App.tsx file, which is also a Component.

Share the news now

Source : Viblo

Understanding Components in React

Prologue

1. Components

2. TypeScript + React: Component patterns

Basic function components

Props

Destructuring

Default props

Children

Children are not allowed

WithChildren helper type

3. how a Component is displayed

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers