Category: React

To proxy to backend with default Next.js dev server, we configure our Next.js config with the URL rewrite.

For instance, in next.config.js, we write

module.exports = {
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: "http://localhost:8000/:path*",
      },
    ];
  },
};

to return an array with an object with the source path and the destination path which we redirect the source path to.

This lets us create a proxy to the back end for our Next.js app

To retrieve a list of all market pairs like ETH/BTC using Binance API with React, we create our own array with the currency lists.

For instance, we write

[
  "BTC",
  "LTC",
  "ETH",
  "NEO",
  "BNB",
  "QTUM",
  "EOS",
  "SNT",
  "BNT",
  "GAS",
  "BCC",
  "USDT",
  "HSR",
  "OAX",
  "DNT",
  "MCO",
  "ICN",
  "ZRX",
  "OMG",
  "WTC",
  "YOYO",
  "LRC",
  "TRX",
  "SNGLS",
  "STRAT",
  "BQX",
  "FUN",
  "KNC",
  "CDT",
  "XVG",
  "IOTA",
  "SNM",
  "LINK",
  "CVC",
  "TNT",
  "REP",
  "MDA",
  "MTL",
  "SALT",
  "NULS",
  "SUB",
  "STX",
  "MTH",
  "ADX",
  "ETC",
  "ENG",
  "ZEC",
  "AST",
  "GNT",
  "DGD",
  "BAT",
  "DASH",
  "POWR",
  "BTG",
  "REQ",
  "XMR",
  "EVX",
  "VIB",
  "ENJ",
  "VEN",
  "ARK",
  "XRP",
  "MOD",
  "STORJ",
  "KMD",
  "RCN",
  "EDO",
  "DATA",
  "DLT",
  "MANA",
  "PPT",
  "RDN",
  "GXS",
  "AMB",
  "ARN",
  "BCPT",
  "CND",
  "GVT",
  "POE",
  "BTS",
  "FUEL",
  "XZC",
  "QSP",
  "LSK",
  "BCD",
  "TNB",
  "ADA",
  "LEND",
  "XLM",
  "CMT",
  "WAVES",
  "WABI",
  "GTO",
  "ICX",
  "OST",
  "ELF",
  "AION",
  "WINGS",
  "BRD",
  "NEBL",
  "NAV",
  "VIBE",
  "LUN",
  "TRIG",
  "APPC",
  "CHAT",
  "RLC",
  "INS",
  "PIVX",
  "IOST",
  "STEEM",
  "NANO",
  "AE",
  "VIA",
  "BLZ",
  "SYS",
  "RPX",
  "NCASH",
  "POA",
  "ONT",
  "ZIL",
  "STORM",
  "XEM",
  "WAN",
  "WPR",
  "QLC",
  "GRS",
  "CLOAK",
  "LOOM",
  "BCN",
  "TUSD",
  "ZEN",
  "SKY",
  "THETA",
  "IOTX",
  "QKC",
  "AGI",
  "NXS",
  "SC",
  "NPXS",
  "KEY",
  "NAS",
  "MFT",
  "DENT",
  "IQ",
  "ARDR",
  "HOT",
  "VET",
  "DOCK",
  "POLY",
  "VTHO",
  "ONG",
  "PHX",
  "HC",
  "GO",
  "PAX",
  "RVN",
  "DCR",
  "USDC",
  "MITH",
  "BCHABC",
  "BCHSV",
  "REN",
  "BTT",
  "USDS",
  "FET",
  "TFUEL",
  "CELR",
  "MATIC",
  "ATOM",
  "PHB",
  "ONE",
  "FTM",
  "BTCB",
  "USDSB",
  "CHZ",
  "COS",
  "ALGO",
  "ERD",
  "DOGE",
  "BGBP",
  "DUSK",
  "ANKR",
  "WIN",
  "TUSDB",
  "COCOS",
  "PERL",
  "TOMO",
  "BUSD",
  "BAND",
  "BEAM",
  "HBAR",
  "XTZ",
  "NGN",
  "DGB",
  "NKN",
  "GBP",
  "EUR",
  "KAVA",
  "RUB",
  "UAH",
  "ARPA",
  "TRY",
  "CTXC",
  "AERGO",
  "BCH",
  "TROY",
  "BRL",
  "VITE",
  "FTT",
  "AUD",
  "OGN",
  "DREP",
  "BULL",
  "BEAR",
  "ETHBULL",
  "ETHBEAR",
  "XRPBULL",
  "XRPBEAR",
  "EOSBULL",
  "EOSBEAR",
  "TCT",
  "WRX",
  "LTO",
  "ZAR",
  "MBL",
  "COTI",
  "BKRW",
  "BNBBULL",
  "BNBBEAR",
  "HIVE",
  "STPT",
  "SOL",
  "IDRT",
  "CTSI",
  "CHR",
  "BTCUP",
  "BTCDOWN",
  "HNT",
  "JST",
  "FIO",
  "BIDR",
  "STMX",
  "MDT",
  "PNT",
  "COMP",
  "IRIS",
  "MKR",
  "SXP",
  "SNX",
  "DAI",
  "ETHUP",
  "ETHDOWN",
  "ADAUP",
  "ADADOWN",
  "LINKUP",
  "LINKDOWN",
  "DOT",
  "RUNE",
  "BNBUP",
  "BNBDOWN",
  "XTZUP",
  "XTZDOWN",
  "AVA",
  "BAL",
  "YFI",
  "SRM",
  "ANT",
  "CRV",
  "SAND",
  "OCEAN",
  "NMR",
  "LUNA",
  "IDEX",
  "RSR",
  "PAXG",
  "WNXM",
  "TRB",
  "EGLD",
  "BZRX",
  "WBTC",
  "KSM",
  "SUSHI",
  "YFII",
  "DIA",
  "BEL",
  "UMA",
  "EOSUP",
  "TRXUP",
  "EOSDOWN",
  "TRXDOWN",
  "XRPUP",
  "XRPDOWN",
  "DOTUP",
  "DOTDOWN",
  "NBS",
  "WING",
  "SWRV",
  "LTCUP",
  "LTCDOWN",
  "CREAM",
  "UNI",
  "OXT",
  "SUN",
  "AVAX",
  "BURGER",
  "BAKE",
  "FLM",
  "SCRT",
  "XVS",
  "CAKE",
  "SPARTA",
  "UNIUP",
  "UNIDOWN",
  "ALPHA",
  "ORN",
  "UTK",
  "NEAR",
  "VIDT",
  "AAVE",
  "FIL",
  "SXPUP",
  "SXPDOWN",
  "INJ",
  "FILDOWN",
  "FILUP",
  "YFIUP",
  "YFIDOWN",
  "CTK",
  "EASY",
  "AUDIO",
  "BCHUP",
  "BCHDOWN",
  "BOT",
  "AXS",
  "AKRO",
  "HARD",
  "KP3R",
  "RENBTC",
  "SLP",
  "STRAX",
  "UNFI",
  "CVP",
  "BCHA",
  "FOR",
  "FRONT",
  "ROSE",
  "HEGIC",
  "AAVEUP",
  "AAVEDOWN",
  "PROM",
  "BETH",
  "SKL",
  "GLM",
  "SUSD",
  "COVER",
  "GHST",
  "SUSHIUP",
  "SUSHIDOWN",
  "XLMUP",
  "XLMDOWN",
  "DF",
  "JUV",
  "PSG",
  "BVND",
  "GRT",
  "CELO",
  "TWT",
  "REEF",
  "OG",
  "ATM",
  "ASR",
  "1INCH",
  "RIF",
  "BTCST",
  "TRU",
  "DEXE",
  "CKB",
  "FIRO",
  "LIT",
  "PROS",
  "VAI",
  "SFP",
  "FXS",
  "DODO",
  "AUCTION",
  "UFT",
  "ACM",
  "PHA",
  "TVK",
  "BADGER",
  "FIS",
  "OM",
  "POND",
  "ALICE",
  "DEGO",
  "BIFI",
  "LINA",
];

