0% found this document useful (0 votes)
33 views12 pages

Day15

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
0% found this document useful (0 votes)
33 views12 pages

Day15

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/ 12

Javascript & React

Date:15.07.2024 Session: F.N & A.N

www.aloinfotech.in
Linking JavaScript to Html
Inline JavaScript
<body>
<script>
console.log('Hello from inline JavaScript!');
</script>
</body>

External JavaScript
<body>
<script src="script.js"></script>
</body>
DOM manipulation
DOM (Document Object Model) manipulation in JavaScript allows you to dynamically change the
content, structure, and style of your HTML documents.

Accessing Elements & Modifying Styles

• getElementById
• getElementsByClassName
• getElementsByTagName
• style Property
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Example</title>
</head>
<body>
<h1 id="main-heading">Hello, World!</h1>
<p class="text">This is a paragraph.</p>
<p class="text">This is another paragraph.</p>
<button onclick="changeContent()">Change Content</button>
<script>
// Access elements
const heading = document.getElementById('main-heading');
const paragraphs = document.getElementsByClassName('text');
const firstParagraph = document.querySelector('.text');
const allParagraphs = document.querySelectorAll('.text');

// Modify content
function changeContent() {
heading.textContent = 'Hello, JavaScript!';
firstParagraph.textContent = 'This paragraph has been changed.';
}
// Modify Style
function changeStyle() {
const heading = document.getElementById('main-heading');
heading.style.color = 'blue';
heading.style.fontSize = '3em';
heading.style.textAlign = 'center';
}
</script>
</body>
</html>
Events in JavaScript
Events in JavaScript are actions or occurrences that happen in the browser that can be detected
and responded to. Events are a crucial part of making web pages interactive.
Event Types
Mouse Events: click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove
Keyboard Events: keydown, keyup, keypress
Form Events: submit, reset, focus, blur, change, input
Window Events: load, resize, scroll, unload
Touch Events: touchstart, touchmove, touchend
React
React is a popular JavaScript library for building user interfaces, particularly single-page applications

where you need a fast, interactive user experience.

Developed by Facebook, React allows developers to create large web applications that can update and

render efficiently in response to data changes.


v Components are the building blocks of a React application. They encapsulate HTML,
CSS, and JavaScript to create a reusable piece of the UI.
v JSX (JavaScript XML) is a syntax extension that allows writing HTML-like code within
JavaScript. It makes the code easier to write and understand.
v Props (properties) are used to pass data from one component to another, making
components reusable and configurable.
v State is an object that holds data that may change over the lifecycle of the component.
When the state changes, the component re-renders to reflect the new state.
v Hooks are functions that let you use state and other React features in functional
components. Common hooks include useState, useEffect, and useContext.
Installation in react
Step 1: Install Node.js and npm
React requires Node.js and npm (Node Package Manager). You can download and install Node.js from
the official website, which includes npm.
Download Node.js from
Run the installer and follow the installation instructions.
After installation, open Command Prompt or PowerShell and verify the installation by running:
Step 2: Install Create React App
Create React App is a command-line tool that sets up a new React project with a lot of the necessary
configuration already done for you.

v npm install -g create-react-app

Create a New React App Using npx(Node Package eXecute)

v npx create-react-app myapp

Step 3: Start the Development Server

v npm start

This command will start the development server and automatically open your new React application
in the default web browser. The default URL is http://localhost:3000.
Folder Structure Explanation:
public/:

Contains static assets and the index.html file.


The index.html file is the main HTML file where your React application is rendered. It's typically the only HTML
file you directly modify.

Other Files and Directories:

.gitignore: Specifies files and directories that should be ignored by version control (e.g., node_modules).
package.json: Manifest file that lists the project dependencies and scripts.
README.md: Project documentation that includes information about the project, how to install and run it, and
other relevant details.
src/:
Contains all the source code for your React application.
assets/: Stores images, fonts, or any other static resources used in your application.
components/: Contains reusable UI components. Each component is usually stored in its own
directory with its own styles and tests.
pages/: Contains top-level components that represent different pages of your application. Each
page may consist of multiple components.
services/: Includes API services, utility functions, or any other services used throughout your
application.
styles/: Stores CSS or SCSS stylesheets for your components and pages.
App.js: The root component of your application, which typically sets up routes and renders other
components.
index.js: The entry point of your application where React is initialized and the app is rendered into
the DOM.
Exporting and Importing components, functions, or any other values between files is
essential for organizing and reusing code across your application

Exporting
You can export values (functions, variables, components, etc.) from a file using the export
keyword.

Named Exports: Exporting multiple values from a file.


Default Export: Exporting a single value as the default export.

Importing
You can import exported values into another file using the import statement.
Named Imports: Importing specific exported values by their names.

Default Import: Importing the default export from a file.

You might also like