React and WebAssembly: A Match Made in Heaven

In this tutorial, we will explore how to use WebAssembly modules in a React application. WebAssembly is a low-level binary format for the web that allows you to run code written in languages like C, C++, and Rust directly in the browser. React is a popular JavaScript library for building user interfaces.

Before getting started, make sure you have Node.js and npm installed on your machine.

Step 1: Create a new React app

First, let’s create a new React app using Create React App. Open your terminal and run the following command:

npx create-react-app react-webassembly

This will create a new React app in a directory called react-webassembly.

Step 2: Install Emscripten

Emscripten is a toolchain for compiling C and C++ code to WebAssembly. You can install it by following the instructions on the official website: https://emscripten.org/docs/getting_started/downloads.html

Once you have Emscripten installed, you can test it by running the following command:

emcc --version

Step 3: Write a simple C program

Create a new file called add.c in the src directory of your React app. Add the following code to the file:

int add(int a, int b) {
    return a + b;
}

This is a simple C function that takes two integers as input and returns their sum.

Step 4: Compile the C program to WebAssembly

Open your terminal and navigate to the src directory of your React app. Run the following command to compile the add.c file to WebAssembly:

emcc add.c -o add.wasm -s EXPORTED_FUNCTIONS="['_add']" -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]'

This command will generate a WebAssembly module called add.wasm that exports the add function.

Step 5: Import the WebAssembly module in React

Now, let’s import the add.wasm module into our React app. Create a new file called Add.js in the src directory and add the following code:

import React from 'react';
import addModule from './add.wasm';

class Add extends React.Component {
    state = {
        result: null
    }

    async componentDidMount() {
        const { instance } = await addModule();
        const add = instance.exports._add;
        const result = add(2, 3);
        this.setState({ result });
    }

    render() {
        const { result } = this.state;

        return (
            <div>
                <h1>Result: {result}</h1>
            </div>
        );
    }
}

export default Add;

In this code, we use the WebAssembly.instantiateStreaming function to load the add.wasm module and retrieve the add function. We then call the add function with two arguments (2 and 3) and update the component’s state with the result.

Step 6: Render the component in App.js

Open the App.js file in the src directory and import the Add component:

import React from 'react';
import Add from './Add';

function App() {
    return (
        <div className="App">
            <Add />
        </div>
    );
}

export default App;

Step 7: Run the React app

Finally, run the following command in your terminal to start the React app:

npm start

Open your browser and navigate to http://localhost:3000 to see the result of the add function displayed on the screen.

And that’s it! You have successfully integrated a WebAssembly module into a React application. You can now explore more complex C and C++ programs and interact with them using JavaScript in your React app. Happy coding! ❤️