to add an array with all the coin abbreviations.

We can then use this directly our export it a module and import and use it.

To change the primary and secondary colors in React MUI, we call createTheme to create a theme with the primary and secondary colors.

For instance, we write

import React from "react";
import { render } from "react-dom";
import { MuiThemeProvider, createTheme } from "@material-ui/core/styles";
import Root from "./Root";

const theme = createTheme({
  palette: {
    secondary: {
      main: "#E33E7F",
    },
  },
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Root />
    </MuiThemeProvider>
  );
}

render(<App />, document.querySelector("#app"));

to call createTheme with an object with the palette property with the colors.

Then we wrap our app with MuiThemeProvider with the theme prop set to theme to apply the theme colors.

To fix "Cannot read property ‘pathname’ of undefined" error with React Router, we need to add the Routes properly.

For instance, we write

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';

const Main = () => <h1>Hello world</h1>;

ReactDOM.render(
  <Router>
    <Route path='/' component={Main} />
  </Router>,
  document.getElementById('app')
);

if we’re using React Router v4.

We add the Router and put our Routes inside it.

To fix the ‘Trace: The node type SpreadProperty has been renamed to SpreadElement at Object.isSpreadProperty’ error with React,. we add the "@babel/plugin-proposal-object-rest-spread" plugin.

We install it with

npm i @babel/plugin-proposal-object-rest-spread --save-dev

Then we add

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

into .babelrc to add the "@babel/plugin-proposal-object-rest-spread" plugin.

Then in webpack.config.js we add

{
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loaders: "babel-loader",
      },
    ];
  }
}

to load .js and .jsx files with babel-loader.