## 📺 Watch Now
+
+ ## Notes
+
+ In ReactJS, everything is a `component`
+
+ For example, in our Youtube UI, we have multiple components, such as:
+ - Banner
+ - Nav
+ - Images
+ - Title
+ - Review
+
+ A __component__ is a simpler regular JavaScript function that is customizable, and we can reuse it in our code to build UIs.
+
+ ### 2 Types of Components:
+
+ 1. __Functional Components__:
+ - Functional components are a more recent addition to React and are essentially JavaScript functions that return JSX.
+ - They are simpler and more concise.
+ - we start it with a function.
+
+ ```js
+ function Greeting(){
+ return Hello
+ }
+ ```
+ 2. __Class Components__:
+ - Class components are the older way of defining components in React.
+ - They are defined as ES6 classes that extend the `React.Component` class.
+ - class components were being used in 2012, now they are history.
+
+ ```js
+ //we also need to import it at top of js file
+ import {Componet} from "react";
+
+ class Forest extends Components{
+ render(){
+ return Hello
+ }
+ }
+ ```
+
+ ### Name & Default Import and Export:
+
+ `index.js` is the entry point of our app.
+
+ `root` id is provided in our index.html where we want to put that content in.
+
+ - Hence, we are dynamically adding all the content
+
+ in `index.js` we are importing our app or `app.js` using:
+
+ ```js
+ import App from "./App";
+ ```
+
+ but before this, we MUST `export` our App in `app.js` :
+
+ ```js
+ export default App;
+ ```
+
+ Basically, for using the functional component in the index.js we must export it.
+
+ ### Name Export:
+
+ `App.js`
+
+ ```js
+ export function App() {
+ return (
+
+
Hello CodeSandbox
+ Start editing to see some magic happen!
+
+ );
+ }
+ ```
+ - Now we can’t change the name.
+
+ - We will have to write the exact name in { }
+
+ `index.js`
+
+ ```js
+ import {App} from "./App";
+
+ const rootElement = document.getElementById("root");
+ const root = createRoot(rootElement);
+
+ root.render(
+
+
+
+ );
+ ```
+
+ ### Default Export:
+
+ `App.js`
+
+ ```js
+ function App() {
+ return (
+
+
Hello CodeSandbox
+ Start editing to see some magic happen!
+
+ );
+ }
+
+ export default App;
+ ```
+
+ `index.js`
+
+ ```js
+ import { StrictMode } from "react";
+ import { createRoot } from "react-dom/client";
+
+ import App from "./App";
+
+ const rootElement = document.getElementById("root");
+ const root = createRoot(rootElement);
+
+ root.render(
+
+
+
+ );
+
+ //Now instead of `App` we can use any other variable name too.
+ import { StrictMode } from "react";
+ import { createRoot } from "react-dom/client";
+
+ import Greetings from "./App";
+
+ const rootElement = document.getElementById("root");
+ const root = createRoot(rootElement);
+
+ root.render(
+
+
+
+ );
+ ```
+
+ ### Components in React:
+
+ ```js
+ function Greeting(){
+ return Hello
+ }
+ ```
+ Components are __regular JavaScript functions__.
+ But there is a difference between regular js functions and components:
+ - In regular JS functions we can start the name of func. with `lowercase` letter, but with components we can not.
+ - The console will not recognize it.
+
+ ### JSX:
+
+ ```js
+ function App() {
+ return (
+
+
Hello CodeSandbox
+ Start editing to see some magic happen!
+
+
+ );
+ }
+ ```
+ What is this?
+ - It looks like simple HTML but it is __not__.
+ - `` tag is not in HTML.
+ - `className` is also not in HTML.
+
+ > **Note**
+ > This is JSX: syntax extension for JavaScript, which helps us to write HTML markup language in the JavaScript itself.
+
+ we use `className` because `class` is a __reserved keyword__.
+
+ > JSX = JS + HTML
+
+ ### Props:
+
+ Props are the __properties__ of the component that are used to pass data from `parent` component to `child` component.
+
+ ```js
+ function Greeting({name}){
+ return Hello {name}
+ }
+
+ function App() {
+ return (
+
+
+
+ );
+ }
+
+ export default App;
+ ```
+
+ #### Using Props:
+
+ ```js
+ function Greeting(props){
+ return Hello {props.name}, {props.greeting}
+ }
+
+ function App() {
+ return (
+
+
+
+ );
+ }
+ ```
+
+ ### Default props:
+ when we don’t have a value, we can put a default value:
+
+ ```js
+ function Greeting({name,greeting="morning"}){
+ return Hello {name}, {greeting}
+ }
+
+ function App() {
+ return (
+
+
+
+ );
+ }
+ ```
+
+ > **Note**
+ > Props are Read Only!!!! (V.V.Imp)
+
+ ### State in ReactJS:
+ state is the data or React object which is used to handle the user interactivity!
+
+ - to use it - `import {useState} from "react";`
+
+ ```js
+ //array destructuring
+ const [value, setterfunction] = useState(0);
+ ```
+