React for Beginners: A Quick Start Guide

Learn how to build your first interactive web app with React in this quick start guide.

Introduction

React is one of the most popular JavaScript libraries for building user interfaces. In this guide, we’ll show you how to get started with React by building your first app.

Step 1: Setting Up React

To get started, you can create a new React app with Create React App.

npx create-react-app my-react-app

Step 2: Understanding Components

React is all about components. Here’s a simple component:

import React from 'react';

function App() {
  return <h1>Hello, React!</h1>;
}

export default App;

Step 3: Using State in React

React allows you to manage state in your components. Here's how you can use the useState hook:

import React, { useState } from 'react';
const [count, setCount] = useState(0);

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Conclusion

With React, building interactive UIs becomes much easier. Once you’ve built a basic app, you can dive deeper into React's ecosystem like React Router and Redux.