Skip to main content

Introduction

This workshop is designed to teach the fundamentals of React and how they apply to Roblox development. It is intended for those who are new to React and want to learn how to use it in Roblox.

Outline​

The workshop is designed to be 2 hours long and is divided into 8 sections. Each section has a specific objective and topics to cover.

The exercises and challenges are optional, but they are designed to reinforce the concepts covered in the workshop. An instructor can choose to include them as part of the workshop, either collaboratively, as live coding exercises, or leave them as optional homework.

  1. Introduction to React (10 mins)
    • Objective: Understand the basics of React and its significance.
    • Topics:
      • Brief history and significance of React.
      • Overview of React's core principles (components, state, props).
      • Overview of JSX.
  2. Setting Up the Environment (5 mins)
    • Objective: Ensure everyone has the necessary setup to follow along.
    • Topics:
      • Quick setup guide for this environment.
      • Brief introduction to the development environment and tools.
  3. Building Components (20 mins)
    • Objective: Learn to create and compose React components.
    • Topics:
      • Functional vs. Class components.
      • Composing components.
      • Introduction to props.
      • Introduction to hooks (useState, useEffect).
    • Exercises:
      • Create a basic button component with React.
  4. State Management and Lifecycle (20 mins)
    • Objective: Understand how to manage state and lifecycle in React.
    • Topics:
      • State management in functional components (hooks).
      • Brief overview of lifecycle in class components.
    • Exercises:
      • Implementing a counter.
  5. Props and Data Flow (15 mins)
    • Objective: Learn how data flows between components.
    • Topics:
      • Understanding props.
      • Component hierarchy and data flow.
      • Lifting state up.
    • Exercises:
      • Creating a list component that displays a list of strings.
  6. Advanced Concepts Overview (10 mins)
    • Objective: Touch upon more advanced React concepts.
    • Topics:
      • Context API.
      • Higher Order Components (HOCs).
      • Render Props.
      • Hooks like useRef, useMemo, and useCallback.
  7. React in the Roblox Context (10 mins)
    • Objective: Connect React fundamentals to the Roblox environment.
    • Topics:
      • Overview of react-roblox.
      • Differences and similarities with standard React.
      • Connection of React fundamentals with react-roblox.
      • Key considerations for using React in Roblox.
  8. Q&A and Conclusion (30 mins)
    • Objective: Address specific questions.
    • Topics:
      • Open floor for questions.
      • Guidance for further learning and experimentation.
      • Feedback session for the workshop.

Execution Tips​

For those who are teaching, here are some tips to help you execute the workshop:

  1. Hands-On Approach: Include live coding sessions and encourage participants to code along.
  2. Focused Content: Stick to the essentials and avoid deep dives into less critical topics.
  3. Resources: Provide resources for further learning (documentation, tutorials, articles).
  4. Prepared Materials: Have code snippets, slides, and resources ready to optimize time.
  5. Interactive Elements: Use live coding or interactive examples to illustrate key points.
  6. Feedback Mechanism: Have a way to collect feedback for improvement.
  7. Community Building: Encourage participants to share learnings and help each other even after the workshop.