React Fundamental

Preparation

bunjs (https://bun.sh/) to install and develop React app. There are two ways. First run bun create react-app [PROJET_NAME] or using vite like bun create vite@latest.
VSCode plugin
- ES7+ snippets (https://open-vsx.org/extension/dsznajder/es7-react-js-snippets)
- Prettier (https://open-vsx.org/extension/esbenp/prettier-vscode)
json .vscode/settings.json configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Generate React Project

create project using bun create vite@latest and use this following options
- project name: as you wish
- select a framework: react
- select a variant: JavaScript
- Use Vite 8 Beta: No
open the project, navigate to file /src/main.jsx you will get as following

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


    import { StrictMode } from 'react'
    import { createRoot } from 'react-dom/client'
    import './index.css'
    import App from './App.jsx'

    createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
    )

if we use bun create react-app, the entry point file is /src/index.js and the content is more less like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
    );

    reportWebVitals();

A React project with Vite is the closest match to the official documentation (https://react.dev/reference/react/StrictMode#strictmode). Therefore, we will use Vite for our next React project.

navigate to project folder then run bun i then bun dev. You’ll see the terminal will show like this

1
2
3
4
5
6
7
8


> reactdel % bun dev
$ vite

  VITE v7.3.1  ready in 505 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

click the link or open the browser and navigate to the address

Build Components

delete all files in the /src files. Then create a file main.jsx with just minimum lines of code to make app run as follow:

1
2
3
4
5
6
7


import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')).render(
  <>
    <h1> Halo Js</h1>
  </>,
)

run the app bun dev and you’ll see the “Halo Js” words in the browser.

now we will add StrictMode, so the code will become like this

1
2
3
4
5
6
7
8


import {createRoot} from "react-dom/client"
import { StrictMode } from "react"

createRoot(document.getElementById("root")).render(
    <StrictMode>
        <h1>Halo dunia</h1>
    </StrictMode>
)

The createRoot is a function so it use camelCase. Other usages for camelCase are useState, useEffect, handleClick, etc. It is also use for variable and props naming. The StrictMode uses PascalCase since it is component in React, like others such as <App />, <MyButton>, <UserProfileCard>, etc.

App Components

we use App.jsx file in the /src to store any components and pass it to the entry file.

create an App.jsx file with following content

1
2
3
4
5
6
7
8
9


import React from 'react'

const App = () => {
  return (
    <div>this is an App</div>
  )
}

export default App

we also can type rafce -> tab to create the arrow function snippet.

import App in the main.jsx file

1
2
3
4
5
6
7
8
9


import {createRoot} from "react-dom/client"
import { StrictMode } from "react"
import App from "./App"

createRoot(document.getElementById("root")).render(
    <StrictMode>
        <App />
    </StrictMode>
)

MyButton Component

let’s create our first component MyButton by creating a file /src/components/MyButton.jsx and put following content

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


import React from "react";

const MyButton = ({ children }) => {
  return (
    <button
      style={{
        backgroundColor: "blue",
        color: "white",
        padding: "10px 20px",
        border: "none",
        borderRadius: "5px",
        cursor: "pointer",
      }}
    >
      {children}
    </button>
  );
};

export default MyButton;

Then update the App file like

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import React from 'react'
import MyButton from './components/MyButton'

const App = () => {
  return (
    <><div>this is an App</div><br />
    <MyButton>Like</MyButton>
    </>
  )
}

export default App

Open the browser and see the result.

Note: The children is used to pass the inner HTML inside the MyButton component in the App.jsx. We see the there is Like inside the <MyButton></MyButton> element and it is passed to the component as children. The children is special properties “props” in React. We can add other props like in the next step.

Modify the MyButton file as follow

1
2
3
4
5
6
7
8


...
const MyButton = ({ color, bgColor, children }) => {
  return (
    <button
      style={{
        backgroundColor: bgColor,
        color: color,
        ...

Update the MyButton element as

1
2
3
4
5


...
      <MyButton color={"white"} bgColor={"red"}>
        Like
      </MyButton>
...