Notes

FULL STACK DEVELOPMENT-2 LAB-2 BASICS OF REACT JS

MD · 0.02 · Updated Aug 19, 2026

Downloads

Choose the format you prefer.

Experiment 2 | Basics of React.js

To understand and implement the basic concepts of React.js by creating counter applications using class and functional components, handling button click events, conditionally rendering components, and displaying text using string literals. ---

Requirements

Software Node.js VS Code or any code editor Web Browser — Google Chrome / Microsoft Edge / Firefox Technologies React.js JavaScript JSX HTML CSS Project Structure

Text

01Experiment2/02│03├── src/04│   ├── App.js05│   └── index.js06│07├── public/08│   └── index.html09│10├── package.json11└── ...

Explanation and Implementation

3.1 Introduction to React.js Explanation React.js is a JavaScript library used to build user interfaces. React applications are built using components. A component is a reusable part of the user interface. React mainly provides two commonly used approaches for creating components: Class Components Functional Components In this experiment, both approaches are demonstrated. --- 3.2 Creating a React Application A React application can be created using a React project setup. For a simple laboratory experiment, create the project using:

Shell

01npx create-react-app experiment2

Move into the project directory:

Shell

01cd experiment2

Start the React application:

Shell

01npm start

The application will open in the browser. --- 3.3 Counter Using React Class Component Explanation A class component is a React component created using a JavaScript class that extends React.Component. Class components can maintain their own state. For a counter application, the state stores the current counter value. The setState() method is used to update the state. Important Concepts React.Component — base class for class components. constructor() — initializes the component. this.state — stores component state. this.setState() — updates component state. render() — returns the JSX displayed by the component. --- Complete Program App.js

javascript

01import React from "react";02 03class Counter extends React.Component {04 05    constructor(props) {06        super(props);07 08        this.state = {09            count: 010        };11    }12 13    increment = () => {14        this.setState({15            count: this.state.count + 116        });17    };18 19    decrement = () => {20        this.setState({21            count: this.state.count - 122        });23    };24 25    render() {26 27        return (28            <div>29                <h1>Counter Using Class Component</h1>30 31                <h2>Count: {this.state.count}</h2>32 33                <button onClick={this.increment}>34                    Increment35                </button>36 37                <button onClick={this.decrement}>38                    Decrement39                </button>40            </div>41        );42    }43}44 45export default Counter;

Explanation The component is created using:

javascript

