10:I[3119,["/_next/static/immutable/chunks/1svjebirrq70e.js","/_next/static/immutable/chunks/1ax7f6dd63ux6.js","/_next/static/immutable/chunks/0317jjtk3t8hk.js","/_next/static/immutable/chunks/2glzjxfqcqe97.js","/_next/static/immutable/chunks/3q4aui98_sm0i.js"],"SiteLayout"] 13:I[22016,["/_next/static/immutable/chunks/1svjebirrq70e.js","/_next/static/immutable/chunks/1ax7f6dd63ux6.js","/_next/static/immutable/chunks/0317jjtk3t8hk.js","/_next/static/immutable/chunks/2glzjxfqcqe97.js","/_next/static/immutable/chunks/3q4aui98_sm0i.js"],""] 11:T4a78,Experiment 2 | Basics of React.js 1. Aim 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. --- 2. 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 Experiment2/ │ ├── src/ │ ├── App.js │ └── index.js │ ├── public/ │ └── index.html │ ├── package.json └── ... ``` --- 3. 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: ```bash npx create-react-app experiment2 ``` Move into the project directory: ```bash cd experiment2 ``` Start the React application: ```bash npm 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 import React from "react"; class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count + 1 }); }; decrement = () => { this.setState({ count: this.state.count - 1 }); }; render() { return (

Counter Using Class Component

Count: {this.state.count}

); } } export default Counter; ``` Explanation The component is created using: ```javascript class Counter extends React.Component { ``` The initial state is: ```javascript this.state = { count: 0 }; ``` The increment function increases the counter: ```javascript increment = () => { this.setState({ count: this.state.count + 1 }); }; ``` The decrement function decreases the counter: ```javascript decrement = () => { this.setState({ count: this.state.count - 1 }); }; ``` The current value is displayed using: ```javascript

Count: {this.state.count}

``` The buttons call the corresponding functions: ```javascript ``` --- 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 const [state, setState] = useState(initialValue); ``` Here: `state` contains the current value. `setState` updates the value. `initialValue` is the starting value. --- Complete Program `App.js` ```javascript import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; const decrement = () => { setCount(count - 1); }; return (

Counter Using Functional Component

Count: {count}

); } export default Counter; ``` Explanation The `useState` Hook is imported: ```javascript import React, { useState } from "react"; ``` The counter state is created using: ```javascript const [count, setCount] = useState(0); ``` Initially, `count` is `0`. To increase the counter: ```javascript setCount(count + 1); ``` To decrease the counter: ```javascript setCount(count - 1); ``` The current counter value is displayed using JSX: ```javascript

Count: {count}

``` --- 3.5 Handling Button Click Events in Functional Components Explanation React handles events using event handler properties such as: ```text onClick onChange onSubmit onMouseOver onMouseOut onKeyDown onKeyUp ``` For a button click, React uses the `onClick` event. The function should be passed to `onClick` without immediately calling it. Correct: ```javascript ``` Incorrect: ```javascript ``` --- Complete Program `App.js` ```javascript import React, { useState } from "react"; function ButtonClickExample() { const [message, setMessage] = useState("Click the button"); const handleClick = () => { setMessage("Button clicked successfully!"); }; return (

Button Click Event

{message}

); } export default ButtonClickExample; ``` Explanation The state stores the message: ```javascript const [message, setMessage] = useState("Click the button"); ``` The click handler is: ```javascript const handleClick = () => { setMessage("Button clicked successfully!"); }; ``` The handler is connected to the button using: ```javascript ``` 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 import React, { useState } from "react"; function ConditionalExample() { const [isLoggedIn, setIsLoggedIn] = useState(false); if (isLoggedIn) { return (

Welcome User

); } else { return (

Please Login

); } } export default ConditionalExample; ``` Explanation The condition is: ```javascript if (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 condition ? valueIfTrue : valueIfFalse ``` Complete Program ```javascript import React, { useState } from "react"; function ConditionalExample() { const [isLoggedIn, setIsLoggedIn] = useState(false); return (

{isLoggedIn ? "Welcome User" : "Please Login"}

); } export default ConditionalExample; ``` Explanation The following expression checks the condition: ```javascript isLoggedIn ? "Welcome User" : "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 import React, { useState } from "react"; function ConditionalExample() { const [showMessage, setShowMessage] = useState(false); return (

Conditional Rendering

{showMessage && (

This message is conditionally rendered.

)}

); } export default ConditionalExample; ``` Explanation The following condition: ```javascript {showMessage && (

This message is conditionally rendered.

)} ``` 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 const name = 'React'; ``` --- Type 2: Double-Quoted String ```javascript const name = "React"; ``` --- Type 3: Template Literal Template literals use backticks: ```javascript const name = `React`; ``` Template literals are especially useful when displaying variables inside strings. This is called string interpolation. Syntax ```javascript `Text ${variable}` ``` --- Complete React Program `App.js` ```javascript import React from "react"; function StringLiteralExample() { const name = "React"; const topic = "String Literals"; const count = 5; const message = `Welcome to ${name} ${topic}.`; const result = `The current count is ${count}.`; return (

{message}

{result}

{'This text uses single quotes.'}

{"This text uses double quotes."}

{`This text uses a template literal.`}

); } export default StringLiteralExample; ``` Explanation A normal string can be created using double quotes: ```javascript const name = "React"; ``` A template literal can combine text and variables: ```javascript const message = `Welcome to ${name} ${topic}.`; ``` The `${}` syntax inserts the value of a variable into the string. The result displayed in the browser is: ```text Welcome to React String Literals. ``` --- 4. Complete Experiment Program The following program combines all five requirements into one React application. `App.js` ```javascript import React, { useState } from "react"; // ================================================== // 1. COUNTER USING FUNCTIONAL COMPONENT // ================================================== function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; const decrement = () => { setCount(count - 1); }; return (

Counter

Count: {count}

); } // ================================================== // 2. BUTTON CLICK EVENT // ================================================== function ButtonClickExample() { const [message, setMessage] = useState("Click the button"); const handleClick = () => { setMessage( "Button clicked successfully!" ); }; return (

Button Click Event

{message}

); } // ================================================== // 3. CONDITIONAL RENDERING // ================================================== function ConditionalExample() { const [isVisible, setIsVisible] = useState(false); return (

Conditional Rendering

{isVisible && (

This component is conditionally rendered.

)}

); } // ================================================== // 4. STRING LITERALS // ================================================== function StringLiteralExample() { const name = "React"; const topic = "Basics"; const message = `Welcome to ${name} ${topic}!`; return (

String Literals

{message}

{'This is a single-quoted string.'}

{"This is a double-quoted string."}

{`This is a template literal.`}

); } // ================================================== // MAIN APP COMPONENT // ================================================== function App() { return (

Experiment 2 - Basics of React.js

); } export default App; ``` --- 5. Class Component Program For requirement (a), use the following complete `App.js` program separately. ```javascript import React from "react"; class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count + 1 }); }; decrement = () => { this.setState({ count: this.state.count - 1 }); }; render() { return (

Counter Using Class Component

Count: {this.state.count}

); } } export default Counter; ``` --- 6. Functional Component Program For requirement (b), use the following complete `App.js` program separately. ```javascript import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return (

Counter Using Functional Component

Count: {count}

); } export default Counter; ``` --- 7. Output / Observation Counter Using Class Component The browser displays a counter with Increment and Decrement buttons. Initially: ```text Count: 0 ``` Clicking Increment changes the count: ```text Count: 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 Click the button ``` After clicking the button: ```text Button clicked successfully! ``` --- Conditional Rendering Initially, the conditional message is hidden. After clicking Show Message: ```text This component is conditionally rendered. ``` Clicking the button again hides the message. --- String Literals The browser displays: ```text Welcome to React Basics! This is a single-quoted string. This is a double-quoted string. This is a template literal. ``` --- 8. Execution Flow ```text Start ↓ Create React Application ↓ Create React Component ↓ Create Class Component ↓ Create Functional Component ↓ Initialize Counter State ↓ Handle Button Click ↓ Update State ↓ Render Updated Component ↓ Check Conditional Expression ↓ Render or Hide Component ↓ Display String Literals ↓ Observe Output ↓ End ``` --- 9. Step Summary Step 1 Create the React application using: ```bash npx create-react-app experiment2 ``` Step 2 Move into the project directory: ```bash cd experiment2 ``` Step 3 Start the React application: ```bash npm 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. --- 10. 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.2:["$","html",null,{"lang":"en","data-scroll-behavior":"smooth","className":"dark montserrat_f2defe12-module__DBq-IG__variable jetbrains_mono_6104e6b7-module__s6uLTa__variable","style":{"colorScheme":"dark"},"children":["$","body",null,{"children":[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://yt.galatfamily.in/#website\",\"url\":\"https://yt.galatfamily.in\",\"name\":\"Galat Family\",\"description\":\"Notes, code walkthroughs and documentation for every video from the Galat Family team.\",\"publisher\":{\"@id\":\"https://galatfamily.in/#organization\"},\"inLanguage\":\"en\",\"potentialAction\":{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://yt.galatfamily.in/search?q={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}},{\"@type\":\"Organization\",\"@id\":\"https://galatfamily.in/#organization\",\"name\":\"Galat Family\",\"url\":\"https://galatfamily.in\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://galatfamily.in/galatfamily.jpg\"},\"sameAs\":[\"https://instagram.com/thegalatfamily\",\"https://twitter.com/galat_family\",\"https://www.youtube.com/@teamgalatfamily1\"],\"contactPoint\":{\"@type\":\"ContactPoint\",\"email\":\"contact.galatfamily@gmail.com\",\"contactType\":\"Customer Support\"}}]}"}}],["$","$L10",null,{"bundle":{"topics":[],"tags":[],"playlists":[{"id":"8af1edbc-c1a7-48ac-8e66-b15ba723f15a","slug":"computer-vision-and-machine-learning-lab-cvml-lab-b-tech-lab-experimen","title":"COMPUTER VISION AND MACHINE LEARNING LAB | CVML LAB | B.Tech Lab Experiments 💻","description":"Imported from YouTube · 7 videos","topic":"","difficulty":"Beginner","featured":false,"position":1,"status":"published"},{"id":"a220d4c5-29ba-4343-8fe7-f01833d68441","slug":"full-stack-development-ii-lab-fsd-ii-b-tech-lab-experiments","title":"FULL STACK DEVELOPMENT - II LAB | FSD - II | B.Tech Lab Experiments 💻","description":"Imported from YouTube · 4 videos","topic":"","difficulty":"Beginner","featured":false,"position":2,"status":"published"}],"videos":[{"id":"ed7352fa-105f-4175-a578-19afc599ec21","slug":"cvml-experiment-6-image-classification-using-svm-knn-machine-learning-","title":"CVML Experiment 6: Image Classification Using SVM & KNN | Machine Learning @TeamGalatFamily1","description":"","youtubeId":"u6ZtKvxt3wM","duration":"","playlist":"computer-vision-and-machine-learning-lab-cvml-lab-b-tech-lab-experimen","topics":[],"tags":[],"publishedAt":"2026-08-19","featured":false,"position":1,"status":"published"},{"id":"6b09ad76-3515-442a-9b05-17effb04832d","slug":"cvml-experiment-5-face-detection-using-haar-cascades-dnn-models-opencv","title":"CVML Experiment 5: Face Detection Using Haar Cascades & DNN Models | OpenCV @TeamGalatFamily1","description":"","youtubeId":"oJMtjA3iOu4","duration":"","playlist":"computer-vision-and-machine-learning-lab-cvml-lab-b-tech-lab-experimen","topics":[],"tags":[],"publishedAt":"2026-08-19","featured":false,"position":2,"status":"published"},{"id":"84cd7c00-d6ab-490f-a7d5-95dc5bfc5b89","slug":"cvml-experiment-4-feature-extraction-using-hog-sift-orb-opencv-teamgal","title":"CVML Experiment 4: Feature Extraction Using HOG, SIFT & ORB | OpenCV @TeamGalatFamily1","description":"","youtubeId":"Ok2Rc_wDr78","duration":"","playlist":"computer-vision-and-machine-learning-lab-cvml-lab-b-tech-lab-experimen","topics":[],"tags":[],"publishedAt":"2026-08-19","featured":false,"position":3,"status":"published"},{"id":"6759f5b9-ca6b-4c1c-9c60-e1fa897a8f62","slug":"cvml-experiment-3-object-detection-using-contours-bounding-boxes-openc","title":"CVML Experiment 3: Object Detection Using Contours & Bounding Boxes | OpenCV @TeamGalatFamily1","description":"","youtubeId":"0Ep0M_V_3do","duration":"","playlist":"computer-vision-and-machine-learning-lab-cvml-lab-b-tech-lab-experimen","topics":[],"tags":[],"publishedAt":"2026-08-19","featured":false,"position":4,"status":"published"},{"id":"148726be-144a-4d01-96fa-52795c73b6ce","slug":"cvml-experiment-2-edge-detection-using-sobel-canny-laplacian-opencv-te","title":"CVML Experiment 2: Edge Detection Using Sobel, Canny & Laplacian | OpenCV @TeamGalatFamily1","description":"","youtubeId":"kmeL6kckZTE","duration":"","playlist":"computer-vision-and-machine-learning-lab-cvml-lab-b-tech-lab-experimen","topics":[],"tags":[],"publishedAt":"2026-08-19","featured":false,"position":5,"status":"published"},{"id":"61fbc003-1cd2-49a4-8a52-8cad719ccd25","slug":"fsd-lab-2-experiment-3-important-react-js-concepts-hooks-props-forms-m","title":"FSD Lab 2 Experiment 3: Important React.js Concepts | Hooks, Props, Forms & map() |@TeamGalatFamily1","description":"","youtubeId":"qOFrFVsmWSY","duration":"","playlist":"full-stack-development-ii-lab-fsd-ii-b-tech-lab-experiments","topics":["FSD 2 LAB"],"tags":[],"publishedAt":"2026-08-17","featured":false,"position":6,"status":"published"},{"id":"7df43b81-b7bd-422b-8f73-1d160d1151f4","slug":"fsd-lab-2-experiment-2-basics-of-react-js-components-events-rendering-","title":"FSD Lab 2 Experiment 2: Basics of React.js | Components, Events & Rendering | @TeamGalatFamily1","description":"","youtubeId":"0NvalYTn4u0","duration":"","playlist":"full-stack-development-ii-lab-fsd-ii-b-tech-lab-experiments","topics":["FSD 2 LAB"],"tags":[],"publishedAt":"2026-08-17","featured":false,"position":7,"status":"published"},{"id":"5ea31ba5-6b4b-4cdf-9bc6-0a0359ce2366","slug":"fsd-lab-2-experiment-1-modern-javascript-dom-selectors-events-function","title":"FSD Lab 2 Experiment 1: Modern JavaScript & DOM | Selectors, Events & Functions @TeamGalatFamily1","description":"","youtubeId":"6fS73bhKnr0","duration":"","playlist":"full-stack-development-ii-lab-fsd-ii-b-tech-lab-experiments","topics":["FSD 2 LAB"],"tags":[],"publishedAt":"2026-08-15","featured":false,"position":8,"status":"published"},{"id":"f3a0f19a-daa1-495d-b99f-a80315b37b38","slug":"full-stack-development-explained-frontend-backend-databases-react-team","title":"Full Stack Development Explained: Frontend, Backend & Databases | React @TeamGalatFamily1","description":"","youtubeId":"jhUbC0KZChk","duration":"","playlist":"full-stack-development-ii-lab-fsd-ii-b-tech-lab-experiments","topics":[],"tags":[],"publishedAt":"2026-08-15","featured":false,"position":9,"status":"published"},{"id":"ea64509e-2b3f-4a42-b5b6-d6bfdae1c5a8","slug":"cvml-experiment-1-image-reading-basic-operations-opencv-teamgalatfamil","title":"CVML Experiment 1: Image Reading & Basic Operations | OpenCV @TeamGalatFamily1","description":"","youtubeId":"oY2MXx5qr74","duration":"","playlist":"computer-vision-and-machine-learning-lab-cvml-lab-b-tech-lab-experimen","topics":[],"tags":[],"publishedAt":"2026-08-15","featured":false,"position":10,"status":"published"},{"id":"2f981acb-be4d-4378-81e8-10eeb3b81f1a","slug":"introduction-to-cvml-computer-vision-machine-learning-basics-teamgalat","title":"Introduction to CVML | Computer Vision & Machine Learning Basics @TeamGalatFamily1","description":"","youtubeId":"YcrXjEgftxE","duration":"","playlist":"computer-vision-and-machine-learning-lab-cvml-lab-b-tech-lab-experimen","topics":[""],"tags":[],"publishedAt":"2026-08-15","featured":false,"position":11,"status":"published"},{"id":"74c6f4c5-2d11-441a-8b05-2963e2007476","slug":"vs-code-made-simple-install-setup-start-coding-galatfamily-teamgalatfa","title":"VS Code Made Simple: Install, Setup & Start Coding | GalatFamily @TeamGalatFamily1","description":"","youtubeId":"35cnueR-U-s","duration":"","playlist":"","topics":[],"tags":[],"publishedAt":"2026-08-15","featured":false,"position":12,"status":"published"},{"id":"59f3b6db-80cc-4bc8-b278-1d74dd698935","slug":"cvml-experiment-9-pca-for-feature-reduction-visualization-scikit-learn","title":"CVML Experiment 9: PCA for Feature Reduction & Visualization | Scikit-Learn @TeamGalatFamily1","description":"","youtubeId":"H-vTaTB3Odg","duration":"","playlist":"","topics":[],"tags":[],"publishedAt":"2026-08-19","featured":false,"position":13,"status":"published"},{"id":"317b7a02-a525-402e-bb08-fb326bc6a18d","slug":"cvml-experiment-8-logistic-regression-for-binary-classification-scikit","title":"CVML Experiment 8: Logistic Regression for Binary Classification | Scikit-Learn @TeamGalatFamily1","description":"","youtubeId":"neWyZzv88LQ","duration":"","playlist":"","topics":[],"tags":[],"publishedAt":"2026-08-19","featured":false,"position":14,"status":"published"},{"id":"102c550e-630a-483e-9002-f90420e7e5ec","slug":"cvml-experiment-7-decision-tree-classifier-using-scikit-learn-train-ev","title":"CVML Experiment 7: Decision Tree Classifier Using Scikit-Learn | Train & Evaluate @TeamGalatFamily1","description":"","youtubeId":"teEsiNAwAR4","duration":"","playlist":"","topics":[],"tags":[],"publishedAt":"2026-08-19","featured":false,"position":15,"status":"published"}],"docs":[{"id":"2d27c4eb-2958-498d-b676-a35d7b5d7309","slug":"FSD-2 LAB-2,REACT JS ,BASICS OF REACT JS","title":"FULL STACK DEVELOPMENT-2 LAB-2 BASICS OF REACT JS","description":"","kind":"Notes","fileType":"MD","fileSize":"0.02","fileUrl":null,"updatedAt":"2026-08-19","topics":["REACTJS"],"tags":["REACTJS"],"playlist":null,"video":"fsd-lab-2-experiment-2-basics-of-react-js-components-events-rendering-","readingMinutes":0,"popularity":0,"badge":null,"body":"$11","position":0,"status":"published"}]},"children":"$L12"}]]}]}] 5:["$","div",null,{"className":"container-page py-12","children":[["$","header",null,{"children":[["$","nav",null,{"aria-label":"Breadcrumb","children":["$","ol",null,{"className":"flex flex-wrap items-center gap-1 text-xs text-muted-foreground","children":[["$","li",null,{"children":["$","$L13",null,{"href":"/","className":"transition-colors hover:text-foreground","children":"Home"}]}],[["$","li","Docs",{"className":"flex items-center gap-1","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right size-3 opacity-50","aria-hidden":true,"children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}],["$","span",null,{"className":"text-foreground","children":"Docs"}]]}]]]}]}],["$","p",null,{"className":"eyebrow mt-6","children":"Resources"}],["$","h1",null,{"className":"mt-3 text-3xl font-bold tracking-[-0.03em] sm:text-4xl","children":"Documentation & Notes"}],["$","p",null,{"className":"mt-4 max-w-2xl text-base leading-8 text-muted-foreground","children":"Comprehensive notes, cheatsheets, source code and reference guides for every video on the channel."}],["$","p",null,{"className":"mt-5 font-mono text-[0.6875rem] text-muted-foreground","children":"1 document"}]]}],["$","div",null,{"className":"mt-12","children":[["$","div",null,{"className":"mb-8 flex items-end justify-between gap-6","children":[["$","div",null,{"children":[["$","p",null,{"className":"eyebrow","children":"All docs"}],["$","h2",null,{"className":"mt-2 text-2xl font-bold sm:text-3xl","children":"Browse library"}]]}],"$undefined"]}],["$","div",null,{"className":"grid gap-4 sm:grid-cols-2 lg:grid-cols-3","children":[["$","$L13","FSD-2 LAB-2,REACT JS ,BASICS OF REACT JS",{"href":"/docs/FSD-2 LAB-2,REACT JS ,BASICS OF REACT JS","className":"surface-card surface-card-hover group flex flex-col p-5","children":[["$","div",null,{"className":"flex items-center justify-between gap-3","children":[["$","span",null,{"className":"inline-flex items-center gap-2","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-file-text size-4 text-muted-foreground","aria-hidden":"true","children":[["$","path","1oefj6",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["$","path","wfsgrz",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["$","path","b1mrlr",{"d":"M10 9H8"}],["$","path","t4e002",{"d":"M16 13H8"}],["$","path","z1uh3a",{"d":"M16 17H8"}],"$undefined"]}],["$","span",null,{"className":"font-mono text-[0.625rem] tracking-widest text-muted-foreground","children":"MD"}]]}],null]}],["$","h3",null,{"className":"mt-4 text-base font-semibold","children":"FULL STACK DEVELOPMENT-2 LAB-2 BASICS OF REACT JS"}],["$","p",null,{"className":"mt-1.5 line-clamp-2 text-sm leading-6 text-muted-foreground","children":""}],["$","div",null,{"className":"mt-5 flex items-center gap-3 font-mono text-[0.625rem] text-muted-foreground","children":[["$","span",null,{"children":"Notes"}],["$","span",null,{"children":"·"}],["$","span",null,{"children":"0.02"}],false]}],["$","span",null,{"className":"mt-4 inline-flex items-center gap-1 text-xs font-semibold text-muted-foreground transition-colors group-hover:text-foreground","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-play size-3","aria-hidden":"true","children":[["$","path","10ikf1",{"d":"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"}],"$undefined"]}]," Preview"]}]]}]]}]]}]]}]