Day 57: Basics of React and Event Handling

Setting Up Your Development Environment:

  1. Install Node.js:
  • Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of a web browser. Visit the Node.js website ( and download the latest version of Node.js for your operating system. Follow the installation instructions to install Node.js on your computer.
  1. Create a New React App:
  • Once Node.js is installed, open your terminal or command prompt and run the following command to create a new React app:
    npx create-react-app my-react-app
  • Replace my-react-app with the name of your project. This command will create a new directory with all the necessary files and dependencies for a React app.
  1. Start the Development Server:
  • Navigate to the directory of your newly created React app and run the following command to start the development server:
    cd my-react-app npm start
  • This command will start the development server and open your default web browser to http://localhost:3000, where you can see your React app running.

Understanding React Components:

At the heart of React development are components, which are reusable building blocks for creating user interfaces. React components can be functional or class-based, and they encapsulate both the structure and behavior of UI elements.

Creating Your First React Component:

Let’s create a simple functional component called HelloWorld that renders a greeting message:

import React from 'react';

const HelloWorld = () => {
  return <h1>Hello, World!</h1>;

export default HelloWorld;

In this example:

  • We import the React library, which is necessary for creating React components.
  • We define a functional component named HelloWorld using the arrow function syntax.
  • Inside the component, we return a JSX element <h1>Hello, World!</h1>.
  • Finally, we export the HelloWorld component so that it can be imported and used in other parts of our application.

Event Handling in React:

React provides a straightforward way to handle user events such as clicks, input changes, and form submissions. Here’s an example of handling a click event:

import React from 'react';

const Button = () => {
  const handleClick = () => {
    alert('Button clicked!');

  return <button onClick={handleClick}>Click Me</button>;

export default Button;

Exploring React Hooks:

Hooks are functions that enable functional components to use state and other React features without needing to write a class. Let’s explore a couple of hooks:

  1. useState Hook:
  • useState allows functional components to manage local state. Here’s an example:
   import React, { useState } from 'react';

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

     const increment = () => {
       setCount(count + 1);

     return (
         <p>Count: {count}</p>
         <button onClick={increment}>Increment</button>

   export default Counter;
  1. useEffect Hook:
  • useEffect enables functional components to perform side effects, such as data fetching or DOM manipulation, after render. Example:
   import React, { useState, useEffect } from 'react';

   const DataFetcher = () => {
     const [data, setData] = useState(null);

     useEffect(() => {
         .then(response => response.json())
         .then(data => setData(data))
         .catch(error => console.error(error));
     }, []);

     return <div>{data ? <p>Data: {data}</p> : <p>Loading...</p>}</div>;

   export default DataFetcher;

Leave a Reply

Your email address will not be published. Required fields are marked *