Building Your First React App: A Complete Guide

Ready to build your first React app? Let's do this step by step. No fluff, just what you need to know.

Getting Started

First things first, make sure you have Node.js installed. Then create your React app:

npx create-react-app my-first-app

cd my-first-app

npm start

Understanding Components

React is all about components. Think of them as reusable pieces of UI.

function Welcome() {

return <h1>Hello, World!</h1>;

}

State Management

State lets your components remember things and react to changes.

function Counter() {

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

return (

<div>

<p>You clicked {count} times</p>

<button onClick={() => setCount(count + 1)}>

Click me

</button>

</div>

);

}

Props: Passing Data

Props let you pass data from parent to child components.

function Greeting({ name }) {

return <h1>Hello, {name}!</h1>;

}

<Greeting name="Sarah" />

Building Your First Real Component

Let's build a todo list. This will teach you the fundamentals.

function TodoList() {

const [todos, setTodos] = useState([]);

const [input, setInput] = useState('');

const addTodo = () => {

setTodos([...todos, input]);

setInput('');

};

return (

<div>

<input

value={input}

onChange={(e) => setInput(e.target.value)}

/>

<button onClick={addTodo}>Add</button>

<ul>

{todos.map((todo, i) => (

<li key={i}>{todo}</li>

))}

</ul>

</div>

);

}

Next Steps

Once you've got the basics down, explore:

- React Router for navigation

- Context API for state management

- Custom hooks for reusable logic

- Styling with CSS modules or styled-components

Keep building, keep learning! 💪