tutorial-notes

---

title: Notes learning React from tutorial(s)

I would like to modernize the HTML/CSS/Jinja-‘frontend’ of my Flask SOC website. This is a good reason to learn the basics of React, combined with a frontend framework like Bootstrap. This page should hold any and all notes I will make as I follow various tutorials and explainers.

Learn React - A Handbook for Beginners

Link to freeCodeCamp-tutorial

Example main.jsx-file:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
 
ReactDOM.createRoot(document.getElementById('root')).render( {/* The ReactDOM library creates a root at the `div` element that contains the `root` id and then renders the React app to this element */}
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

A component must always return a single element. To return multiple elements, wrap them in a div. To avoid clutter, render an empty tag with <>.

”

function App() {
  return (
    <>
      <h1>Hello World!</h1>
      <h2>Learning to code with React</h2>
    </>
  )
}

export default App

The empty tag above is a React feature called a Fragment. By using a Fragment, your component won’t render an extra element to the screen.

You can also import the Fragment module from React to make it explicit as follows:

import { Fragment } from 'react';

function App() {
  return (
    <Fragment>
      <h1>Hello World!</h1>
      <h2>Learning to code with React</h2>
    </Fragment>
  )
}

export default App

But you don’t need to explicitly state the Fragment tag. ”