01class Counter extends React.Component {

The initial state is:

javascript

01this.state = {02    count: 003};

The increment function increases the counter:

javascript

01increment = () => {02    this.setState({03        count: this.state.count + 104    });05};

The decrement function decreases the counter:

javascript

01decrement = () => {02    this.setState({03        count: this.state.count - 104    });05};

The current value is displayed using:

javascript

01<h2>Count: {this.state.count}</h2>

The buttons call the corresponding functions:

javascript

01<button onClick={this.increment}>02    Increment03</button>04 05<button onClick={this.decrement}>06    Decrement07</button>

3.4 Counter Using React Functional Component Explanation A functional component is a JavaScript function that returns JSX. Modern React applications commonly use functional components with Hooks. The useState() Hook is used to store and update state in a functional component. Syntax

javascript

01const [state, setState] = useState(initialValue);

Here: state contains the current value. setState updates the value. initialValue is the starting value. --- Complete Program App.js

javascript

01import React, { useState } from "react";02 03function Counter() {04 05    const [count, setCount] = useState(0);06 07    const increment = () => {08        setCount(count + 1);09    };10 11    const decrement = () => {12        setCount(count - 1);13    };14 15    return (16        <div>17            <h1>Counter Using Functional Component</h1>18 19            <h2>Count: {count}</h2>20 21            <button onClick={increment}>22                Increment23            </button>24 25            <button onClick={decrement}>26                Decrement27            </button>28        </div>29    );30}31 32export default Counter;

Explanation The useState Hook is imported:

javascript

01import React, { useState } from "react";

The counter state is created using:

javascript

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

Initially, count is 0. To increase the counter:

javascript

01setCount(count + 1);

To decrease the counter:

javascript

01setCount(count - 1);

The current counter value is displayed using JSX:

javascript

01<h2>Count: {count}</h2>

3.5 Handling Button Click Events in Functional Components Explanation React handles events using event handler properties such as:

Text

01onClick02onChange03onSubmit04onMouseOver05onMouseOut06onKeyDown07onKeyUp

For a button click, React uses the onClick event. The function should be passed to onClick without immediately calling it. Correct:

javascript

01<button onClick={handleClick}>02    Click Me03</button>

Incorrect:

javascript

01<button onClick={handleClick()}>02    Click Me03</button>

Complete Program App.js

javascript

01import React, { useState } from "react";02 03function ButtonClickExample() {04 05    const [message, setMessage] =06        useState("Click the button");07 08    const handleClick = () => {09 10        setMessage("Button clicked successfully!");11 12    };13 14    return (15        <div>16 17            <h1>Button Click Event</h1>18 19            <p>{message}</p>20 21            <button onClick={handleClick}>22                Click Me23            </button>24 25        </div>26    );27}28 29export default ButtonClickExample;

Explanation The state stores the message:

javascript

01const [message, setMessage] =02    useState("Click the button");

The click handler is:

javascript

01const handleClick = () => {02 03    setMessage("Button clicked successfully!");04 05};

The handler is connected to the button using:

javascript

01<button onClick={handleClick}>02    Click Me03</button>

When the button is clicked, the handleClick() function executes and updates the message. --- 3.6 Conditional Rendering in React Explanation Conditional rendering means displaying different content depending on a condition. React can conditionally render components using: if...else Ternary operator Logical AND (&&) --- Type 1: Conditional Rendering Using if...else Complete Program

javascript

01import React, { useState } from "react";02 03function ConditionalExample() {04 05    const [isLoggedIn, setIsLoggedIn] =06        useState(false);07 08    if (isLoggedIn) {09 10        return (11            <div>12                <h1>Welcome User</h1>13 14                <button onClick={() => setIsLoggedIn(false)}>15                    Logout16                </button>17            </div>18        );19 20    } else {21 22        return (23            <div>24                <h1>Please Login</h1>25 26                <button onClick={() => setIsLoggedIn(true)}>27                    Login28                </button>29            </div>30        );31 32    }33}34 35export default ConditionalExample;

Explanation The condition is:

javascript

01if (isLoggedIn)

If isLoggedIn is true, the welcome message is displayed. If it is false, the login message is displayed. --- Type 2: Conditional Rendering Using Ternary Operator Syntax

javascript

01condition ? valueIfTrue : valueIfFalse

Complete Program

javascript

01import React, { useState } from "react";02 03function ConditionalExample() {04 05    const [isLoggedIn, setIsLoggedIn] =06        useState(false);07 08    return (09        <div>10 11            <h1>12                {isLoggedIn13                    ? "Welcome User"14                    : "Please Login"}15            </h1>16 17            <button18                onClick={() =>19                    setIsLoggedIn(!isLoggedIn)20                }21            >22                {isLoggedIn ? "Logout" : "Login"}23            </button>24 25        </div>26    );27}28 29export default ConditionalExample;

Explanation The following expression checks the condition:

javascript

01isLoggedIn02    ? "Welcome User"03    : "Please Login"

If isLoggedIn is true, "Welcome User" is displayed. If isLoggedIn is false, "Please Login" is displayed. --- Type 3: Conditional Rendering Using && The logical AND operator can display a component or element only when a condition is true. Complete Program

javascript

01import React, { useState } from "react";02 03function ConditionalExample() {04 05    const [showMessage, setShowMessage] =06        useState(false);07 08    return (09        <div>10 11            <h1>Conditional Rendering</h1>12 13            <button14                onClick={() =>15                    setShowMessage(!showMessage)16                }17            >18                Show Message19            </button>20 21            {showMessage && (22                <p>23                    This message is conditionally rendered.24                </p>25            )}26 27        </div>28    );29}30 31export default ConditionalExample;

Explanation The following condition:

javascript

01{showMessage && (02    <p>03        This message is conditionally rendered.04    </p>05)}

displays the paragraph only when showMessage is true. --- 3.7 Displaying Text Using String Literals Explanation String literals are used to represent text in JavaScript. Common ways of creating strings include: Single quotes ' hello ' Double quote " hello " Template literals using backticks hello --- Type 1: Single-Quoted String

javascript

01const name = 'React';

Type 2: Double-Quoted String

javascript

01const name = "React";

Type 3: Template Literal Template literals use backticks:

javascript

01const name = `React`;

Template literals are especially useful when displaying variables inside strings. This is called string interpolation. Syntax

javascript

01`Text ${variable}`

Complete React Program App.js

javascript

01import React from "react";02 03function StringLiteralExample() {04 05    const name = "React";06    const topic = "String Literals";07    const count = 5;08 09    const message =10        `Welcome to ${name} ${topic}.`;11 12    const result =13        `The current count is ${count}.`;14 15    return (16        <div>17 18            <h1>{message}</h1>19 20            <p>{result}</p>21 22            <p>23                {'This text uses single quotes.'}24            </p>25 26            <p>27                {"This text uses double quotes."}28            </p>29 30            <p>31                {`This text uses a template literal.`}32            </p>33 34        </div>35    );36}37 38export default StringLiteralExample;

Explanation A normal string can be created using double quotes:

javascript

01const name = "React";

A template literal can combine text and variables:

javascript

01const message =02    `Welcome to ${name} ${topic}.`;

The ${} syntax inserts the value of a variable into the string. The result displayed in the browser is:

Text

01Welcome to React String Literals.

Complete Experiment Program

The following program combines all five requirements into one React application. App.js

javascript

01import React, { useState } from "react";02 03 04// ==================================================05// 1. COUNTER USING FUNCTIONAL COMPONENT06// ==================================================07 08function Counter() {09 10    const [count, setCount] = useState(0);11 12    const increment = () => {13        setCount(count + 1);14    };15 16    const decrement = () => {17        setCount(count - 1);18    };19 20    return (21        <div>22 23            <h2>Counter</h2>24 25            <p>Count: {count}</p>26 27            <button onClick={increment}>28                Increment29            </button>30 31            <button onClick={decrement}>32                Decrement33            </button>34 35        </div>36    );37}38 39 40// ==================================================41// 2. BUTTON CLICK EVENT42// ==================================================43 44function ButtonClickExample() {45 46    const [message, setMessage] =47        useState("Click the button");48 49    const handleClick = () => {50 51        setMessage(52            "Button clicked successfully!"53        );54 55    };56 57    return (58        <div>59 60            <h2>Button Click Event</h2>61 62            <p>{message}</p>63 64            <button onClick={handleClick}>65                Click Me66            </button>67 68        </div>69    );70}71 72 73// ==================================================74// 3. CONDITIONAL RENDERING75// ==================================================76 77function ConditionalExample() {78 79    const [isVisible, setIsVisible] =80        useState(false);81 82    return (83        <div>84 85            <h2>Conditional Rendering</h2>86 87            <button88                onClick={() =>89                    setIsVisible(!isVisible)90                }91            >92                {isVisible93                    ? "Hide Message"94                    : "Show Message"}95            </button>96 97            {isVisible && (98                <p>99                    This component is conditionally rendered.100                </p>101            )}102 103        </div>104    );105}106 107 108// ==================================================109// 4. STRING LITERALS110// ==================================================111 112function StringLiteralExample() {113 114    const name = "React";115 116    const topic = "Basics";117 118    const message =119        `Welcome to ${name} ${topic}!`;120 121    return (122        <div>123 124            <h2>String Literals</h2>125 126            <p>{message}</p>127 128            <p>129                {'This is a single-quoted string.'}130            </p>131 132            <p>133                {"This is a double-quoted string."}134            </p>135 136            <p>137                {`This is a template literal.`}138            </p>139 140        </div>141    );142}143 144 145// ==================================================146// MAIN APP COMPONENT147// ==================================================148 149function App() {150 151    return (152        <div>153 154            <h1>Experiment 2 - Basics of React.js</h1>155 156            <Counter />157 158            <hr />159 160            <ButtonClickExample />161 162            <hr />163 164            <ConditionalExample />165 166            <hr />167 168            <StringLiteralExample />169 170        </div>171    );172}173 174export default App;

Class Component Program

For requirement (a), use the following complete App.js program separately.

javascript

01import React from "react";02 03class Counter extends React.Component {04 05    constructor(props) {06        super(props);07 08        this.state = {09            count: 010        };11    }12 13    increment = () => {14 15        this.setState({16            count: this.state.count + 117        });18 19    };20 21    decrement = () => {22 23        this.setState({24            count: this.state.count - 125        });26 27    };28 29    render() {30 31        return (32            <div>33 34                <h1>35                    Counter Using Class Component36                </h1>37 38                <h2>39                    Count: {this.state.count}40                </h2>41 42                <button onClick={this.increment}>43                    Increment44                </button>45 46                <button onClick={this.decrement}>47                    Decrement48                </button>49 50            </div>51        );52    }53}54 55export default Counter;

Functional Component Program

For requirement (b), use the following complete App.js program separately.

javascript

01import React, { useState } from "react";02 03function Counter() {04 05    const [count, setCount] = useState(0);06 07    return (08        <div>09 10            <h1>11                Counter Using Functional Component12            </h1>13 14            <h2>15                Count: {count}16            </h2>17 18            <button19                onClick={() =>20                    setCount(count + 1)21                }22            >23                Increment24            </button>25 26            <button27                onClick={() =>28                    setCount(count - 1)29                }30            >31                Decrement32            </button>33 34        </div>35    );36}37 38export default Counter;

Output / Observation

Counter Using Class Component The browser displays a counter with Increment and Decrement buttons. Initially:

Text

01Count: 0

Clicking Increment changes the count:

Text

01Count: 1

Clicking Decrement decreases the count. --- Counter Using Functional Component The functional component displays the counter using the useState() Hook. The count changes whenever the user clicks the buttons. --- Button Click Event Initially:

Text

01Click the button

After clicking the button:

Text

01Button clicked successfully!

Conditional Rendering Initially, the conditional message is hidden. After clicking Show Message:

Text

01This component is conditionally rendered.

Clicking the button again hides the message. --- String Literals The browser displays:

Text

01Welcome to React Basics!02 03This is a single-quoted string.04 05This is a double-quoted string.06 07This is a template literal.

Execution Flow

Text

01Start02  ↓03Create React Application04  ↓05Create React Component06  ↓07Create Class Component08  ↓09Create Functional Component10  ↓11Initialize Counter State12  ↓13Handle Button Click14  ↓15Update State16  ↓17Render Updated Component18  ↓19Check Conditional Expression20  ↓21Render or Hide Component22  ↓23Display String Literals24  ↓25Observe Output26  ↓27End

Step Summary

Step 1 Create the React application using:

Shell

01npx create-react-app experiment2

Step 2 Move into the project directory:

Shell

01cd experiment2

Step 3 Start the React application:

Shell

01npm start

Step 4 Implement a counter using a React class component. Step 5 Implement a counter using a React functional component and useState(). Step 6 Handle button click events using onClick. Step 7 Implement conditional rendering using if...else, the ternary operator, and &&. Step 8 Display strings using single quotes, double quotes, and template literals. Step 9 Run the application in the browser. Step 10 Observe the output of each React component. ---

Result

The basic concepts of React.js were successfully implemented. A counter was created using a React class component and a functional component. Button click events were handled using onClick, conditional rendering was implemented using different techniques, and text was displayed using JavaScript string literals and template literals.