DEV Community: amir nazari

How to create an ERC20 token from zero to hero?

amir nazari — Mon, 31 Jan 2022 21:56:10 +0000

What is a smart contract?

A smart contract is like a regular contract with rules and conditions between buyer and seller. Still, the difference is in a smart contract, these terms of the agreement are written with executable code on the machines, and then they are running on a distributed system.

One of the most popular smart contract networks is Ethereum, and its programming language is Solidity. You can write your smart contract with this powerful language and publish it on the Ethereum blockchain network as a Token.

Solidity

What is Token?

A token is an interchangeable item with many different properties and behavior. Tokens are used in many different ways, like:

reputation points in an online platform
an online piece of art
skills of a character in a game
lottery tickets
voting
financial assets like a share in a company
a fiat currency like USD
an ounce of gold
and so more …

This powerful feature of Ethereum should have standard cause these tokens wanted to speak to each other with an API; this is where ERC-20 plays its role.

What is ERC-20?

As we found here, ERC-20 is a standard for writing tokens with smart contract programming language. Now the question is, what is this standard?

In this standard, we need to implement some predetermined events and methods.

function name() public view returns (string)
function symbol() public view returns (string)
function decimals() public view returns (uint8)
function totalSupply() public view returns (uint256)
function balanceOf(address _owner) public view returns (uint256 balance)
function transfer(address _to, uint256 _value) public returns (bool success)
function transferFrom(address _from, address _to, uint256 _value) public returns (bool success)
function approve(address _spender, uint256 _value) public returns (bool success)
function allowance(address _owner, address _spender) public view returns (uint256 remaining)

event Transfer(address indexed _from, address indexed _to, uint256 _value)
event Approval(address indexed _owner, address indexed _spender, uint256 _value)

Function name: Will return the token's name defined in the project.
Function symbol: Will return the sign of the token.
Function decimals: This is defined to show how many decimals this token can have.
Function totlaSupply: The total supply of the token in the network.
Function balanceOf: Return the balance of the given wallet address.
Function transfer: Transfer the given value to the provided wallet address.
Function transferFrom: Transfer given value from the given sender wallet address to the receiver wallet address.
Function approve: which will check if the total supply has the amount of token which needs to be allocated to a user.
Function allowance: which will check if the sender has enough supply to send to the receiver.
Event Transfer: This event is published when the token is transferred from the sender to the receiver.
Event Approval: This event is published when the spender approves that can send the given value to the receiver.

The Wallet (MetaMask)

To work with the ETH network and develop on top of that, you need a wallet address. The simplest way to set up our wallet and use it in our journey is to use MetaMask.

metamask

Owing a MetaMask wallet is very easy, and you can do it in a couple of minutes. First, you need to download the MetaMask browser extension and then follow it to finish the process.

Be careful; if this account of MetaMask is your one, you should save the credentials somewhere safe and don’t forget it!

The Test Environments (Ropsten Test Network)

For beginning the development of the token, you need a place for the test environment.

Ropsten

In the MetaMask browser extension, you can find a dropdown at the top of it and should be written “Ethereum Mainnet.” Click on that and change it to the Ropsten Test Network.

MetaMask wallet

MetaMask change network

Using the Ropsten faucet you can earn some test ETH for testing purposes. You need to change the network on your MetaMask wallet to Ropsten Test Network and copy-paste your wallet address that starts with “0x…” into the mentioned website text field, then click “Send me test Ether”.

Development IDE (Remix IDE)

An integrated development environment is a software application that provides comprehensive facilities to computer programmers for software development. An IDE usually consists of a source code editor, build automation tools, and a debugger.

Wikipedia

Remix IDE has all the necessary tools that we need to create, debug, compile and deploy an ERC-20 token.

How to create an ERC-20 token

Go to the Remix IDE and make a new solidity file, for example – mytoken.sol

Paste the following code into your new Solidity script:

pragma solidity ^0.4.24;

//Safe Math Interface

contract SafeMath {

    function safeAdd(uint a, uint b) public pure returns (uint c) {
        c = a + b;
        require(c >= a);
    }

    function safeSub(uint a, uint b) public pure returns (uint c) {
        require(b <= a);
        c = a - b;
    }

    function safeMul(uint a, uint b) public pure returns (uint c) {
        c = a * b;
        require(a == 0 || c / a == b);
    }

    function safeDiv(uint a, uint b) public pure returns (uint c) {
        require(b > 0);
        c = a / b;
    }
}


