Getting Started with React

👋 What is React?

React is a JavaScript library created by Facebook (now Meta) for building user interfaces. Instead of writing your whole app in one large file, React encourages you to break things down into components — small, reusable building blocks.

That’s why React has become one of the most popular choices for developers and companies worldwide.

👉 Curious why React is called a library while Angular and Vue are considered frameworks? Read my post: React as a Library vs Angular and Vue as Frameworks: What’s the Difference?

🚀 Setting up React

There are a few different ways to start a new React project. The most popular today is Vite (fast and modern), while Create React App (CRA) is the classic choice you’ll still see in many tutorials.

👉 If you’d like a step-by-step guide with setup instructions and your first component example, check out: How to Set Up a Basic React App

⚡ Choices You’ll Face Early On

Once you’ve set up your first app and built a couple of components, you’ll quickly realize that React gives you a lot of flexibility. With flexibility comes decisions:

• Project Setup → Vite vs CRA vs Next.js vs others

• Language Choice → JavaScript vs TypeScript

• Syntax → JSX vs TSX

• Component Style → Class components vs Function components with hooks

• State Management → Local state, Context, Redux/Zustand, or React Query

• Styling → CSS, CSS Modules, CSS-in-JS, or TailwindCSS

• Data Fetching → Fetch/Axios vs React Query/SWR vs Next.js built-ins

👉 I’ve explained all of these comparisons in detail here: Common Choices You’ll Face When Starting with React

🛠 Productivity Tools

Your development environment matters. VS Code is the most popular editor for React developers, and extensions can make a huge difference in productivity.

👉 Check out my curated list: Best VS Code Extensions for React Developers

🔍 Debugging and Tools

React provides excellent tools to help you learn and debug. The React DevTools browser extension lets you inspect components, props, and state in real time. It’s one of the best companions for beginners.

🎨 Styling Your App

From plain CSS to Tailwind or Styled Components, React gives you flexibility in how you style your applications. Start simple and adopt more advanced options as your project grows.

📘 Naming Conventions

Consistency is key in React. Following simple naming rules makes your code easier to read, share, and maintain. You may not use it all in the beginning but keep it handy as a quick reference. 

• Components → Use PascalCase
  Example: UserCard, TodoList

• Hooks → Always start with use
  Example: useAuth, useFetch

• Variables & functions → Use camelCase
  Example: isLoading, submitForm

• Event Handlers → Start with handle + action
  Example: handleClick, handleSubmit, handleChange

• Event Props → Start with on + event
  Example: onClick, onChange, onSubmit

  These are used in JSX to accept event handlers. Usually, you’ll see them paired together, e.g.:
  <button onClick={handleClick}>Click Me</button>

• Constants → Use UPPER_SNAKE_CASE
  Example: API_URL, MAX_ITEMS

• Files → Match file name to the default export
  Example: UserCard.jsx should export the UserCard component

✅ Wrap-Up

Getting started with React doesn’t have to be overwhelming. Begin with the basics:

• Understand what React is.

• Set up your first project.

• Learn about components.

• Follow consistent naming conventions.

• Use the right tools like React DevTools and VS Code extensions.

React is flexible, powerful, and fun — and this is just the beginning 🚀.