React Notes

React Notes
React is a popular JavaScript library for building user interfaces. It was created by Facebook and
released in 2013 as an open-source project. React provides a declarative, component-based
approach to building web applications.
The main idea behind React is that each part of a user interface can be broken down into small,
reusable pieces called components. These components are defined using a syntax called JSX,
which allows developers to write HTML-like code that gets transformed into JavaScript at
runtime.
React also provides a virtual DOM (Document Object Model) that allows for efficient updates to
the user interface. When the state of a component changes, React compares the new state to
the previous state and updates only the parts of the DOM that need to change. This makes
React very fast and efficient, even for large, complex applications.
One of the key benefits of React is its strong ecosystem of third-party libraries and tools. There
are many libraries available for managing state, routing, styling, and more, as well as tools for
testing and debugging React applications.
React can be used with a variety of other technologies, such as Redux for managing state, React
Native for building mobile applications, and Next.js for server-side rendering and other
advanced features.
Overall, React is a powerful and flexible tool for building user interfaces, and it has become one
of the most popular front-end frameworks in the web development community.
React Props And its types (export default)
In JavaScript, the export default statement is used to export a single value from a module as the
default export. This is a common way to export a single value, such as a function or a class, from
a module.
To create a file with an export default statement in JavaScript, you can follow these steps:
Create a new file with a .js extension in your project directory.

Define your default export using the export default statement. For example, let's say we want to
export a function called add that takes two numbers as arguments and returns their sum:
javascript
Copy code
function add(a, b) {
return a + b;
export default add;
In this example, we're exporting the add function as the default export of the module using the
export default statement.
Save the file with a meaningful name. For example, let's call our file math.js.
Once you have created your file with the default export, you can import it in another file using
the import statement.
For example, let's say we have a file called app.js in the same directory as math.js, and we want
to use the add function from math.js in app.js:
csharp
Copy code
import add from './math.js';

console.log(add(2, 3)); // Output: 5
In this example, we're importing the default export from math.js using the import statement.
We're assigning it to a variable called add, and then calling the add function with the arguments
2 and 3.
That's a brief explanation of how to create a file with an export default statement in JavaScript.
HOOKS IN REACT
UseState
The useState hook is a function in React that allows you to manage state in functional
components. State is a way for a component to keep track of information that might change
over time, like a user's name or a list of items.
When you use the useState hook, you declare a variable and a function that allow you to set the
value of that variable. Here's an example:
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
count--> is a variable
setCount==> is a function
return (
<div>
<p>You clicked {count} times</p>

<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
In this example, count is the variable that holds the current value of the state, and setCount is
the function that updates the value of count. The useState hook takes an initial value of 0,
which is the starting value of count.
Whenever the button is clicked, the onClick event triggers the setCount function, which updates
the value of count by adding 1. This causes the component to re-render with the updated value
of count.
By using the useState hook, you can easily manage state in functional components without the
need for class components or complex state management libraries.
MY CODE
import React, { useState } from 'react'
export default function TextUtils(props) {
const [gettext, UpdateText] = useState("Enter the value")
// gettext="Wrong way of changing the state"
// UpdateText("Right way of changing the state ");

const handleClick=()=>{
alert("UpperCase clicked"+gettext);
let newText=gettext.toUpperCase();
UpdateText(newText)
const handleChange=(event)=>{
console.log("on change")
UpdateText(event.target.value);
//used to update the value field in the
// textarea {gettext}+changeValue will be updated in the
//value
return (
<>
<div className="mb-3">
<label htmlFor="exampleFormControlTextarea1" className="form-label">
{props.Name}
</label>
<textarea
className="form-control"
id="exampleFormControlTextarea1"
rows={13}
value={gettext}
onChange={handleChange}
/>
</div>
<button className="btn btn-primary" onClick={handleClick}>Convert to UpperCase</button>
</>
The code you provided is attempting to copy the contents of a text element to the clipboard.
text.select() - This method selects the contents of a text element, making it ready to be copied
to the clipboard.
text.setSelectRange(0,9999) - This sets the selection range of the text element to be from index
0 to 9999 (which is an arbitrarily large number that should encompass the entire length of the
text). This ensures that the entire text content is selected and ready to be copied to the
clipboard.
navigator.clipboard.writeText(text.value) - This method writes the selected text to the clipboard.

The navigator.clipboard API is a built-in JavaScript API that allows web developers to read from
and write to the clipboard. In this case, the writeText method is used to write the contents of
the text element to the clipboard as plain text.
Together, these three lines of code allow the text within the specified text element to be copied
to the user's clipboard.

React Notes

Uploaded by

Copyright:

Available Formats

React Notes

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

React Notes

Uploaded by

Copyright:

Available Formats

React Notes

React Props And its types (export default)

Create a new file with a .js extension in your project directory.

export default add;

import add from './math.js';

import React, { useState } from 'react';

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

<p>You clicked {count} times</p>

import React, { useState } from 'react'

export default function TextUtils(props) {

const [gettext, UpdateText] = useState("Enter the value")

// gettext="Wrong way of changing the state"

// UpdateText("Right way of changing the state ");

//used to update the value field in the

// textarea {gettext}+changeValue will be updated in the

<label htmlFor="exampleFormControlTextarea1" className="form-label">

<button className="btn btn-primary" onClick={handleClick}>Convert to UpperCase</button>

navigator.clipboard.writeText(text.value) - This method writes the selected text to the clipboard.

You might also like