Start your first react app - 1.

1. Creating the Project

npx create-react-app sportsstore

 

2. Installing Additional NPM Packages

npm install bootstrap@4.1.2
npm install @fortawesome/fontawesome-free@5.6.1
npm install redux@4.0.1
npm install react-redux@6.0.0
npm install react-router-dom@4.3.1
npm install axios@0.18.0
npm install graphql@14.0.2
npm install apollo-boost@0.1.22
npm install react-apollo@2.3.2

 

3. Adding Dev Packages

npm install --save-dev json-server@0.14.2
npm install --save-dev jsonwebtoken@8.1.1
npm install --save-dev express@4.16.4
npm install --save-dev express-graphql@0.7.1
npm install --save-dev cors@2.8.5
npm install --save-dev faker@4.1.0
npm install --save-dev chokidar@2.0.4
npm install --save-dev npm-run-all@4.1.3
npm install --save-dev connect-history-api-fallback@1.5.0

 

4. Adding the CSS Stylesheets to the Project

4-1) Adding CSS Stylesheets in the index.js File in the src Folder

...
import "bootstrap/dist/css/bootstrap.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
...

 

5. Preparing the Web Service

data.js

module.exports = function () {
    return { 
        categories: ["Watersports", "Soccer", "Chess"],
        products: [
            { id: 1, name: "Kayak", category: "Watersports", 
                description: "A boat for one person", price: 275 },
            { id: 2, name: "Lifejacket", category: "Watersports", 
                description: "Protective and fashionable", price: 48.95 },
            { id: 3, name: "Soccer Ball", category: "Soccer", 
                description: "FIFA-approved size and weight", price: 19.50 },
            { id: 4, name: "Corner Flags", category: "Soccer", 
                description: "Give your playing field a professional touch", 
                price: 34.95 },
            { id: 5, name: "Stadium", category: "Soccer", 
                description: "Flat-packed 35,000-seat stadium", price: 79500 },
            { id: 6, name: "Thinking Cap", category: "Chess", 
                description: "Improve brain efficiency by 75%", price: 16 },
            { id: 7, name: "Unsteady Chair", category: "Chess", 
                description: "Secretly give your opponent a disadvantage", 
                price: 29.95 },
            { id: 8, name: "Human Chess Board", category: "Chess", 
                description: "A fun game for the family", price: 75 },
            { id: 9, name: "Bling Bling King", category: "Chess", 
                description: "Gold-plated, diamond-studded King", price: 1200 }
        ],
        orders: []
    }
}

server.js

This is the code that creates the web service that will provide the application with data

const express = require("express");
const jsonServer = require("json-server");
const chokidar = require("chokidar");
const cors = require("cors");

const fileName = process.argv[2] || "./data.js"
const port = process.argv[3] || 3500;

let router = undefined;

const app = express();

const createServer = () => {
    delete require.cache[require.resolve(fileName)];
    setTimeout(() => {
        router = jsonServer.router(fileName.endsWith(".js") 
            ? require(fileName)() : fileName);
    }, 100)
}

createServer();

app.use(cors());
app.use(jsonServer.bodyParser)
app.use("/api", (req, resp, next) => router(req, resp, next));

chokidar.watch(fileName).on("change", () => {
    console.log("Reloading web service data...");
    createServer();
    console.log("Reloading web service data complete.");
});

app.listen(port, () => console.log(`Web service running on port ${port}`));

 

6. Ensure that the web service is started alongside the React development tools

Enabling the Web Service in the package.json

"scripts": {
    "start": "npm-run-all --parallel reactstart webservice", 
    "reactstart": "react-scripts start",
    "webservice": "node server.js",
    ...
  },

 

7. Starting the Application

npm start

access url:
http://localhost:3500/api/products/1

image.png

 

8. Creating the Data Store

8-1) Add placeholderData.js File in the src/data Folder

placeholderData.js

export const data = {
    categories: ["Watersports", "Soccer", "Chess", "Running"],
    products: [
        { id: 1, name: "P1", category: "Watersports", 
            description: "P1 (Watersports)", price: 3 },
        { id: 2, name: "P2", category: "Watersports", 
           description: "P2 (Watersports)", price: 4 },               
        { id: 3, name: "P3", category: "Running", 
           description: "P3 (Running)", price: 5 },        
        { id: 4, name: "P4", category: "Chess", 
           description: "P4 (Chess)", price: 6 },                
        { id: 5, name: "P5", category: "Chess", 
           description: "P6 (Chess)", price: 7 },                        
    ]
}

8-2) Creating the Data Store Actions and Action Creators

• Actions

Actions are objects that are sent to the data store to make changes to the data it contains.