Skip to main content

Setting Up the Environment

  • Duration: 5 minutes
  • Objective: Ensure everyone has the necessary setup to follow along with workshop lessons and exercises.

To ensure a smooth and productive learning experience, it's essential to have your development environment properly set up. This section will guide you through the necessary steps and tools required to follow along with the React Roblox workshop.

Quick Setup Guide​

The setup process involves a few key steps to get your environment ready for React development within the Roblox framework. The steps are the same for all workshops. So we'll take a brief detour to follow the setup guide before continuing, but be sure to return.

Familiarizing Yourself with the Development Environment​

Before diving into the lessons, take some time to familiarize yourself with Roblox Studio and Hoarcekat. Here are a few key points:

  • Roblox Studio is the primary development environment for Roblox. It's where you'll build your games and experiences.
    • We'll need this synced with our code editor using Rojo to enable live coding.
    • In order to have access to React, we'll need to install our dependencies with Wally.
  • Hoarcekat is a Roblox Studio plugin that enables you to view UI "stories", small, isolated sections of your UI, in real-time.
    • This is a great tool for quickly iterating on UI components and our lessons will use it extensively.

Ready to Go!​

With Roblox Studio set up and the react-roblox library installed, you’re now ready to start building with React in Roblox. Remember, setting up your environment correctly is crucial for a hassle-free learning experience, so ensure everything is working as expected before moving on to the next section.