Skip to content

Setup a React Project

kitiya edited this page Jan 31, 2020 · 34 revisions

Create a React App

$ npx create-react-app react-29

or using dot if inside a project folder

$ npx create-react-app .

File setup

  • Delete all files but index.js in the src folder

Update index.js file

import React from "react";
import ReactDOM from "react-dom";

const App = () => <div>Hello World</div>;

ReactDOM.render(<App />, document.getElementById("root"));

Update index.html file

<header
  <!-- Bootstrap -->
  <link
    rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous"
  />
  <!-- Google fonts -->
  <link
    href="https://fonts.googleapis.com/css?family=Lato:300,400|Montserrat:400,500&display=swap"
    rel="stylesheet"
  />

  <!-- css file -->
  <link rel="stylesheet" type="text/css" href="/css/styles.css" />
</head>

<body>
  <!-- Bootstrap -->
  <script
    src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"
  ></script>
</body>

Installing Dependencies

React Router

$ npm install --save react-router-dom

Installing axios

$ npm install --save axios

To run a client in an alternate port

Update the package.json file

  "scripts": {
    "start": "PORT=3001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

JSON Server

Installing the JSON server

$ npm install -g json-server

To start the JSON server on an alternate port

$ json-server -watch db.json --port 3004

Clone this wiki locally