Scribd
Upload
26 views16 pages

Genlab IB

The document outlines a React JS Basics Internship Program, detailing prerequisites such as HTML, CSS, JavaScript, and Node.js. It covers key concepts including components, JSX, and the structure of a component tree, along with installation instructions and rules for creating React components. The document emphasizes the importance of reusable components and provides examples to illustrate these concepts.

Uploaded by

sujithirasujisuji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views16 pages

Genlab IB

The document outlines a React JS Basics Internship Program, detailing prerequisites such as HTML, CSS, JavaScript, and Node.js. It covers key concepts including components, JSX, and the structure of a component tree, along with installation instructions and rules for creating React components. The document emphasizes the importance of reusable components and provides examples to illustrate these concepts.

Uploaded by

sujithirasujisuji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Genlab IB

REACT JS
BASICS
Internship Program
TABLE OF CONTENT
lets dive into React js basics

pre-requisites

Node.js installation

Vite Package Manager

Components

JSX

Next steps.....
PRE- REQUISITES
HTML

CSS

JAVASCRIPT

GITHUB

NPM

NODE.JS
Lets Quickly Revise
JS Topics

Copy code from here


JS ES6 CONCEPTS
Arrow Functions Let and Const

Template Literals Promises and

Destructuring Async/Await
Spread and Rest
Map, Filter, and Reduce
Operators (...)
Conditional Rendering
Modules (Import and
Export)
NODE INSTALLATION

DOWNLOAD NOW
Create the React App with Vite
npm create vite@latest my-react-app

Install Dependencies

cd my-react-app

npm install

Run the Server


npm run dev
What are React Components?
Definition: React components are reusable,
independent pieces of UI. They work like JavaScript
functions but return React elements (HTML-like
structures).
Key Idea: Components allow you to split the UI into
smaller, reusable pieces for better code
maintainability.
Types of Components
Functional Components
Class Components

Written as JavaScript functions.


Simpler, easier to read, and often used with React hooks.

Example

const Welcome = () => (


<div>
<h1>Hello students</h1>
<p>Welcome to React.js Course</p>
</div>
);
Rules for Creating React Components :
Component Naming :

Components should start with a capital letter (e.g., MyComponent).


This helps React distinguish between DOM elements and custom components.

Returning JSX :

Components must return a valid JSX (or null if no UI is needed).

Single Responsibility Principle :

Each component should have a clear and single responsibility.


Example: A Header component should only handle the website's header.
What is a Component Tree?
Definition : A visual representation of how components are organized and nested in a React
application

Structure of a Component Tree :


Root Component:
Every React app starts with a root component (e.g., App).
Child Components:
The root component can render multiple child components.
Nested Components:
Child components can have their own child components, creating a
hierarchical structure.
Lets see this
in action
LETS LEARN JSX
Understanding JSX in React
Definition: JSX is a syntax extension that lets you write HTML elements
in JavaScript and place them in the DOM.

const Greeting = () => {


const name = "John";
return <h1>Hello, {name}!</h1>
};

Explanation:
<h1>Hello, {name}!</h1> looks like HTML but is actually JSX.
{name} is a JavaScript expression, and the curly braces allow
embedding dynamic values.
Important Rules in JSX :
className in JSX :
In JSX, you must use className instead of class because class is
a reserved keyword in JavaScript.

const element = <div className="container">Hello!</div>;

Self-Closing Tags

Tags without children must always be self-closing in JSX return (


<>
const element = <img src="logo.png" alt="Logo" />;
<h1>Title</h1>
Fragments <p>Description</p>
Fragments allow you to group multiple JSX elements </>
);
without adding extra nodes to the DOM

const element = <img src="logo.png" alt="Logo" />;


Check Your Whatsapp Group
For The Final Code.

Keep Learning!!!

You might also like