//ERC Token Standard #20 Interface

contract ERC20Interface {
    function totalSupply() public constant returns (uint);
    function balanceOf(address tokenOwner) public constant returns (uint balance);
    function allowance(address tokenOwner, address spender) public constant returns (uint remaining);
    function transfer(address to, uint tokens) public returns (bool success);
    function approve(address spender, uint tokens) public returns (bool success);
    function transferFrom(address from, address to, uint tokens) public returns (bool success);

    event Transfer(address indexed from, address indexed to, uint tokens);
    event Approval(address indexed tokenOwner, address indexed spender, uint tokens);
}


//Contract function to receive approval and execute the function in one call

contract ApproveAndCallFallBack {
    function receiveApproval(address from, uint256 tokens, address token, bytes data) public;
}

//Actual token contract

contract SampleToken is ERC20Interface, SafeMath {
    string public symbol;
    string public name;
    uint8 public decimals;
    uint public _totalSupply;

    mapping(address => uint) balances;
    mapping(address => mapping(address => uint)) allowed;

    constructor() public {
        symbol = "ST";
        name = "Sample Token Coin";
        decimals = 2;
        _totalSupply = 100000;
        balances[YOUR_METAMASK_WALLET_ADDRESS] = _totalSupply;
        emit Transfer(address(0), YOUR_METAMASK_WALLET_ADDRESS, _totalSupply);
    }

    function totalSupply() public constant returns (uint) {
        return _totalSupply - balances[address(0)];
    }

    function balanceOf(address tokenOwner) public constant returns (uint balance) {
        return balances[tokenOwner];
    }

    function transfer(address to, uint tokens) public returns (bool success) {
        balances[msg.sender] = safeSub(balances[msg.sender], tokens);
        balances[to] = safeAdd(balances[to], tokens);
        emit Transfer(msg.sender, to, tokens);
        return true;
    }

    function approve(address spender, uint tokens) public returns (bool success) {
        allowed[msg.sender][spender] = tokens;
        emit Approval(msg.sender, spender, tokens);
        return true;
    }

    function transferFrom(address from, address to, uint tokens) public returns (bool success) {
        balances[from] = safeSub(balances[from], tokens);
        allowed[from][msg.sender] = safeSub(allowed[from][msg.sender], tokens);
        balances[to] = safeAdd(balances[to], tokens);
        emit Transfer(from, to, tokens);
        return true;
    }

    function allowance(address tokenOwner, address spender) public constant returns (uint remaining) {
        return allowed[tokenOwner][spender];
    }

    function approveAndCall(address spender, uint tokens, bytes data) public returns (bool success) {
        allowed[msg.sender][spender] = tokens;
        emit Approval(msg.sender, spender, tokens);
        ApproveAndCallFallBack(spender).receiveApproval(msg.sender, tokens, this, data);
        return true;
    }

    function () public payable {
        revert();
    }
}

You can change the token name and symbol by changing the lines 62 and 63.

You can change the decimal and totalsupply of your token by changing lines 64 and 65.

It would help if you changed YOUR_METAMASK_WALLET_ADDRESS with your wallet address (the same wallet address that you put in the Ropsten faucet).

Note : The total supply value must have additional trailing zeros as specified by the decimals field. For example, the decimal value in this contract is two, and we need a total supply of 1000 tokens, so we’ll have to set the real supply variable to 100000 (simply because it won’t allow a decimal point).

Let’s explain each part of this code:

contract SafeMath : This contract is used to safely implement the four primary math operations and use its methods instead of the usual operations to avoid possible problems.

safeAdd : This is a method for adding only two positive numbers and returning the result;

safeSub : This is a method for subtracting only two positive numbers that the second one has to be less than the first one and return the results;

safeMul : This is a method for multiplying only two positive numbers and producing the results;

safeDiv : This is a method for dividing only two positive numbers also the second one is not zero and yielding the results;

contract ERC20Interface : This is an interface of the ERC20 standard token that we will use to implement our token.

function totalSupply : This function is used to return the token’s total amount.

