Simply Learn Full-Stack Web, Part 1

Simply Learn Full-Stack React & Node.js

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:

1import React from 'react';
2
3const AddEditNote = () => {
4    return (
5        <div>
6            Add Edit Note
7        </div>
8    );
9};
10
11export default AddEditNote;

Next edit App.js and change the code to:

1import {
2    Link,
3    HashRouter as Router,
4    Routes,
5    Route,
6} from 'react-router-dom';
7import AddEditNote from "./AddEditNote";
8import './App.css';
9
10function App() {
11    return (
12        <div className="App">
13            <Router>
14                <Routes>
15                    <Route exact path="/" element={
16                        <ul>
17                            <li>
18                                <Link to="edit-note">Edit Note</Link>
19                            </li>
20                        </ul>
21                    }/>
22                    <Route path="/edit-note" element={<AddEditNote/>}/>
23                </Routes>
24            </Router>
25        </div>
26    );
27}
28
29export 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