WebAssembly (or WASM for short) is the new cool kid on the block in the programming world. It lets you write high performant code that runs right in the browser leveraging the power of lower level langauges like C/C++ and Rust.

WASM is by no means a replacement for JS, rather you should use both languages in tandem to build your frameworks. When I set out to start touching WASM, I didn’t find too many guides for properly integrating it into a react application.

The first thing you should do is create a react application. You’ll need node — you can install it using package managers if you’re on linux or mac, or from the install page on windows. I’ll assume you’ve used node from here on out so go watch some videos if you need to familiarize yourself with it and install it.

npx create-react-app my-app

By default once you run the above command, you get a folder structure that looks like:

my-app
|-- README.md
|-- node_modules/
|-- package.json
|-- .gitignore
|-- public/
|-- src/

You’ll need to install cargo to continue from this point on. Check here for how to install cargo on your machine.

Run:

cargo new webassembly

Now you’ll have a directory with a cargo.toml file