function balanceOf : This function gets an address and returns its balance in the network.

function allowance : This checks the remaining amounts of the token that the spender can use.

function transfer : This will transfer the desired quantity token to the given address.

function approve : The will permit the spender to use the user token on their behalf.

function transferFrom : This will send tokens from the sender to the receiver.

function approveAndCall : Executing the transactions of buying and selling the tokens.

event Transfer : This will propagate when some tokens are transferred.

event Approval : When approval is submitted, this will publish to the network.

function () public payable: Fallback function prevents sending tokens directly to the contract address.

contract ApproveAndCallFallBack : A contract function to receive authorization and execute a function in one call.

How to Compile and Deploy an ERC-20 token

You can click on the compile icon and submit the compile button on the left pane. Your token is ready to deploy now!

Compile ERC-20 Token

For deploying your token on the Ropsten Test Network, click on the deploy icon on the left pane and select the environment option “Injected Web3.”. Make sure to choose your primary contract name from the contract selector. Now you can submit the “Deploy” button and confirm the transaction on your MetaMask. Currently, you can see your token contract at the bottom of it.

Deploy ERC-20 Token

Great! Your first token is published on the test network.

Add custom token to MetaMask

The last step is adding your custom token to your MetaMask wallet and seeing your balance.

At the deployed contracts tab where you deployed in the IDE, copy the contract address from there, and on your MetaMask, click on the “Import tokens” button, and paste the contract address in the “Token Contract Address” field. MetaMask will retrieve other details from the network.

Import token in MetaMask

Add custom token in MetaMask

Conclusion

Congratulations! You have created an ERC-20 token on the Ethereum network successfully.

If you want to know when the new article will be published, subscribe to my Newsletter on my website!
Subscribe to Newsletter

SINGLE APP FOR WEB, IOS, AND ANDROID USING REACT-NATIVE ( Components ) – PART 2

amir nazari — Mon, 10 Jan 2022 13:00:00 +0000

This is the second part of the article. In the previous part, we have examined how to configure a project and run it on all environments (iOS, Android, and Web). In this part, we want to explain how to create different containers and components to develop the logic and UI part of our project on various platforms.

Creating a single application for every environment (Web, iOS, and Android) with one codebase.

Concept

As we know, Web projects are working with DOM, and native projects have their native components. So we need to separate the UI parts of the different platforms to solve the issue.

For this purpose, we should keep the logic codes apart from the UI and put them in the different components called containers. For separating the UI parts at platforms, we can use the following two extensions: .native.tsx , .web.tsx

At the rest of the article, I explained the listed majors:

How to create a mock server for getting data
How to create container for the logic
How to create components for the UI of the application

Prerequisite

For calling AJAX request axios the library is needed, so let’s execute the following command at the terminal:

$ npm install axios

Mock Server

There are many libraries and tools to make a mock server for your project; I chose the mocks-server to create the mock server. For installing this lib execute the following command in the terminal of the project:

$ npm i @mocks-server/main --save-dev

Then add the following code to the scripts part of your package.json file:

"mocks": "mocks-server"

After putting the above code, you can execute the mocks from your terminal with this command:

$ npm run mocks

After running the command, you’ll see that some files and directories will be created on the project. The mocks-server will generate a sample API for getting users inside the /mocks/routes/users.js route.

Container

This is a place for putting the logical codes there. Everythings that are the same between different platforms and related to the data should be in containers.

The containers can be named like XConatiner.jsx, and the “X” will be the name of the related feature or component.

For now, we need UsersContainer.jsx to get the user’s data and pass it to the corresponding component.

There are many ways to structure the React and React-Native projects, and this article doesn’t focus on them.

First of all, we need a folder inside the src directory called Users. So let’s execute the following command at the terminal:

$ cd ./src && mkdir Users && cd ./Users

Then run the below command to create the mentioned file:

$ touch UsersContainer.jsx

As mentioned, we need to retrieve the users and pass them to the related UI component in this container, so let’s put the below code inside the UsersContainer.jsx:

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import UsersComponent from './UsersComponent';

export const UsersContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios
      .get('http://localhost:3100/api/users')
      .then(response => {
        setUsers(response.data);
      })
      .catch(err => {
        console.log('error', err);
      });
  }, []);

  return users.length > 0 ? <UsersComponent users={users} /> : null;
};

