Blog

React.js

Getting started with React

Check Node.js version and update it to the latest version:

node -v

If you don’t have Node.js installed on your device, go to node.js website, download and install the latest version. After that recheck the version and go to the next step.

Install first app with vite, choose a name for your project (it will be your app installation folder), select the framework and a variant by moving the arrow keys up/down, and finally hit the enter key.

cd Desktop
npm create [email protected]

✔ Project name: … react-app
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Done. Now run:
  cd react-app
  npm install

Run code below to open the app inside Visual Studio Code:

code .

If this command doesn’t work in your terminal please follow the following solution:

Open the Command Palette via ⌘⇧P and type shell command to find the Shell Command:

Use the Uninstall ‘code’ command in the PATH command before the “Install ‘code’ command in PATH” command.

Source: https://stackoverflow.com/questions/29955500/code-is-not-working-in-on-the-command-line-for-visual-studio-code-on-os-x-ma

Open internal VS Code terminal by these shortkeys: control + ~

Inside the terminal run the app:

npm run dev

You will see something like this:
VITE v4.3.0  ready in 770 ms

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

Open the local address in your browser (the port might be different in your machine, it doesn’t matter. Just open it)

You’ll see a page with these contents:

Building Components

In React, a component cannot return more than one element. Three solutions to solve the issue:

  1. Wrap all the elements in one parent element like <div></div>
function ListGroup() {
  return (
    <div>
      <h1>List</h1>
      <ul className="list-group">
        <li className="list-group-item">An item</li>
        <li className="list-group-item">A second item</li>
        <li className="list-group-item">A third item</li>
        <li className="list-group-item">A fourth item</li>
        <li className="list-group-item">And a fifth one</li>
      </ul>
    </div>
  );
}

export default ListGroup;
  1. Wrap them in a <Fragment></Fragment> elements by importing it. (Recommended in order not to have any additional DOM elements in your final code)
import { Fragment } from "react";

function ListGroup() {
  return (
    <Fragment>
      <h1>List</h1>
      <ul className="list-group">
        <li className="list-group-item">An item</li>
        <li className="list-group-item">A second item</li>
        <li className="list-group-item">A third item</li>
        <li className="list-group-item">A fourth item</li>
        <li className="list-group-item">And a fifth one</li>
      </ul>
    </Fragment>
  );
}

export default ListGroup;
  1. Wrap them in an empty angle bracket set <></> and removing the import line code. This means a Fragment. (Also recommended in order not to have any additional DOM elements in your final code)
function ListGroup() {
  return (
    <>
      <h1>List</h1>
      <ul className="list-group">
        <li className="list-group-item">An item</li>
        <li className="list-group-item">A second item</li>
        <li className="list-group-item">A third item</li>
        <li className="list-group-item">A fourth item</li>
        <li className="list-group-item">And a fifth one</li>
      </ul>
    </>
  );
}

export default ListGroup;

To have a dynamic list instead of a boring static list, we can define a list of items and use mapping to convert them to list items:

const items = ["New York", "San Francisco", "Tokyo", "London", "Tehran"];

function ListGroup() {
  return (
    <>
      <h1>List</h1>
      <ul className="list-group">
        {items.map((item) => (
          <li key={item} className="list-group-item">
            {item}
          </li>
        ))}
      </ul>
    </>
  );
}

export default ListGroup;

We added key={item} to the code to prevent the following warning in the browsers’ console log:

Warning: Each child in a list should have a unique “key” prop.

Shortcodes

  • Cmd+P (Mac) or Ctrl+P (Windows)
    Search for the files in your project
  • Cmd+D (Mac) or Ctrl+D (Windows)
    To select the next occurrence of the selected keyword.
  • Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows)
    To open the command palette.

Useful VSCode Extensions for React.js

Install Bootstrap

				
					npm i bootstrap@latest
  • Clean the app.css file located in src folder
  • Delete index.css file
  • Go to main.csx file and change the line 4:
				
					import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

to this:

				
					import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "bootstrap/dist/css/bootstrap.css";

Done! Bootstrap is now installed on your app.

  • Create a folder in src folder and name it components.
  • Put all your components’ files inside this folder to well organize your app components

Fragment

To use multiple DOM elements in your code you need to use Fragment:

				
					import { Fragment } from "react";

function ListGroup() {
  return (
    <Fragment>
      ... Your code inside Fragment is here.
    </Fragment>
  );
}

export default ListGroup;

or use empty angle brackets (No need to import Fragment in this method):

				
					function ListGroup() {
  return (
    <>
      ... Your code inside Fragment is here.
    </>
  );
}

export default ListGroup;

React Icons

Installation:

				
					npm i react-icons@latest

The website to check and search the list of icons:

https://react-icons.github.io/react-icons

Search the icons and copy the name of the icon you want. Then import it:
(The name of the icon I have selected is BsFillCalendarCheckFill)

				
					import { BsFillCalendarCheckFill } from 'react-icons/bs';

Because the icon name is started with Bs, we add the bs at the end of the address:
‘react-icons/bs‘

				
					import { BsFillCalendarCheckFill } from "react-icons/bs";

function App() {
  return (
    <div>
      <BsFillCalendarCheckFill></BsFillCalendarCheckFill>
    </div>
  );
}

export default App;
Tags: , , ,

Leave a Reply