Learn Hermes JS Engine - Pre-Requisites Skill & Setup Environment

#Introduction

Welcome to the Learn Hermes JS Engine series! Over the next 23 episodes we'll tear down Hermes — Meta's JavaScript engine designed for mobile — from its history and internal architecture to production optimizations.

Episode 0 is pure foundation. Its single goal: make sure your skills and environment are ready before you start practicing. We won't cover engine theory here; we're making sure everything is installed and working. The real technical material starts in episode 1.

#ES6+ JavaScript Skills and Runtime Behavior

Hermes executes standard JavaScript, so you need to be comfortable with modern syntax. At minimum, master these:

• Arrow functions, template literals, destructuring, and spread.
• Promises, async/await, and the event loop.
• Classes, prototypes, and how this gets bound.
• Modules: import and export.

Understanding runtime behavior also matters — like how object property lookup works and why repeated allocation is expensive. Later, in episodes 5 and 15, these concepts become key to optimization.

#React Native or Node.js Fundamentals

Hermes is most commonly used as the React Native engine, so get familiar with one of these two paths:

• React Native: understand how components and JSX work, and how JavaScript communicates with native code through the bridge.
• Node.js: understand modules, npm scripts, and Node project structure.

You don't need to master both — one is enough. Most hands-on examples in this series run on React Native, with a smaller portion on Node.js.

#Build Tooling Basics

Before Hermes, make sure you've run a build tool before. The most relevant ones:

• npm or Yarn as your package manager.
• Metro bundler — React Native's built-in bundler that turns your source into a single JavaScript bundle.
• Basic concepts: dependencies, node_modules, and scripts in package.json.

Metro will keep coming up starting from episode 4, because that's where Hermes integrates to produce bytecode.

#OS Development and Command Line

Use any operating system — macOS, Linux, or Windows — as long as you're comfortable in the terminal. For Android, all three OSes are supported; for iOS, only macOS can build. Master the basic commands: moving between folders, managing environment variables, and running long-lived processes. Hermes is often tested from an emulator or physical device, so the terminal isn't an option — it's a requirement.

#Setting Up Node.js and a Package Manager

Install Node.js version 18 or higher because Hermes and modern React Native require it. Verify with:

node --version
npm --version

Output of v18.x.x (or newer) and 9.x.x means you're ready. To manage multiple Node versions, use nvm and install the LTS version with nvm install --lts. If you prefer Yarn, enable it with corepack enable followed by yarn --version.

#Setting Up the React Native Environment

Create a new React Native project that will be the practice ground for the whole series:

npx react-native init BelajarHermes --version latest
cd BelajarHermes

Run npx react-native doctor to automatically check your toolchain — JDK, Android SDK, and Xcode (macOS). If anything shows up red, follow the fix instructions. This healthy Android/iOS environment is what will verify Hermes in episode 3.

#Setting Up the Hermes Binary and Source

Hermes is already bundled inside React Native, so you don't have to build it from source. But to learn the architecture (episodes 2 and 16), it's worth having access to the source and its compiler. Clone the official repo:

git clone https://github.com/facebook/hermes.git
cd hermes

This repo contains hermesc (the compiler) and the hermes runtime, both of which can be built with CMake. For now just clone it — we'll build from source in episode 3.

#Editor: VS Code for JavaScript and Debugging

VS Code is the main editor for this series. Install the following extensions:

• ESLint — keeps your JavaScript style consistent.
• JavaScript and TypeScript Nightly — IntelliSense and syntax highlighting.
• React Native Tools — run and debug apps from the editor.
• Metro Logging (optional) — view bundler logs right in the output panel.

Don't forget to ignore the node_modules folder in settings.json so file search stays fast. The value of debugging React Native UI through VS Code really shows in episode 7.

#Verifying Your Setup

Before moving on, make sure these five things work:

• node --version and npm --version print modern versions.
• npx react-native doctor reports a healthy Android/iOS toolchain.
• The BelajarHermes project initializes successfully.
• The Hermes repo is cloned on your machine.
• VS Code is installed with JavaScript and React Native plugins.

If everything is green, your environment is officially ready.

#Conclusion

Episode 0 is done. Here's what you must take away:

• Master modern JavaScript (ES6+) and its runtime behavior.
• Understand the basics of React Native or Node.js, plus the npm/Yarn build tooling and Metro.
• Set up Node.js 18+ with nvm and a fresh React Native project.
• Clone the Hermes repo to study the architecture in upcoming episodes.
• Install VS Code with the JavaScript, ESLint, and React Native Tools plugins.

Next, in episode 1 we answer the most important question before writing any code: why Hermes was born, where it came from, and what advantages it offers over V8 or JavaScriptCore. See you there!