Components

Here we have the distinction for the different platforms for the UI part. All the visual things and other specific libraries for one platform should be in these components.

We need two components for web and mobile, UsersComponent.web.jsx and UsersComponent.native.jsx. Create these files inside the Users directory with the following command:

$ cd ./src/Users && touch UsersComponent.web.jsx UsersComponent.native.jsx

These components should get users from their parent container and render it. Let’s put the following code for each file:

import React from 'react';

const UsersComponent = ({users}) => {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UsersComponent;

import React from 'react';
import {View, Text} from 'react-native';

const UsersComponent = ({users}) => {
  return (
    <View>
      {users.map(user => (
        <Text key={user.id}>{user.name}</Text>
      ))}
    </View>
  );
};

export default UsersComponent;

According to the container, you noticed that you didn’t mention importing the component .native or .web. Yes! This is the power of the Webpack and Metro, they can understand which one should be compiled, and you don’t need to worry!

Single App for web, iOS, and Android using React-Native ( NEW APPROACH ) – PART 1

amir nazari — Wed, 05 Jan 2022 23:27:15 +0000

Introduction

Many projects need to implement both web and mobile applications, but there is always hard to decide how they should be developed. Some of them implemented web applications initially, and after that, mobile application development started. Also, some libraries are out there to implement both web and mobile applications together, like React-Native-Web. But the negative point with these libraries is they are not compatible with all other libraries and they make the apps lower. There is a different approach that we can use to satisfy these needs, and that's creating separate UI component for web and mobile, but all of them has a single logical part.

Concept

Before starting to write code, and creating the file structures let me explain the concept of this approach. In React and React-Native one of the best structures is that separating the logic and data parts of every component from the UI part. So we have "Container" and "Screen" for every component in our project. Also as we need to create a project that works in iOS, Android, and Web, we need to separate every UI component into at least 2 parts; "native" and "web". Our UI components will be like "Component.native.ts" and "Component.web.ts".

Maybe it looks like weird these extensions but with this separation, we can use different bundlers for each platform and our purpose will reach out.

In this tutorial, I didn't integrate Redux or any state management to reduce the complexity of the tutorial but as I like Typescript and I'd like to spread the use of this wonderful language, I'll use it in my codes.

This project will be in 2 parts because it's a quite long.

First Part: Create and Configure the project
Second Part: Create some components for different envrionements

Phase 1 (Create a Project):

I prefer to use VSCode as an editor but you can choose any other editor or IDE you want.

Download Visual Studio

First of all, need to create a project, To do so, the React-Native Typescript template should execute in the terminal: (You can change the name of the project by changing the "PROJECT_NAME" in the command below)

$ npx react-native init PROJECT_NAME --template react-native-template-typescript

If you are using Macbook with any M1 chips you will face with CocoaPods error and there are some possibilities to fix the issue:

$ sudo arch -x86_64 gem install ffi

$ arch -x86_64 pod install

You can follow this thread for any other ways that you like to follow for solving this issue:

Nov 18 '20 Comments: 1 Answers: 33

214

I have a Flutter project that I'm trying to run on iOS. It runs normally on my Intel-based Mac, but on my new Apple Silicon-based M1 Mac it fails to install pods.

LoadError - dlsym(0x7f8926035eb0, Init_ffi_c): symbol not found - /Library/Ruby/Gems/2.6.0/gems/ffi-1.13.1/lib/ffi_c.bundle
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/Library/Ruby/Gems/2.6.0/gems/ffi-1.13.1/lib/ffi.rb:6:in `rescue in <top (required)>'

…

Open Full Question

Phase 2 (Adding Web files):

In this step, we need to add some files to our project for adding the web functionality to it. For this purpose, we are using React library because React is already part of the project and we don't need to do a lot for compatibility.

First of all, we should create a public directory at the root of the project:

$ mkdir public && cd ./public

Public folder stands for keeping the web files like index.html, favicon.ico, manifest.json, and robots.txt. So we need to create these files in the public directory:

$ touch index.html manifest.json robots.txt

index.html

Is the page template. We need to put the following content inside it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

manifest.json

The manifest.json is a simple JSON file in your website that tells the browser about your website on user's mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt.

We should fill in this file with the below content:

{
  "short_name": "PROJECT_NAME",
  "name": "PROJECT_NAME",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

You should change the PROJECT_NAME with your project name.

As you can see in the contents of the manifest.json we need 3 files; favicon.ico, logo192.png, and logo512.png. You should put your own logo file with these three formats and sizes in the public directory that was created.

robots.txt

A robots.txt file tells search engine crawlers which URLs the crawler can access on your site.

Add this file with the following content:

# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

You can put any pages that the robots should read in front of the Disallow.

index.web.tsx

After that we need to create a start point for the web project. This file will be the place that compiler start to create the hirarchy. The place of this file should be inside the src directory.

$ cd ./src && touch index.web.tsx

Then we need to put some code inside it for rendering our code:

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

ReactDOM.render(
  <React.StrictMode>
    {/* Here will be our codes and components */}
  </React.StrictMode>,
  document.getElementById('root')
);

After creating these files we need to change some configurations from the project. You can open your editor and open the .eslintrc.js file, then add 'react-app', 'react-app/jest' to the extends key and it should be like:

module.exports = {
  root: true,
  extends: ['@react-native-community', 'react-app', 'react-app/jest'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  rules: {
    'no-shadow': 'off',
    '@typescript-eslint/no-shadow': ['error'],
  },
};

Then we need to change 2 property in the tsconfig.json file; change the "lib" property to "dom", "dom.iterable", "esnext" and change the "jsx" property to "preserve".

The file will be like this:

{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["dom", "dom.iterable", "esnext"], /* Specify library files to be included in the compilation. */
    "allowJs": true, /* Allow javascript files to be compiled. */
    // "checkJs": true, /* Report errors in .js files. */
    "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true, /* Generates corresponding '.d.ts' file. */
    // "sourceMap": true, /* Generates corresponding '.map' file. */
    // "outFile": "./", /* Concatenate and emit output to single file. */
    // "outDir": "./", /* Redirect output structure to the directory. */
    // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "removeComments": true, /* Do not emit comments to output. */
    "noEmit": true, /* Do not emit outputs. */
    // "incremental": true, /* Enable incremental compilation */
    // "importHelpers": true, /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true, /* Enable all strict type-checking options. */
    // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true, /* Enable strict null checks. */
    // "strictFunctionTypes": true, /* Enable strict checking of function types. */
    // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true, /* Report errors on unused locals. */
    // "noUnusedParameters": true, /* Report errors on unused parameters. */
    // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
    // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [], /* List of folders to include type definitions from. */
    // "types": [], /* Type declaration files to be included in compilation. */
    "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
    "skipLibCheck": false, /* Skip type checking of declaration files. */
    "resolveJsonModule": true /* Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. */

    /* Source Map Options */
    // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
  },
  "exclude": [
    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
  ]
}

Then last but not least, we need to add some packages to the package.json and add scripts to it.

For supporting the DOM and React scripts we should add the following package to the project.

"react-dom": "^17.0.2","react-scripts": "^5.0.0"

$ npm install react-dom react-scripts

For the development purpose we need some other packages that should be added to the devDependencies inside the package.json. For adding to the dev part we should pass the --save-dev at the end of the command. These are the packages that should be added:

"@types/react-dom": "^17.0.11",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/node": "^16.11.17",
"@types/react": "^17.0.38",

For adding these packhages to you devDependencies execute the following command inside the terminal at the project root folder:

$ npm install @types/react-dom @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/node @types/react --save-dev

After adding the dependencies that we need for the project, it's time to add some additional scripts and change the of the previous ones for the readability in the project. Let's change the scripts part in the package.json file with the following:

"scripts": {
    "build-android": "react-native run-android",
    "build-ios": "react-native run-ios",
    "start-native": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "start-web": "react-scripts start",
    "build-web": "react-scripts build"
  },

Congratulations! You've finished the configurations of the project. Now you can start the project for the different environments.

For starting on the web:

$ npm start start-web

For starting on the iOS:

$ npm start build-ios

For starting on the Android:

$ npm start build-android

The rest of the article will be in the next article that comes in few days. If you want to know when the new article will be published, subscribe to my Newsletter at my own website!

Subscribe to Newsletter