Topic: Introduction

1. Basic Tools and Extensions

• React Developer Tools - Google Chrome Extenstion

VS Code - Extenstions

1. Thunder Client - Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, which helps to send HTTP requests from the editor itself. It supports both GET & POST methods with JSON payloads. You can find more details about

2. ES7 React/Redux/GraphQL/React-Native snippets - This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code

3. Bracket Pair Colorization Toggler

4. Auto Rename Tag

5. Live Server

6. Prettier - Code formatter

Note: Instantly Initialize a Project Using

npm init --yes

or

npm init --y

2. React JS - Introduction

React Official Site

Create React App

npm i create-react-app
npm install create-react-app
npm install -g create-react-app // install globally

npx create-react-app . // ⚠️ try to avoid this
npx create-react-app my-app ✅
cd my-app
npm start

🎯 Note: name of react app must be all lowercase letter

Execute React App

npm start

• Open this link in the Browser to view React App

Naming Convention of React Folder and Component :

• name of react app folder: myapp

  -all in lowercase

• Name of Components ile and Folder: Components

  • Nabvar.js Footer.js About.js

3. JSX Syntax

JSX stands for JavaScript XML.

• It is a syntax extension to JavaScript that allows us to write HTML-like code within JavaScript. It is a lightweight syntax that allows us to create and manipulate DOM elements using JavaScript.

• JSX is used in React because it allows us to write HTML-like code within JavaScript. It is a lightweight syntax that allows us to create and manipulate DOM elements using JavaScript.

• React uses JSX to create reusable components that can be used throughout our application. It also allows us to write JavaScript code that looks like HTML, which makes our code more readable and easier to understand.

In JSX, there are a few reserved keywords that cannot be used as variable names or property names. These keywords are:

If you try to use one of these keywords as a variable name or property name, you will get an error.

react jsx fragment :-

function App() {
  return (
    <h1>Hare Krishna</h1> // ❌
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Edit <code>src/App.js</code> and save to reload.</p>
      </header>
    </div>
  );
}

function App() {
  return (
    <>  // ⭐ jsx fragement
    <h1>Hare Krishna</h1> // ✅
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Edit <code>src/App.js</code> and save to reload.</p>
      </header>
    </div>
    </>
  );
}

Emmet: Include Languages (change this setting in VS Code)

Enable Emmet abbreviations in languages that are not supported by default. Add a mapping here between the language and Emmet supported language. For example: {"vue-html": "html", "javascript": "javascriptreact"}

4. Modules - import export

Files Name: module1.mjs

// default exported value can be imported with any name
import val, { a, b } from './module2.mjs'; // ✅
console.log(a);
console.log(b);
console.log(c);
console.log(val);

// ------------------------------
// import val1 from './module2.mjs';   // ✅
// console.log(val1);

// ------------------------------
// import val1, {a1, b1} from './module2.mjs';     // ❌
// console.log(a1);
// console.log(b1);
// console.log(val1);

Files Name: module2.mjs

const a = 'Arjun';
const b = 'Bhim';
const c = 'Chanakya';
const def = "Everyone is Welcomed!";

export default def;
export { a, b };

To execute above .mjs file type

node module1.mjs

5. Naming Convention

src/components/Navbar.js

components file name always start with Capital Letter

Eg. Navbar.js

6. Emmet abbreviation in VS Code ⭐⭐⭐

rfc- react funtional based component

// 📁 _FileName_.js
import React from 'react'

export default function _FileName_() {
  return (
    <div>_FileName_</div>
  )
}

// abb: imrs
import React, { useState } from 'react';

7. Write inline CSS in React

Write inline style attribute in React

<div className='text-light' style={{ height: "4rem" }} >

8. Write inline JS in React

<nav className={`navbar navbar-expand-lg navbar-${props.drk_mode} bg-${props.drk_mode}`}>

9. Console मे एक ही value दो बार क्यू Print हो रही है ?

Ans. Because of <React.StrictMode> tag

// 🗃️ File Name: index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>  💀⭐⭐💀
    <App />
  </React.StrictMode> 💀⭐⭐💀
);

reportWebVitals();

10. Install multiple things with npm i ____ ____ _____

npm i react-router-dom saas react-icons axios

[10.1] Install a particular version using npm:

npm i react-icons@2.3.0

Q. Why use extension .jsx suffix instead of .js

Because by using jsx extention - It will automatically select the language mode as javascriptreact in VS Code.

JavaScript Refresher

1. The "use strict" Directive

• The purpose of "use strict" is to indicate that the code should be executed in "strict mode".

• With strict mode, you can not, for example, use undeclared variables.

  d = 12;     // ✅
  console.log(d);
  

  "use strict"
  d = 12;     // 💀❌ ReferenceError: d is not defined
  console.log(d);
  

🎯Note: In react the strict mode is always on.

- In React, the strict mode is a development tool that provides warnings for potential issues in your code.