IntroductionReact is one of the most popular JavaScript libraries for building user interfaces. It’s powerful, flexible, and widely used in modern web development. In this post, we’ll start with the basics: creating a simple app that displays a message and lets you click a button to increase a counter.Key Concepts You’ll LearnComponents: The building blocks of React apps.JSX: A syntax that looks like HTML but works inside JavaScript.State: How React remembers values between renders.Events: Handling user actions like button clicks.Step 1: Setting UpIf you don’t already have a React project, you can create one using:bashnpx create-react-app my-first-app cd my-first-app npm start This will start a development server and open your app in the browser.Step 2: Create Your First ComponentOpen src/App.js and replace the content with:import React, { useState } from "react"; function App() { // Declare a state variable called "count" const [count, setCount] = useState(0); return ( <div style={{ textAlign: "center", marginTop: "50px" }}> <h1>Hello, React World! 👋</h1> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click Me </button> </div> ); } export default App; What’s Happening Here?useState(0) → Creates a state variable count starting at 0.setCount(count + 1) → Updates the state when the button is clicked.Every time state changes, React re-renders the component with the new value.Suggested VisualsA screenshot of the app showing the counter.A diagram of the React component lifecycle: Render → User Click → State Update → Re-render.ConclusionYou’ve just built your first interactive React app! 🎉 This simple counter demonstrates the core idea of React: UI updates automatically when state changes.💡 Student Challenge: Add another button that decreases the counter, and a reset button that sets it back to zero.

Jonny Peterson

Read more