Full-Stack React & Node.js - Create The Client

Create the React web-site

Create a folder somewhere for your project. This will hold the client and server code. I called mine: node-react-stack and will be using that folder name throughout.

Inside the node-react-stack folder, use a shell/CLI to enter this command to create your React app:

npx create-react-app react-client

When that has finished, inside the node-react-stack/react-client folder, run another command to npm install react-router:

npm i -S react-router-dom

Make sure that npm install commands like this are run in the same folder where your package.json file is located.

Next open up the react-client project in an editor.

Inside the src folder create a new file called AddEditNote.js and paste in this code:

import React from 'react';

const AddEditNote = () => {
    return (
        <div>
            Add Edit Note
        </div>
    );
};

export default AddEditNote;

Next edit App.js and change the code to:

import {
    Link,
    HashRouter as Router,
    Routes,
    Route,
} from 'react-router-dom';
import AddEditNote from "./AddEditNote";
import './App.css';

function App() {
    return (
        <div className="App">
            <Router>
                <Routes>
                    <Route exact path="/" element={
                        <ul>
                            <li>
                                <Link to="edit-note">Edit Note</Link>
                            </li>
                        </ul>
                    }/>
                    <Route path="/edit-note" element={<AddEditNote/>}/>
                </Routes>
            </Router>
        </div>
    );
}

export default App;

To test this, inside the node-react-stack/react-client folder, run:

npm run start

Just as with npm install above,

npm run

commands must be executed from the same folder as your package.json file. The reason is that

npm run start

runs the start script defined in your package.json file.

When your React app finishes building, a browser should appear, showing an "Edit Note" link. Clicking that will display the text: "Add Edit Note"

Good job - your client app and routing are working!

Next: Add a form

Code repo: Github Repository