Creating a React App with Deno: A Step-by-Step Guide
Written on
Chapter 1: Introduction to Deno
Deno is designed to provide a safe and efficient environment for scripting.
Photo by Kelly Sikkema on Unsplash
What exactly is Deno (pronounced "dee-no")? It is a contemporary runtime for JavaScript, TypeScript, and WebAssembly, developed by Ryan Dahl, who also initiated Node.js. Both Deno and Node.js utilize the V8 JavaScript engine, with Deno additionally leveraging Rust and Tokio.
In this guide, you will learn to install Deno and create a React application using the deno-create-react-app tool.
Section 1.1: Setting Up Deno
For this setup, I will be using macOS. If you're on a different operating system, please refer to the relevant documentation. To begin, you need to install Deno. I am utilizing Homebrew, a package manager for macOS, to perform the installation:
brew install deno
Next, verify the installation by checking the version:
deno --version
You should see output similar to this:
deno 1.23.3 (release, aarch64-apple-darwin)
v8 10.4.132.8
typescript 4.7.4
Now, install the deno-create-react-app tool:
To ensure the tool is accessible, add the following line to your shell's configuration file and then reload the changes. If you're using zsh (Z shell), you can do it as follows:
echo 'export PATH="$HOME/.deno/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc
Now, let’s create a React application named react-deno using the deno-create-react-app tool. Change to the project directory and run the application on port 3000 (the default is 8000):
deno-create-react-app init react-deno
cd react-deno
deno-create-react-app run -p 3000
To view your newly created application, navigate to the following URL in your preferred web browser:
At this point, you should see a webpage resembling the following:
React Application Interface — Image by Author
Excellent! You have successfully launched a React app using Deno. For further information about the deno-create-react-app tool, click here.
Chapter 2: Resources and Next Steps
If this guide has been helpful in getting you started with Deno, you can find the repository on GitHub. For more in-depth knowledge about Deno, consider checking the official documentation.
What’s next? Try your hand at building and deploying your Deno application. Happy coding!
The first video titled "How to build a React app with Vite and Deno" offers a visual guide through the process of creating a React application using these technologies.
The second video, "Deno working with ReactJS," further explores how to utilize Deno in conjunction with React, showcasing practical examples and tips.