A recipe,template that includes Dfinity, ReactJS, React-Router.

• Dfinity sdk version 0.10.0
• npm

dfx new <project name>

Install loaders

npm i css-loader style-loader html-webpack-plugin --save-dev

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime --save-dev

Install react

npm i react react-dom react-router-dom

webpack.config.js add module

module: {
      rules: [
        { 
          test: /\.css$/,
          use: ['style-loader','css-loader']
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              plugins: ['@babel/plugin-transform-runtime']
            }
          }
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: 'asset/resource',
        },
      ]
    },

Create babel.config.json touch babel.config.json

babel.config.json add content

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
}

update package.json

npm outdated

Modify accordingly.

Copy from repo. or adapt files in /src/dfinity_reactJs_reactRouter_babel_assets with reactjs.

1. Create and clone project from Github
2. Rename folder _/src/dfinity_reactJs_reactRouter_babel_assets with your <project name>
3. Rename folder /src/dfinity_reactJs_reactRouter_babel/ with your <project name>
4. Update name and description in package.json
5. Update dfx.json search for dfinity_reactJs_reactRouter_babel and replace with your <project name>
6. Update webpack.config.js search for dfinity_reactJs_reactRouter_babel and replace with your <project name>

Command npm install

Command dfx deploy

Add or update front-end files in _./src/<project name>assets/src/

Take care of wrapper.js by updating import and Actor.createActor

Use command dfx deploy or npm start

• Easiest way to get started with frontend. ...
• How do I connect a React front-end with a Canister
• Dfinity doc. Add front-end assets
• Kyle Peacock dfx-template-react