Yellow image that says ReactJS
Yellow image that says ReactJS

ReactJS information for beginners

Apr 28, 2026

Hi, Welcome to my blog!👋

My name is Daniel, and this is my journey to blogging about Web Development, Hardware, and tech related things. Ultimately, this will be a place to help me remember things, in the form of documentations and ramblings.

(React is a front-end JavaScript library created by Facebook that is very popular to this day in the year of our lord 2026.)

Things to know:

  • React works better with declarative functions(ex: map functions)

  • Propeties = props => makes components more reusable ♻️

  • 👶Siblings cannot pass props, they must get from the parent 🧑‍🍼

  • keep state as local as you can

    • if only one child needs props, keep it locally there

  • React uses JSX,{} converts to JS-Land

    • JSX(JavaScript XML) returns JS object
    • JSX introduces unique HTML syntax(ex: class = className, for = htmlFor, tabindex = tabIndex, stroke-width = strokeWidth, onclick = onClick, onchange = onChange, readonly = readOnly)
    • JSX requires all tags to be explicitly closed, such as self-closing tags like images or line breaks must end with a slash(ex:
      )

  • Parenthesis() after return help you indent JSX item

  • No longer required after React 17 to import React from the react module in every file that uses JSX

  • Components and their files should use PascalCase(ex:UserProfile.js)

Simple react Hello World example:

ex: index.jsx

This is where we write up our markup(HTML) language in our JS file. React does the magic 🪄 of adding that to the root div in HTML file.

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

const root = createRoot(document.getElementById("root"));
root.render(<h1>Hello Yall!</h1>);

index.jsx renders to root div in index.html

index.html

<html>
   <head>
       <link rel="stylesheet" href="/index.css">
   </head>
   <body>
       <div id="root></div>
       <script src="/index.jsx" type="module"></script>
   </body>
</html>

Simple react Component example:

ex: index.jsx

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

const root = createRoot(document.getElementById("root"));

function MainContent() {
  return <h1>This is the best website in the world!</h1>
}

root.render(
  <MainContent />
);

index.jsx renders to root div in index.html as in previous example index.html

Imperative coding ex:

Manually telling what to do in your code

const h1 = document.createElement("h1");
const textNode = document.createTextNode("Coolio");
h1.appendChild(textNode);
h1.classList.add("header");
/*
or
h1.textContent = "This is imperative coding"
h1.className = "header"
*/
document.getElementById("root").appendChild(h1)

If using Vite, and your js file is using jsx, it need to be renamed to .jsx file so it functions correctly

index.html file will also need to be updated, ex:

...
<body>
<div id="root"></div>
<script src="/index.jsx" type="module"></script>
</body>
...

Fragment brackets

Wrapping your react components with a div will create unnecessary divs when rendered. To avoid this, you can use Fragments(<></>) to wrap your components instead. These will be removed when rendered.(caution: sideffects with; flexbox, grid containers, and child elements)

function Page() {
    return (
        <>
            <Header />
            <MainContent />
            <Footer />
        </>
    )
}
root.render(
    <Page />
)

Creating and exporting components

You could do this on the same App.jsx page, but that would defeat the purpose of making reusable components and oraganizing your app. Here's an example modifying vite react:

📂 react app

-📂 src

-📁 assets

-App.jsx

-Header.jsx <-- new file/component created

-Main.jsx

Header.jsx

import reactLogo from './assets/react.svg'

function Header() {
 return(
   <header>
     <img src={reactLogo} alt="react logo" />
     <nav>
        <ul className= "nav-list">
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
   </header>
 )
}

export default Header 
``

App.jsx

import './App.css'
import Header from '/src/Header'

function App() {
  return (
    <main>
      <Header />
      <Section />
    </main>
  )
}

export default App

Common practice is you put your components in a components folder and export them to Apps file and export Apps file to Main or Index.jsx file.

📁 Components(Header.jsx, Section.jsx, etc) ➡️ App.jsx ➡️ main.jsx or index.jsx

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
const root = createRoot(document.getElementById('root'))

root.render(
    <App />
)
react