Introduction to React⌗

React is a JavaScript library for building user interfaces, particularly single-page applications where you need a fast, interactive UI.

Installation⌗

To create a new React app, use:

npx create-react-app my-app cd my-app npm start

JSX (JavaScript XML)⌗

JSX allows writing HTML elements inside JavaScript and placing them in the DOM without using methods like createElement.

Example:⌗

const element = <h1>Hello, React!</h1>;

React Components⌗

React components are reusable pieces of UI. There are two types:

1. Functional Components

 const Greeting = () => {     return <h1>Hello, World!</h1>; };

Other Example:

import './App.css';
const Data = ()=>{
  return(
    <>
    <h1>Name : Aditya</h1>
    <h3>DOB : 08/08/2002</h3>
    <h5>Relationship : Single</h5>
    </>
  )
}
const App = () =>{
  return (
    <div className="App">
      <Data/>
      <Data/>
      <Data/>
      <Data/>
    </div>
  );
}
export default App;

1. Class Components

class Greeting extends React.Component {     render() {         return <h1>Hello, World!</h1>;     } }

Props in React⌗

• Props (short for “properties”) are used to pass data from a parent component to a child component.
• It is used to pass dynamic data through react components.

Example:⌗

const Welcome = (props) => {     return <h1>Hello, {props.name}!</h1>; };  <Welcome name="Aditya" />;

useState in React⌗

• State allows components to manage their own data dynamically.
• useState is a Hook in React that allows functional components to manage state.
• It lets you declare state variables and update them while preserving the component’s reactivity.

Example using useState:⌗

const App = () =>{
  const [Counter,setCounter] = useState(0);

  return (
    <div className="App">
     <button onClick={()=>setCounter((prevCount)=> prevCount-1)}>-</button>
     <h1>{Counter}</h1>
     <button onClick={()=> setCounter((prevCount)=>prevCount+1)}>+</button>
    </div>
  );
}

• Anything starts with ‘use’ are hooks in javaScript.

Conditional Rendering⌗

Conditional rendering in React allows different UI elements to be displayed based on conditions.

Example:⌗

const Greeting = ({ isLoggedIn }) => {     return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in</h1>; };

React-Fragment⌗

<> </>

The React Fragments are used to wrap tags together as react dont allow multiple tags togeter in jsx file. For example:

import './App.css';

const App = () =>{
  const name= "Aditya";
  const isName = false;  
  return (
    <div className="App">
      <h1>Hello, {isName?(name):("SomeOne")}</h1>
      {isName?(<>
        Test
      </>):(
        <h1>Testing</h1>
        <h1>Testing</h1>
      )}
    </div>
  );
}
export default App;

Incubator Quote App⌗

UseState⌗

useState is a React Hook that allows functional components to have and manage state.

Axios⌗

Axios is a JavaScript library used to make HTTP requests from the browser (or Node.js) to a server. Axios is a promise-based HTTP client, meaning it uses Promises to handle asynchronous operations like fetching data from an API.

• It simplifies making GET, POST, PUT, DELETE, etc. requests.

• Works both in client-side (browser) and server-side (Node.js) apps.

• Automatically transforms JSON data.

• Handles request and response interceptors, cancellation, and timeout.

Axios response and data fetching⌗

      const response = await axios.get("/data/quotes.json");

      const quotes = response.data;

In this above code axios.get("") will give you a promise which when awaited gives a object.

• Here axios is a promise based http client where it assures that it will return a promise object if request was successful, else it will return false and reject.