# From Classes to Functions — The Right Way

## ✍️ Introduction

Hi there! 👋  
I'm **Daniel**, and together with my friend **Alberto**, we’re the team behind a project called **Unclass**.

We’ve been working in React for years — and we’ve experienced the frustration firsthand:  
**migrating from class components to function components isn’t just tedious... it can be a complete nightmare.**

If you've ever dealt with `this`, binding event handlers, or digging through outdated lifecycle methods, you know what we mean.

## 💡 Why we’re building Unclass

Unclass is a CLI tool designed to help you **automate** the process of migrating your React class components into modern, functional ones — using hooks, clean syntax, and up-to-date best practices.

But here’s the thing: before we offer you automation, we want to do something different.

We want to **show you everything** that goes into this migration — **manually**, **step by step**, from **scratch**.  
Because we believe the best tools don’t just work — they make you smarter and more confident about what’s happening under the hood.

That’s why we’re launching this blog series.

## 🔍 What you’ll learn in this series

Each week, I’ll publish a new article walking you through:

✅ The real reasons to migrate (and when you shouldn’t)  
✅ How class components work internally  
✅ How functional components work with hooks  
✅ Manual migration steps — `useState`, `useEffect`, `useRef`, `useContext`, and more  
✅ Advanced edge cases and how to handle them  
✅ Tools and strategies to support large-scale migrations  
✅ Behind the scenes of how Unclass works and why we designed it that way

By the end of the series, you'll be able to **migrate components manually with confidence** — and you’ll be ready to decide **when** to let a tool like Unclass take over.

## 🚀 Try the Free Analyzer

As part of our open approach, we will also build a **free online analyzer** that lets you inspect any class component and see what it would take to migrate it.

You’ll get:

* A breakdown of what your component uses (state, lifecycle, refs, etc.)
    
* A list of hooks you'd need to use
    
* A summary of migration complexity
    
* No code changes, just visibility and insight
    

👉 This tool will be available soon — and totally free.

## 🧭 What is Unclass, really?

Unclass is a CLI tool built with TypeScript, Project Builder, and Schematics under the hood. It works in three stages:

1. **Analyze**: Scan your component and understand what’s going on
    
2. **Migrate**: Generate a side-by-side functional version
    
3. **Apply**: Replace the original when you’re ready — safely
    

You get control, visibility, and speed — without breaking your code.

And we’re building it with care, transparency, and real-world developer pain in mind.

## 📬 Join Us on This Journey

If you’re currently working with legacy class components — or if you’re part of a team thinking about upgrading — this series is for you.

We’d love for you to:

* **Follow the blog** to get weekly insights
    
* **Try the analyzer** once it’s live
    
* **Join the waitlist** to be part of the first group to try Unclass CLI
    
* **Help shape the tool** by sharing your challenges and needs
    

Let’s make React migration less painful, and a lot more empowering.

Thanks for being here 🙌  
— Daniel & Alberto