React Basic: Using setup with Vite and understanding the very basics from what's inside there.

Recently, I've been developing with a vague knowledge of React and have not learned it thoroughly. Until a few years ago, when Vue.js version 2 was the latest, I was involved with frontend development using Vue.js/Nuxt.js and my impression about React is that a bunch of things are complicated.

Therefore, I am starting from the beginning basics of React and building solid knowledge, but its boring and hard to keep my motivation, so I decided to write articles about it.

This is my first writing about React, I will create a React app with Vite and write about the introductory concepts of React while looking at the generated code.

Setting up with Vite

Vite seems to have become a standard in recent when starting development with React. In the past, when coding with Vue.js, I perceived from a distance that create-react-app was the standard, but it seems the time has changed. I realized in some articles introducing Vite, Replace Create React App recommendation with Vite is under discussion. Yet, Vite is not listed in the React official documents, and the opinion that List Vite at the same level as SSR frameworks as a way to start a new React project is open. So, I am not sure that Vite is obvious and undoubtedly standard, though Vite has just released version 6 and I feel like wanna to touch a bit of it so I use Vite here.

$ npm create vite@latest

Need to install the following packages:
create-vite@6.0.1
Ok to proceed? (y) y

> npx
> create-vite

√ Project name: ... vite-project
√ Select a framework: » React
√ Select a variant: » TypeScript + SWC

Scaffolding project in vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

By using StackBlitz, you can try it online

https://vite.dev/guide/#trying-vite-online

Entry point to start the React app (createRoout)

The element with id=root in index.html is called the root element in React.

src/main.jsx is as follows.

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>,
)

createRoot takes a domNode as the first argument and creates a React root. This object can call render() and display the React Component in the DOM.

StrictMode was introduced in React 18 as a dedicated check feature during development. This lets you find common bugs in your components early during development. This strict mode enables some development-only behaviors.

<App / is a syntax called JSX, and this is extended syntax for Javascript developed by the Meta corp.

By the way, before React 18, wrote it like below with ReactDOM, but since it is a legacy, there is no reason to use it now on purpose.

import ReactDOM from 'react-dom'

ReactDOM.render(<App />, document.getElementById('root'));

React Component

As I mentioned earlier, <App /> which is passed as an argument of render(), is called a functional component.

The React component is undoubtedly the most important of concepts. This is a normal Javascript function but the name must start with the capital letter. function app() occurs an error.

As the React official document explains Components all the way down, the root components mostly have bunches of React components.

Like this, the React component can contain the React components, which are commonly called the parent component and the child component. Using an example from the official documentation about React components, Profile() is the child component, and the parent component of Gallery() uses it multiple times.

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

By the way, there was a class component as a legacy. Nowadays, there is no need to know how to use it anymore. If you unluckily find a syntax like class App extends Component, you should rewrite it to a functional component like function App().

Return of a React functional component

When returning a single element, you can write it as follows. Precisery saying, this rule is because of JSX syntax.

export function SingleLineReturn() {
    return <h1>Single line</h1>
}

But if this markup does not fit in one line, it needs to be enclosed in parentheses ().

function PluralLineReturn() {
  return (
    <div>
      <h1>PluralLineReturn line</h1>
      <h1>PluralLineReturn line</h1>
    </div>
  );
}

Also, as you have enclosed it with a div tag, you cannot return multiple elements, so you need to wrap them in another container. But if a container like <div> is not necessary in the markup, you can use <Fragment> to write it without affecting the actual DOM output. <></>. is shorthand for this.

function PluralLineReturn() {
  return (
    <>
      <h1>PluralLineReturn line</h1>
      <h1>PluralLineReturn line</h1>
    </>
  );
}

If you want to render multiple elements within a loop, it is useful to use it as follows:

function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

This concludes the introductory knowledge about React.