React

React is a user interface library for web and native. It focuses on component-based interface design to bring modularity and resuability to HTML.

Vite

Vite is a dev tool that makes building React apps easier. It uses Rollup/Rolldown under the hood and provides easy-to-use commands to perform complex actions.

React Components

Components are resuable User Interface elements. We use JSX files to store each component. A JSX file should contain a function matching the file name, and an export of the function:

import React from "react"; // not used here, but useful to know the React root import

function MyComponent () {
    return (
        <h1>This is my component!</h1>
    );
}

export default MyComponent;

                

Props

Props or properties are data that are passed down into a component (like a function parameter).

Props values should not be changed by the component receiving them, rather the values should be observed and reacted to.

import React from "react";

function MyComponent ({ myProp }) {
    return (
        <h1>My prop data: {myProp}</h1>
    );
}

export default MyComponent;

                

State

State is data stored inside a component. This data is owned, controlled, and modified by the component.

import { useState } from "react"; // import the state access function 

function MyComponent () {
    const [myVar, setMyVar] = useState("myVar init value");

    return (
        <button onClick="{() => setMyVar('New value')}">Click Me</button>
    );
}

export default MyComponent;