Setup React

We'll start this project by setting up a new React app. We'll use Vite to create our app (You can use any other method you'd like) and clean up some of the boilerplate code first.

Installation

npm create vite

When you run this command, you will be prompted to create a project name, and set some basic config settings for your new application.

✔ Project name: … myapp
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
❯   JavaScript
    JavaScript + SWC

We will need to select React for our framework, then you'll need to select whether you want to use Javascript or Typescript. Note that I will be using Javascript for this demo.

Code cleanup

We'll want to start with a clean slate, so let's make the following adjustments.

App.css - Delete this file
index.css Remove all contents and leave empty for now
App.jsx - Remove all imports and clear out page contents. We should be left with an empty component that returns nothing but an empty div

Notes Page

Although our application will only have a single page, we will still create a separate page for our notes. Pages will be stored in their own folder.

Create a new file for our notes page: src/pages/NotesPage

NotesPage.jsx

const NotesPage = () => {
    return <div>NotesPage</div>;
};

Your App.jsx file should look like this

App.jsx

import NotesPage from "./pages/NotesPage";
 
function App() {
    return (
        <div id="app">
            <NotesPage />
        </div>
    );
}

Introduction 1.2 Basic Styling