STEP-2-NEW-REACT-PROJECT.md

Write Your Own Web Store In Hours

Shorter Workshops

💡 Are you taking part in a shorter workshop? The following will speed up the process by completing step 2 for you:

cp -a step2-complete/ webstore
cd webstore
npm i
netlify dev

Taking the shortcut? Go to ▶️ STEP 3: Defining products in Stripe

Not taking the shortcut? Continue below ⬇️

🪄 Create a default React App

👉💻👈 Use npx to deploy a default react app

npx create-react-app webstore

👉💻👈 Start the Netlify Development Server

cd webstore
netlify dev

🎉 You should now see this web application in the preview pane 🎉

Building out a Basic Web App

By the end of this project, we'll have a home page and a success page, but typically you'd have plenty more. Let's configure a proper routing handler to allow for this.

Routing

👉💻👈 Install React Router

npm install react-router-dom

Skeleton Files

⚠️ Note

Make sure you create all these files in the webstore directory, not in the repository root.

Let's create the following files, which will set you up for easily adding more pages in the future:

• a template component
• a Home component
• a Success component
• routing configuration to handle requests for these two pages

👉💻👈 Create /src/components/layout.js

import React from "react";
import { Link } from "react-router-dom";

const Layout = ({ children }) => {
  return (
    <>
      <header>
        <h1>My Web Store</h1>
        <nav>
          <ul>
            <li>
              <Link className="menuitem" to="/">
                Home
              </Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>{children}</main>
    </>
  );
};

export default Layout;

👉💻👈 Create /src/pages/home.js

import React from "react";

const Home = () => {
  return (
    <>
      <h1>Home</h1>
      <p>Welcome to my web store!</p>
    </>
  );
};

export default Home;

👉💻👈 Create /src/pages/success.js

import React from "react";

const Success = () => {
  return (
    <>
      <h1>Thanks for your order!</h1>
      <p>Your order has been received.</p>
    </>
  );
};

export default Success;

👉💻👈 Update /src/App.js

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Layout from "./components/layout";
import Home from "./pages/home";
import Success from "./pages/success";

import "./App.css";

const App = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/success" element={<Success />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
};

export default App;

🧪 Make sure netlify dev is still running and check out your new web site. Manually add /success to the end of the URL to test the second page.

💡 Make this look much prettier by replacing /src/App.css with the contents of /workshop-assets/App.css in this repo.

---

▶️ STEP 3: Defining products in Stripe

⎌ Back to step 1: Setting up your development environment