🚀 Getting Started with React and Docker: A “Hello World” for Ruby Developers

May 2, 2025

In recent years, many Ruby and Ruby on Rails projects have adopted React for their front-end needs. Whether you’re building a modern single-page application (SPA) or just enhancing parts of your Rails views, learning React can open up a new world of interactivity and frontend control.

This article is my first step into React, with a simple yet complete “Hello World” application — containerized using Docker. It sets the stage for building more complex, production-ready apps that can integrate smoothly with a Rails API backend.

---

🛠 The Stack

• React: UI Library for building components
• Node.js (Alpine): Lightweight base image
• Docker & Docker Compose: To isolate and run our app consistently
• No Create-React-App CLI involved: We manually set up and understand each part

---

---

🧱 Project Structure

my-react-app/
├── Dockerfile
├── docker-compose.yml
├── package.json
├── public/
│   └── index.html
└── src/
    └── index.js

---

📦 package.json

We’re using react, react-dom, and react-scripts to bootstrap the project.

{
  "name": "frontend",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start"
  }
}

---

🔧 Dockerfile

This sets up the React app using a Node.js Alpine image:

FROM node:current-alpine3.20
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000 

---

🐳 docker-compose.yml

We use Docker Compose to streamline development:

services:
  react-app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - .:/app
    environment:
      - NODE_ENV=development
    stdin_open: true
    tty: true

---

💡 The App

src/index.js contains the simplest React example: a component that greets the world.

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

export default function App() {
  return <Greeting name="world" />;
}

The component is rendered into the div#root of public/index.html.

---

🧪 Run It

To get this up and running:

docker-compose up --build

Then visit http://localhost:3000 to see: Hello, world

---

🌱 What’s Next?

This tiny app is just the first kick in building a complete frontend for a Rails API. Future steps could include:

• React Router for client-side routing
• Fetching data from a Rails backend
• Managing state with Redux or Context
• Deploying via Nginx + multi-stage Docker builds

---

🧠 Final Thoughts

As a seasoned Ruby developer, learning React adds another powerful tool to your stack — especially in the API + SPA architecture that’s become so common.

This “Hello World” is a great starting point, and I’ll be sharing more steps soon as I build a full-featured app from here.

Follow along and feel free to clone the repo, tweak, or ask questions! 🔗