Skip to content

Setup a React Project

Jump to bottom
kitiya edited this page Feb 9, 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
  <!-- CSS Bootstrap -->
  
  <!-- 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>
  <!-- JS Bootstrap -->
  
</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=3003 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

HOME

Resources

React

Setup a React Project
React Basics
React Router
React Transition
Redux
JSX syntax

Junior Web Dev

Web Dev
    Tutorial
CSS
    Tutorial
    SASS
JavaScript
    Node JS
Database
Git
Hotkeys
NPM & Terminal

Senior Web Dev

SSH
Performance
Testing
TypeScript
SPA
Security
Docker
Redis
Sessions + JWT
AWS
CI/CD

DSA

Clone this wiki locally