Getting Started with React.js: A Beginner's Guide

Introduction

React.js is one of the most popular JavaScript libraries for building interactive user interfaces. Created by Facebook, it allows developers to build fast and scalable web applications with reusable components.

In this guide, we will go through the basics of React.js, helping you set up your first React app.

Prerequisites

Before getting started with React, make sure you have the following installed:

• Node.js and npm: You can download and install them from nodejs.org.
• A code editor: VS Code is recommended.

Setting Up a React Project

The easiest way to start a React project is by using Create React App. Open your terminal and run:

npx create-react-app my-app
cd my-app
npm start

This will create a new React project and start the development server.

Understanding React Components

React is built using components, which are reusable UI elements. Here’s an example of a simple functional component:

import React from 'react';

function Greeting() {
  return <h1>Hello, World!</h1>;
}

export default Greeting;

You can use this component in your App.js like this:

import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

export default App;

Adding State with Hooks

React introduced hooks in version 16.8, making it easier to manage state in functional components using the useState hook.

Example:

import React, { useState } from 'react';

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

This was a basic introduction to React.js. From here, you can explore more advanced concepts like props, lifecycle methods, and API integration.Want to learn more? Check out the official React documentation: react.dev.
Happy coding! 🚀