diff --git a/404.html b/404.html
index 9657627..b1bd426 100644
--- a/404.html
+++ b/404.html
@@ -1 +1 @@
-404: This page could not be found.Kavindu Udara
404
This page could not be found.
\ No newline at end of file
+404: This page could not be found.Kavindu Udara
`; | |
+| ``` | } | |
+
+---
+### When to Use?
+
+- Use functional components whenever possible; they are the modern and preferred approach. Class components are now rarely used in new projects.
+
+---
+### How to Create and Export Components
+
+1. Creating a Functional Component
+ ```jsx
+ // Greet.jsx
+ function Greet() {
+ return
Hello, World!
;
+ }
+ export default Greet;
+ ```
+
+2. Creating a Class Component
+ ```jsx
+ // Welcome.jsx
+ import React, { Component } from 'react';
+ class Welcome extends Component {
+ render() {
+ return
Welcome to React!
;
+ }
+ }
+ export default Welcome;
+ ```
+
+3. Named Exports
+ You can export multiple components from a file:
+```jsx
+// Greetings.jsx
+export function Hello() {
+ return
Hello!
;
+}
+
+export function Goodbye() {
+ return
Goodbye!
;
+}
+
+```
+
+---
+### Importing Components and Using Them Inside Other Components
+
+1. Default Export
+ Import and use a default exported component
+```jsx
+import Greet from './Greet';
+
+function App() {
+ return (
+
+
+
+ );
+}
+export default App;
+
+```
+
+2. Named Exports
+ Import and use named exported components
+```jsx
+import { Hello, Goodbye } from './Greetings';
+
+function App() {
+ return (
+
+
+
+
+ );
+}
+export default App;
+```
+
+3. Aliasing Components
+ Rename components during import
+```jsx
+import { Hello as Hi } from './Greetings';
+
+function App() {
+ return ;
+}
+export default App;
+```
+
+4. Composing Components
+ Use components inside other components to build a hierarchy
+```jsx
+import Greet from './Greet';
+
+function Header() {
+ return (
+
+
+
This is a header
+
+ );
+}
+
+export default Header;
+```
+
+---
+### Summary
+
+- **Functional Components** are the modern standard due to hooks and simplicity.
+- Components can be exported as default or named exports.
+- You can compose a rich UI by importing and using components inside other components.
+ This modular structure makes React scalable and maintainable.
+
+---
+# References
+
+- https://www.freecodecamp.org/news/function-component-vs-class-component-in-react/
\ No newline at end of file
diff --git a/assets/readmes/Conditional Rendering in React.md b/assets/readmes/Conditional Rendering in React.md
new file mode 100644
index 0000000..9e4849a
--- /dev/null
+++ b/assets/readmes/Conditional Rendering in React.md
@@ -0,0 +1,129 @@
+---
+date : 2024-12-01T21:35:23+05:30
+draft : false
+title : Conditional Rendering in React
+---
+
+Conditional rendering allows components to decide what to display based on certain conditions. React provides several ways to implement conditional rendering, making it easy to display different UI elements based on the state or props of a component.
+
+---
+
+### 1. Using `if-else` Statements
+
+You can use standard JavaScript `if-else` statements for conditional rendering within a component. Typically, you would do this outside of the JSX return statement, such as within the render function or directly before the return.
+
+#### Example: Using `if-else`
+
+```jsx
+function Greeting({ isLoggedIn }) {
+ let message;
+
+ if (isLoggedIn) {
+ message =
Welcome Back!
;
+ } else {
+ message =
Please Sign In
;
+ }
+
+ return
{message}
;
+}
+```
+
+In this example, `if-else` is used to set the value of `message` based on the `isLoggedIn` prop, which is then rendered inside the component.
+
+---
+
+### 2. Using Ternary Operators
+
+A **ternary operator** is a shorthand for `if-else` and is commonly used for inline conditional rendering within JSX. It has the following syntax:
+
+```jsx
+condition ? expression_if_true : expression_if_false;
+```
+
+#### Example: Using Ternary Operator
+
+```jsx
+function Greeting({ isLoggedIn }) {
+ return (
+
+ {isLoggedIn ?
Welcome Back!
:
Please Sign In
}
+
+ );
+}
+```
+
+In this example, if `isLoggedIn` is `true`, "Welcome Back!" is rendered; otherwise, "Please Sign In" is shown. Ternary operators are great for simple conditions.
+
+---
+
+### 3. Using `&&` (Logical AND) Operator
+
+The `&&` (logical AND) operator can be used for conditional rendering when you want to display something only if a condition is `true`. This is useful for scenarios where you only want to render an element when a certain condition holds.
+
+#### Example: Using `&&` Operator
+
+```jsx
+function Notification({ message }) {
+ return (
+
+ {message &&
{message}
}
+
+ );
+}
+```
+
+In this example, the paragraph will only be rendered if `message` is truthy. If `message` is `null` or `undefined`, nothing will be displayed.
+
+---
+
+### 4. Conditional Rendering Based on Multiple Conditions
+
+You can also combine `if-else`, ternary operators, and `&&` logic for more complex conditions.
+
+#### Example: Multiple Conditions
+
+```jsx
+function UserStatus({ user }) {
+ return (
+
+ {user ? (
+ user.isAdmin ? (
+
Welcome, Admin!
+ ) : (
+
Welcome, {user.name}!
+ )
+ ) : (
+
Please log in
+ )}
+
+ );
+}
+```
+
+In this example, multiple conditions are checked using nested ternary operators to display different messages based on whether the user is logged in and whether they are an admin.
+
+---
+
+### Summary of Conditional Rendering Methods
+
+|**Method**|**Use Case**|**Example**|
+|---|---|---|
+|**`if-else`**|For more complex conditions or multiple branches|`if (isLoggedIn) { return
}`|
+|**`&&` (Logical AND)**|When you want to render something only if a condition is true|`{isLoggedIn &&
Welcome!
}`|
+
+---
+
+### Best Practices
+
+- Use **ternary operators** for simple conditions, especially within JSX.
+- Use **`&&`** for conditional rendering when you only want to render an element when a condition is true.
+- For more complex logic, prefer **`if-else` statements** outside of JSX.
+
+By using these techniques, you can conditionally render content in React based on various states, props, or conditions, enabling dynamic and interactive user interfaces.
+
+---
+# References
+
+- https://www.w3schools.com/react/react_conditional_rendering.asp
+- https://legacy.reactjs.org/docs/conditional-rendering.html
\ No newline at end of file
diff --git a/assets/readmes/Deploying a React App.md b/assets/readmes/Deploying a React App.md
new file mode 100644
index 0000000..cf7a2ac
--- /dev/null
+++ b/assets/readmes/Deploying a React App.md
@@ -0,0 +1,105 @@
+---
+date : 2024-12-01T21:44:35+05:30
+draft : false
+title : Deploying a React App
+---
+
+Deploying a React app involves several steps to prepare the app for production, including optimizing the build, configuring deployment settings, and choosing a hosting platform. This note focuses on the preparation of a React app for production using the `npm run build` command, which creates an optimized version of your app for deployment.
+
+---
+
+### 1. Preparing the App for Production Using `npm run build`
+
+When you’re ready to deploy your React app, the first step is to create a **production build**. React provides a command `npm run build` that bundles your app into static files optimized for performance. This build includes minified JavaScript, optimized assets, and a structure that can be served by a static server.
+
+#### Steps to Prepare Your React App for Production
+
+1. **Ensure the Project is Ready:**
+
+ - Before building your app, make sure all code is final and all features are working as expected.
+ - Test your app thoroughly in development mode (`npm start`).
+2. **Create a Production Build:** To create a production-ready build, open your terminal and run:
+
+ ```bash
+ npm run build
+ ```
+
+ This command does the following:
+
+ - **Minifies** and **bundles** your JavaScript and CSS files for faster loading.
+ - Optimizes images and other assets.
+ - Adds **hashing** to filenames to improve caching.
+ - Ensures that the app is ready for deployment to a web server.
+
+ After running the command, a new folder named `build/` will be created in your project directory.
+
+3. **Inspect the Build Folder:** The `build/` folder will contain the following files:
+
+ - `index.html`: The main HTML file that includes links to your bundled JavaScript and CSS.
+ - `static/`: A folder containing all the assets (images, fonts, etc.) and minified JavaScript and CSS files.
+ - `asset-manifest.json`: Contains a list of files with their hash for cache management.
+
+ This build folder is ready to be deployed to a static server.
+
+4. **Environment Variables:** Ensure that all necessary environment variables are set for production. You can define them in `.env` files or directly in the server environment.
+
+ For example, if you need to specify a different **API URL** for production, you can use:
+
+ ```bash
+ REACT_APP_API_URL=https://api.yourdomain.com
+ ```
+
+ These environment variables are automatically replaced during the build process.
+
+5. **Check the Build:** It's a good idea to test the build locally before deploying. You can use a simple static server like **serve** to serve your production build.
+
+ First, install `serve` globally if you don’t have it:
+
+ ```bash
+ npm install -g serve
+ ```
+
+ Then, run the following command to serve your build:
+
+ ```bash
+ serve -s build
+ ```
+
+ This will start a local server that serves your production build, allowing you to check if everything is working as expected before deploying it to a live server.
+
+
+---
+
+### 2. Key Benefits of Using `npm run build`
+
+- **Performance Optimization:** The `build` command optimizes your React app for production by reducing the file sizes (through minification), removing unnecessary code, and making the app load faster.
+- **Caching:** The build process generates hashed filenames for assets, improving cache management on the client side. This means that once assets are cached, users won't have to re-download them unless they change.
+- **Compatibility:** The production build is optimized to run on most modern web servers, making it easier to deploy to different hosting platforms.
+
+---
+
+### 3. Deploying the Production Build
+
+Once the build is ready, you can deploy it to your desired hosting platform. Some common platforms for deploying React apps include:
+
+- **Netlify:** Simple, free hosting for static sites. Just drag and drop the `build/` folder or link your GitHub repository.
+- **Vercel:** Another popular platform for static apps that integrates well with React. It automatically optimizes the build during deployment.
+- **GitHub Pages:** Free hosting for static websites directly from your GitHub repository.
+- **Firebase Hosting:** Provides fast, secure hosting for web apps with a free tier available.
+- **AWS S3 & CloudFront:** For more complex or scalable deployments.
+
+---
+
+### Summary
+
+- **`npm run build`** is the key command for preparing your React app for production. It bundles and optimizes your app for performance and scalability.
+- After building the app, you will have a `build/` folder containing all the optimized assets ready to be deployed.
+- Ensure that environment variables are correctly set for production, and test the build locally before deploying it.
+- Popular platforms for deploying React apps include Netlify, Vercel, Firebase, and GitHub Pages.
+
+By following these steps, you’ll ensure your React app is production-ready and performs optimally for end-users.
+
+---
+# References
+
+- https://www.geeksforgeeks.org/how-do-you-deploy-a-react-application/
\ No newline at end of file
diff --git a/assets/readmes/Event Handling in React.md b/assets/readmes/Event Handling in React.md
new file mode 100644
index 0000000..84554ee
--- /dev/null
+++ b/assets/readmes/Event Handling in React.md
@@ -0,0 +1,190 @@
+---
+date : 2024-12-01T21:33:30+05:30
+draft : false
+title : Event Handling in React
+---
+
+React provides a way to handle user interactions such as clicks, form submissions, and other events using event handlers. These handlers work similarly to JavaScript event listeners but are optimized for React's virtual DOM.
+
+---
+
+### 1. Handling Events in React
+
+##### Key Points:
+
+- Event handlers in React are written as camelCase (e.g., `onClick`, `onChange`).
+- Handlers are passed as functions, not strings (e.g., `onClick={() => alert('Clicked!')}`).
+
+##### Common Event Handlers
+
+- **Click Events**: Triggered when an element is clicked.
+- **Input Events**: Triggered when input fields change.
+- **Form Events**: Triggered during form submission.
+
+---
+
+#### Handling Click Events
+
+```jsx
+function ClickHandler() {
+ const handleClick = () => {
+ alert('Button clicked!');
+ };
+
+ return ;
+}
+```
+
+---
+
+#### Handling Input Events
+
+```jsx
+function InputHandler() {
+ const handleChange = (event) => {
+ console.log(event.target.value);
+ };
+
+ return ;
+}
+```
+
+---
+
+### Handling Form Submission
+
+```jsx
+function FormHandler() {
+ const handleSubmit = (event) => {
+ event.preventDefault(); // Prevents default form submission behavior
+ alert('Form submitted!');
+ };
+
+ return (
+
+ );
+}
+```
+
+---
+
+### 2. Event Binding and Passing Data with Event Handlers
+
+#### Event Binding
+
+In React, event handlers automatically bind to the component instance, so you usually don't need explicit binding as in class components. However, in class components, you can bind methods in three ways:
+
+1. **Arrow Functions in JSX** (recommended):
+
+ ```jsx
+
+ ```
+
+2. **Bind in the Constructor**:
+
+ ```jsx
+ constructor() {
+ super();
+ this.handleClick = this.handleClick.bind(this);
+ }
+ ```
+
+3. **Class Properties (ES6)**:
+
+ ```jsx
+ handleClick = () => {
+ console.log('Button clicked!');
+ };
+ ```
+
+
+---
+
+### Passing Data with Event Handlers
+
+1. **Using Arrow Functions**:
+
+ ```jsx
+ function Greet({ name }) {
+ const handleClick = () => {
+ alert(`Hello, ${name}!`);
+ };
+
+ return ;
+ }
+
+ function App() {
+ return ;
+ }
+ ```
+
+2. **Passing Arguments**:
+
+ - Use an arrow function to pass arguments:
+
+ ```jsx
+ function Button({ message }) {
+ const handleClick = (msg) => {
+ alert(msg);
+ };
+
+ return ;
+ }
+ ```
+
+
+---
+
+### 3. Preventing Default Behavior
+
+- Use `event.preventDefault()` to stop default browser actions:
+
+ ```jsx
+ function LinkHandler() {
+ const handleClick = (event) => {
+ event.preventDefault();
+ alert('Default action prevented!');
+ };
+
+ return Click Me;
+ }
+ ```
+
+
+---
+
+### 4. Accessing Event Data
+
+React's event handling uses a synthetic event system, which wraps the browser's native event and normalizes cross-browser compatibility.
+
+- Access event properties like `target`, `type`, etc.:
+
+ ```jsx
+ function InputLogger() {
+ const handleInput = (event) => {
+ console.log(`Input value: ${event.target.value}`);
+ };
+
+ return ;
+ }
+ ```
+
+
+---
+
+### Summary
+
+|**Event**|**Handler**|**Example**|
+|---|---|---|
+|**Click**|`onClick`|``|
+|**Input Change**|`onChange`|``|
+|**Form Submission**|`onSubmit`|``|
+|**Prevent Default**|`event.preventDefault()`|`Link`|
+|**Passing Data**|Arrow functions or bind|``|
+
+By combining event handlers with state or props, React allows for building dynamic and interactive UIs.
+
+---
+# References
diff --git a/assets/readmes/Lists and Keys in React.md b/assets/readmes/Lists and Keys in React.md
new file mode 100644
index 0000000..ab0de4e
--- /dev/null
+++ b/assets/readmes/Lists and Keys in React.md
@@ -0,0 +1,136 @@
+---
+date : 2024-12-01T21:37:30+05:30
+draft : false
+title : Lists and Keys in React
+---
+
+Rendering lists in React is common for displaying multiple items dynamically. React provides a built-in way to efficiently render lists using JavaScript array methods like `.map()`. Additionally, using **keys** is important for optimizing rendering and maintaining state in lists.
+
+---
+
+#### 1. Rendering Lists with `.map()`
+
+In React, the `.map()` function is commonly used to iterate over an array of data and return an array of elements that can be rendered. This is especially useful for rendering dynamic data like lists of items.
+
+##### Example: Rendering a List of Items
+
+```jsx
+function ItemList() {
+ const items = ['Apple', 'Banana', 'Cherry'];
+
+ return (
+
+ {items.map((item, index) => (
+
{item}
+ ))}
+
+ );
+}
+```
+
+In this example:
+
+- We use the `.map()` method to iterate over the `items` array.
+- For each item, we return a list item (`
`) containing the `item` text.
+
+---
+
+#### 2. Importance of Keys in List Rendering
+
+**Keys** help React identify which items have changed, been added, or removed, allowing for efficient updates to the virtual DOM and the UI. When rendering lists, React needs a unique identifier for each element to keep track of their position and improve performance.
+
+##### Why are Keys Important?
+
+- **Efficient Updates**: Without keys, React would have to re-render all list items when one item changes. With keys, React only re-renders the changed items.
+- **Unique Identification**: Keys ensure that React can distinguish between individual elements in a list.
+
+##### Best Practices for Keys:
+
+- Keys must be **unique** among siblings (elements at the same level in the list).
+- Avoid using **array indices** as keys when the list can change dynamically (e.g., items can be added or removed).
+
+##### Example: Using Unique Keys
+
+```jsx
+function ItemList() {
+ const items = [
+ { id: 1, name: 'Apple' },
+ { id: 2, name: 'Banana' },
+ { id: 3, name: 'Cherry' }
+ ];
+
+ return (
+
+ {items.map((item) => (
+
{item.name}
+ ))}
+
+ );
+}
+```
+
+In this example:
+
+- Each list item has a unique `id` which is used as the key.
+- This ensures that React can efficiently track changes to the list.
+
+---
+
+#### 3. Handling Dynamic List Changes
+
+When the list data changes (e.g., items are added, removed, or reordered), keys help React know how to efficiently update the UI. Without keys or with incorrect keys, React may not be able to identify which items are changing and might re-render the entire list unnecessarily.
+
+##### Example: Reordering List Items
+
+```jsx
+function ItemList() {
+ const [items, setItems] = useState([
+ { id: 1, name: 'Apple' },
+ { id: 2, name: 'Banana' },
+ { id: 3, name: 'Cherry' }
+ ]);
+
+ const reorderItems = () => {
+ setItems([items[2], items[1], items[0]]);
+ };
+
+ return (
+
+
+
+ {items.map((item) => (
+
{item.name}
+ ))}
+
+
+ );
+}
+```
+
+In this example:
+
+- If the `key` were not unique, React might not correctly update the UI after the items are reordered.
+- With the unique `id` as the key, React efficiently reorders the items in the list without unnecessary re-renders.
+
+---
+
+### Summary of Lists and Keys
+
+|**Method**|**Description**|**Example**|
+|---|---|---|
+|**Rendering Lists with `.map()`**|Iterates over an array to create an array of elements.|`{items.map(item =>
{item.name}
)}`|
+|**Importance of Keys**|Keys help React identify items and optimize re-renders.|`key={item.id}` ensures React optimally updates lists.|
+|**Best Practices for Keys**|Use unique identifiers (not array indices) as keys.|Prefer `key={item.id}` over `key={index}`.|
+
+---
+
+### Conclusion
+
+- Use **`.map()`** to render lists dynamically in React.
+- Always provide a **unique `key`** for each item in the list to improve performance and ensure accurate updates during re-renders.
+- Avoid using array indices as keys, especially when the list can be modified, as it may lead to issues with the state and rendering.
+
+---
+# References
+
+- https://legacy.reactjs.org/docs/lists-and-keys.html
\ No newline at end of file
diff --git a/assets/readmes/Props in React.md b/assets/readmes/Props in React.md
new file mode 100644
index 0000000..dae61f9
--- /dev/null
+++ b/assets/readmes/Props in React.md
@@ -0,0 +1,59 @@
+---
+date : 2024-12-01T21:29:05+05:30
+draft : false
+title : Props in React
+---
+
+**Props** (short for properties) are used to pass data from a parent component to a child component. Props are **read-only**, meaning they cannot be modified by the child component receiving them.
+
+---
+### Key Features of Props
+
+- Passed as an object to the component.
+- Immutable (cannot be changed by the component receiving them).
+- Used for dynamic data and reusability.
+
+---
+### How to Pass Props Between Components
+
+1. Define props in the parent component
+ ```jsx
+ function Parent() {
+ const name = "John";
+ return ;
+ }
+ ```
+
+2. Access props in the child component
+ ```jsx
+ function Child(props) {
+ return
Hello, {props.name}!
;
+ }
+ ```
+
+3. Destructure props for cleaner syntax
+ ```jsx
+ function Child({ name }) {
+ return
Hello, {name}!
;
+ }
+ ```
+
+___
+### Example of Props
+
+```jsx
+function Button({ label, onClick }) {
+ return ;
+}
+
+function App() {
+ const handleClick = () => alert("Button clicked!");
+ return ;
+}
+```
+
+---
+# References
+
+- https://legacy.reactjs.org/docs/components-and-props.html
+- https://www.freecodecamp.org/news/how-to-use-props-in-reactjs/
\ No newline at end of file
diff --git a/assets/readmes/React Lifecycle and Hooks.md b/assets/readmes/React Lifecycle and Hooks.md
new file mode 100644
index 0000000..35f8c62
--- /dev/null
+++ b/assets/readmes/React Lifecycle and Hooks.md
@@ -0,0 +1,214 @@
+---
+date : 2024-12-01T21:40:04+05:30
+draft : false
+title : React Lifecycle and Hooks
+---
+
+React hooks allow functional components to manage side effects, state, and other lifecycle events. The introduction of hooks has simplified component lifecycle management and enabled functional components to become more powerful and feature-rich.
+
+---
+
+### 1. Introduction to React Hooks
+
+React hooks are functions that allow you to "hook into" React features from functional components. They provide a more declarative approach to handling component logic compared to class components. The most commonly used hooks are:
+
+- `useState`: To manage state in functional components.
+- `useEffect`: For handling side effects, such as fetching data or subscribing to external services.
+- `useContext`: For accessing context data.
+
+The `useEffect` hook, in particular, is essential for dealing with side effects in React.
+
+---
+
+### 2. The `useEffect` Hook
+
+The `useEffect` hook allows you to perform **side effects** in functional components. Side effects refer to operations that affect something outside the component, such as:
+
+- Fetching data from an API.
+- Subscribing to a service or event.
+- Manipulating the DOM.
+- Setting up timers.
+
+The `useEffect` hook replaces the lifecycle methods found in class components (`componentDidMount`, `componentDidUpdate`, and `componentWillUnmount`).
+
+#### Basic Syntax of `useEffect`
+
+```jsx
+useEffect(() => {
+ // Code to run on component mount or state change
+}, [dependencies]);
+```
+
+- The first argument is a **function** containing the side-effect logic.
+- The second argument is an **array of dependencies**. If any of the dependencies change, the effect will run again.
+
+#### Example: Basic `useEffect` Usage
+
+```jsx
+import React, { useState, useEffect } from 'react';
+
+function DataFetchingComponent() {
+ const [data, setData] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ fetch('https://api.example.com/data')
+ .then(response => response.json())
+ .then(data => {
+ setData(data);
+ setLoading(false);
+ });
+ }, []); // Empty dependency array ensures effect runs only once (componentDidMount)
+
+ if (loading) return
Loading...
;
+
+ return (
+
+
Data
+
+ {data.map(item => (
+
{item.name}
+ ))}
+
+
+ );
+}
+```
+
+In this example:
+
+- **`useEffect`** fetches data from an API when the component mounts (similar to `componentDidMount` in class components).
+- The empty dependency array `[]` means the effect runs only once after the initial render.
+
+---
+
+### 3. Cleanup with `useEffect`
+
+Sometimes, you need to clean up after an effect, such as clearing timers or unsubscribing from an event. You can return a **cleanup function** from `useEffect`.
+
+#### Example: Cleanup in `useEffect`
+
+```jsx
+import React, { useEffect, useState } from 'react';
+
+function Timer() {
+ const [seconds, setSeconds] = useState(0);
+
+ useEffect(() => {
+ const timerId = setInterval(() => {
+ setSeconds(prev => prev + 1);
+ }, 1000);
+
+ // Cleanup function to clear the interval
+ return () => {
+ clearInterval(timerId);
+ };
+ }, []); // Runs once, equivalent to componentDidMount
+
+ return
Seconds: {seconds}
;
+}
+```
+
+In this example:
+
+- A timer is set using `setInterval` in the `useEffect` hook.
+- The **cleanup function** returned from `useEffect` clears the interval when the component is unmounted or before the effect is re-run.
+
+---
+
+### 4. Conditional Execution of `useEffect`
+
+By specifying **dependencies**, you can control when the `useEffect` hook runs:
+
+- If the dependency array is empty `[]`, the effect runs only once when the component mounts.
+- If the array contains values (e.g., `[prop, state]`), the effect runs when any of those values change.
+
+#### Example: Conditional `useEffect`
+
+```jsx
+import React, { useState, useEffect } from 'react';
+
+function Counter() {
+ const [count, setCount] = useState(0);
+
+ useEffect(() => {
+ document.title = `You clicked ${count} times`;
+ }, [count]); // Runs whenever count changes
+
+ return (
+
+
You clicked {count} times
+
+
+ );
+}
+```
+
+In this example:
+
+- The effect runs only when the `count` state changes, and it updates the document title with the current count.
+
+---
+
+### 5. Use Case Examples of `useEffect`
+
+- **Fetching data on mount:**
+
+ ```jsx
+ useEffect(() => {
+ fetchData();
+ }, []); // Runs once after component mount
+ ```
+
+- **Subscribing to an event:**
+
+ ```jsx
+ useEffect(() => {
+ const handleResize = () => {
+ console.log('Window resized');
+ };
+ window.addEventListener('resize', handleResize);
+
+ // Cleanup on component unmount
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []); // Runs once
+ ```
+
+- **Setting up a timer:**
+
+ ```jsx
+ useEffect(() => {
+ const timer = setInterval(() => {
+ console.log('Timer ticked');
+ }, 1000);
+
+ return () => clearInterval(timer); // Cleanup on unmount
+ }, []);
+ ```
+
+
+---
+
+### Summary of `useEffect`
+
+|**Feature**|**Description**|**Example**|
+|---|---|---|
+|**Basic usage**|Handles side effects like fetching data, setting up timers, etc.|`useEffect(() => { fetchData(); }, []);`|
+|**Dependencies**|Array of values that the effect depends on.|`useEffect(() => { console.log(count); }, [count]);`|
+|**Cleanup function**|Cleans up after effects (e.g., clearing timers).|`return () => { clearInterval(timer); }`|
+|**Conditional execution**|Control when the effect runs by setting dependencies.|`useEffect(() => { console.log('Mounted!'); }, []);`|
+
+---
+
+### Conclusion
+
+- **`useEffect`** is a powerful hook for managing side effects in functional components.
+- It allows you to **fetch data**, **subscribe to events**, and handle **cleanups** in a declarative way.
+- By using the dependency array, you can control when the effect should run, making it highly flexible and efficient.
+
+---
+# References
+
+- https://www.freecodecamp.org/news/react-lifecycle-methods-and-hooks-for-beginners/
\ No newline at end of file
diff --git a/assets/readmes/React Reusable Components.md b/assets/readmes/React Reusable Components.md
new file mode 100644
index 0000000..802a4ef
--- /dev/null
+++ b/assets/readmes/React Reusable Components.md
@@ -0,0 +1,83 @@
+---
+date : 2024-12-01T20:41:07+05:30
+draft : false
+title : React Reusable Components
+---
+
+- Reusable components are building blocks of a React application designed to be reused in multiple places.
+- They promote modularity, maintainability, and efficiency.
+
+---
+### Key Benefits
+
+- **Code Reusability**: Write once, use multiple times.
+- **Consistency**: Maintain consistent design and behavior across the app.
+- **Ease of Maintenance**: Updates to a component reflect across all its instances.
+- **Efficiency**: Reduces the need for duplicate code.
+
+---
+### Best Practices for Creating Reusable Components
+
+- **Single Responsibility Principle**: Each component should have one clear purpose.
+- **Props**: Use props to make components configurable and dynamic.
+- **Composition Over Inheritance**: Combine smaller components to build larger ones.
+- **Avoid Hardcoding**: Parameterize data through props instead of hardcoding values.
+- **Styling Flexibility**: Use CSS modules, styled-components, or className props for flexible styling.
+- **Granularity**: Balance between too granular (many small components) and too monolithic (large components).
+
+---
+### Examples of Reusable Components
+
+1. Button
+
+```jsx
+const Button = ({ onClick, children, style }) => (
+
+);
+```
+
+2. Input Field
+
+```jsx
+const Input = ({ type, value, onChange, placeholder }) => (
+
+);
+
+```
+
+3. Card
+
+```jsx
+const Card = ({ children, style }) => (
+
+ {children}
+
+);
+
+const defaultStyle = {
+ border: "1px solid #ccc",
+ padding: "10px",
+ borderRadius: "5px",
+};
+
+```
+
+---
+### Tips
+
+- **Test Components**: Ensure each component works in isolation.
+- **Prop Validation**: Use `PropTypes` or TypeScript for better validation and type safety.
+- **Document Components**: Add comments or maintain documentation to explain usage.
+
+---
+# References
+
+- https://www.freecodecamp.org/news/how-to-build-reusable-react-components/
+- https://buttercms.com/blog/building-reusable-components-using-react/
\ No newline at end of file
diff --git a/assets/readmes/React Virtual DOM.md b/assets/readmes/React Virtual DOM.md
new file mode 100644
index 0000000..ed2e549
--- /dev/null
+++ b/assets/readmes/React Virtual DOM.md
@@ -0,0 +1,95 @@
+---
+date : 2024-12-01T20:54:27+05:30
+draft : false
+title : React Virtual DOM
+---
+
+- The **Virtual DOM (VDOM)** is a lightweight in-memory representation of the real DOM.
+- React uses the VDOM to manage updates efficiently without directly manipulating the real DOM.
+
+---
+### Key Concepts
+
+- The actual structure rendered in the browser.
+- Updating it is slow because it triggers reflows and repaints.
+
+---
+### How the Virtual DOM Works
+
+- **Initial Render**:
+ - React creates a VDOM representation of the UI.
+ - The VDOM is then used to create the real DOM for the browser.
+- **Updating State or Props**:
+ - React creates a new VDOM tree based on the updated state/props.
+ - It compares the new VDOM tree with the previous one (a process called **diffing**).
+ - Only the differences (changes) are applied to the real DOM.
+- **Efficient Updates**:
+ - React batches multiple updates and applies them in one operation to minimize performance costs.
+
+---
+
+### Benefits of the Virtual DOM
+
+- **Performance**:
+ - Reduces direct interactions with the real DOM.
+ - Optimizes updates by calculating the smallest number of changes.
+- **Declarative UI**:
+ - Developers focus on what the UI should look like, and React handles how to update the DOM.
+- **Cross-Browser Compatibility**:
+ - React abstracts browser-specific quirks in DOM manipulation.
+
+---
+
+### Real-Life Analogy
+
+- Think of updating the DOM like editing a book.
+- Instead of rewriting the entire book (real DOM), React keeps a draft copy (virtual DOM), compares the draft with the original, and only updates the changed parts.
+
+---
+
+### Virtual DOM Diffing Algorithm
+
+- **Tree Comparison**: React compares the new VDOM tree with the old one.
+- **Key-Based Optimization**:
+ - Keys in lists help React identify moved or updated elements efficiently.
+- **Minimal Updates**:
+ - React calculates and applies only the minimal required changes to the real DOM.
+
+---
+### Example
+
+```jsx
+function App() {
+ const [count, setCount] = React.useState(0);
+
+ return (
+
+
Count: {count}
+
+
+ );
+}
+```
+
+When the button is clicked:
+
+1. React updates the state (`count`).
+2. React creates a new VDOM tree for ``.
+3. It compares the new tree with the old one.
+4. Only the `
` element is updated in the real DOM.
+
+---
+### Summary
+
+The Virtual DOM is a powerful feature of React that:
+
+- Improves performance.
+- Simplifies the UI development process.
+- Provides a smooth and efficient user experience.
+
+---
+# References
+
+- https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/
+- https://legacy.reactjs.org/docs/faq-internals.html
+- https://www.geeksforgeeks.org/reactjs-virtual-dom/
\ No newline at end of file
diff --git a/assets/readmes/React fundamentals.md b/assets/readmes/React fundamentals.md
new file mode 100644
index 0000000..7a9f5b0
--- /dev/null
+++ b/assets/readmes/React fundamentals.md
@@ -0,0 +1,52 @@
+---
+date : 2024-12-01T20:36:06+05:30
+draft : false
+title : React Fundamentals
+---
+
+1. **Introduction**
+ - What is React and Why use React ?
+ - [React Reusable Components](../react-reusable-components)
+ - [React Virtual DOM](../react-virtual-dom)
+ - Large Community Support
+ - [Real-world Examples of apps build with React](../real-world-examples-of-apps-build-with-react)
+
+2. [**Setting Up the Development Environment for React with Vite**](../setting-up-the-development-environment-for-react-with-vite)
+ - Installing Node.js and npm.
+ - Setting up a React Project.
+ - Overview of the project folder structure.
+
+3. **Understanding JSX / TSX**
+ - [What is JSX, TSX and How It Differs from HTML](../what-is-jsx-tsx-and-how-ut-differs-from-html)
+ - JSX/TSX attributes and how to use them.
+
+4. [**Components in React**](../components-in-react)
+ - Functional Components vs Class Components.
+ - How to create and export components.
+ - Importing components and using them inside other components.
+
+5. **Props and State** [Props in React](../props-in-react), [State in React](../state-in-react)
+ - Introduction to props and how to pass data between components.
+ - Introduction to state and `useState` hook.
+ - Updating and managing state.
+
+6. [**Event Handling in React** ](../event-handling-in-react)
+ - How to handle events like clicks, inputs, and form submissions.
+ - Event binding and passing data with event handlers.
+
+7. [**Conditional Rendering in React**](../conditional-rendering-in-react)
+ - How to conditionally render components using `if-else`, `ternary operators`, and `&&` logic.
+
+8. [**Lists and Keys in React**](../lists-and-keys-in-react)
+ - How to render lists in React using `.map()`.
+ - Importance of keys in list rendering.
+
+9. [**React Lifecycle and Hooks**](../react-lifecycle-and-hooks)
+ - Introduction to React hooks: `useEffect` for handling side effects.
+
+10. [**Styling in React**](../styling-in-react)
+ - Inline styles vs External CSS vs CSS Modules.
+ - Introduction to styling libraries like Styled Components or Tailwind CSS.
+
+11. [**Deploying a React App**](../deploying-a-react-app)
+ - Preparing the app for production using `npm run build`.
\ No newline at end of file
diff --git a/assets/readmes/Real-world Examples of apps build with React.md b/assets/readmes/Real-world Examples of apps build with React.md
new file mode 100644
index 0000000..512ac42
--- /dev/null
+++ b/assets/readmes/Real-world Examples of apps build with React.md
@@ -0,0 +1,38 @@
+---
+date : 2024-12-01T20:58:46+05:30
+draft : false
+title : Real World Examples of Apps Build With React
+---
+
+This is some real world examples that build with react
+
+---
+
+| **Application** | **Description** | **Key Features** |
+| ------------------------ | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| **Facebook** | Social media platform, React's origin. | News feed, notifications, live chat, real-time updates, and interactive UI. |
+| **Instagram** | Photo and video sharing platform owned by Meta. | Stories, filters, reels, dynamic user feeds, and push notifications. |
+| **WhatsApp Web** | Web version of the popular messaging app. | Real-time messaging, live updates, QR login, and responsive design. |
+| **Netflix** | Streaming platform for movies and TV shows. | Dynamic user interface, personalized recommendations, and optimized streaming experiences. |
+| **Airbnb** | Marketplace for lodging, primarily short-term rentals. | Interactive maps, real-time search results, and responsive layouts for booking accommodations. |
+| **Uber** | Ridesharing platform for booking cabs and delivery services. | Live tracking, dynamic pricing, and real-time updates. |
+| **Pinterest** | Visual discovery engine for sharing ideas and inspirations. | Infinite scrolling, dynamic pin recommendations, and smooth user interactions. |
+| **Slack** | Collaboration platform for messaging and workplace tools. | Real-time messaging, file sharing, and integrated third-party tools. |
+| **Shopify** | E-commerce platform for businesses to create online stores. | Dynamic dashboards, real-time inventory updates, and responsive store designs. |
+| **Discord** | Voice, video, and text communication platform for communities and gamers. | Real-time messaging, custom UIs for servers, and seamless voice/video integration. |
+| **Dropbox** | Cloud storage platform for storing and sharing files. | Interactive UI for file uploads, drag-and-drop functionality, and real-time collaboration tools. |
+| **Trello** | Project management tool for task organization. | Drag-and-drop Kanban boards, real-time updates, and interactive UI elements. |
+| **Asana** | Task and project management application for teams. | Real-time task tracking, dynamic boards, and visual project timelines. |
+| **BBC** | News website offering global and local news. | Dynamic content updates, real-time notifications, and seamless video playback. |
+| **Medium** | Blogging platform for writers and readers. | Interactive editor, personalized reading lists, and infinite scrolling for articles. |
+| **Khan Academy** | Online learning platform offering free courses and lessons. | Interactive learning tools, real-time quizzes, and progress tracking. |
+| **GitHub (Front End)** | Code hosting platform for version control and collaboration. | Interactive dashboards, real-time updates on pull requests, and code comparison tools. |
+| **CodeSandbox** | Online code editor for web development. | Real-time collaborative editing, live previews, and seamless integration with GitHub. |
+| **Spotify (Web Player)** | Music streaming platform for discovering and playing music. | Real-time search, dynamic playlists, and audio playback optimization. |
+
+These examples showcase React's versatility in building scalable, interactive, and high-performing applications across various domains like social media, e-commerce, streaming, and productivity tools.
+
+---
+# References
+
+- https://www.netflix.com/
\ No newline at end of file
diff --git a/assets/readmes/Setting Up the Development Environment for React with Vite.md b/assets/readmes/Setting Up the Development Environment for React with Vite.md
new file mode 100644
index 0000000..632bf14
--- /dev/null
+++ b/assets/readmes/Setting Up the Development Environment for React with Vite.md
@@ -0,0 +1,88 @@
+---
+date : 2024-12-01T21:08:32+05:30
+draft : false
+title : Setting Up the Development Environment for React With Vite
+---
+
+### 1. Installing Node.js and npm
+
+Node.js and npm (Node Package Manager) are prerequisites for creating and running React applications.
+
+1. **Download and Install Node.js**:
+ - Visit the [Node.js official website](https://nodejs.org).
+ - Download the **LTS** version for stability.
+ - Follow the installation instructions for your operating system.
+2. **Verify Installation**:
+ - Open a terminal and run the following commands:
+```bash
+node -v
+npm -v
+```
+
+- These commands will display the installed versions of Node.js and npm.
+
+---
+
+### 2. Setting up a React Project
+
+1. Install Vite
+ Vite is a fast frontend build tool.
+ - Open a terminal and run
+```bash
+npm create vite@latest my-react-app --template react
+```
+
+ - Replace `my-react-app` with your desired project name.
+
+2. **Navigate to the Project Directory**:
+```bash
+cd my-react-app
+```
+
+3. **Install Dependencies**
+ Run the following command to install all the dependencies
+ ```bash
+ npm install
+ ```
+
+4. **Run the Development Server**
+ Start the Vite development server to preview your app
+ ```bash
+ npm run dev
+ ```
+
+ - The terminal will display a URL (e.g., `http://localhost:5173`) where you can view your app in the browser.
+
+---
+### 3. Overview of the Project Folder Structure
+
+Once the setup is complete, your project folder will look like this:
+
+```perl
+my-react-app/
+├── node_modules/ # Installed npm packages
+├── public/ # Static assets (e.g., images, icons)
+│ └── vite.svg # Default Vite logo
+├── src/ # Source code of your application
+│ ├── App.css # Styles for the App component
+│ ├── App.jsx # Main React component
+│ ├── main.jsx # Entry point for the application
+│ └── index.css # Global styles
+├── .gitignore # Files and folders to ignore in Git
+├── package.json # Project metadata and dependencies
+├── vite.config.js # Configuration file for Vite
+└── README.md # Project documentation
+```
+
+**Key Files and Folders**:
+
+- **`src/main.jsx`**: Entry point for your React app. It renders the root component (`App.jsx`).
+- **`src/App.jsx`**: Default React component created by Vite. Customize this file to start building your app.
+- **`public/`**: Store static assets like images or fonts.
+- **`package.json`**: Manages dependencies, scripts, and project metadata.
+- **`vite.config.js`**: Customize the build tool's behavior (e.g., plugins, server options).
+
+---
+# References
+
+- https://vite.dev/guide/
\ No newline at end of file
diff --git a/assets/readmes/State in React.md b/assets/readmes/State in React.md
new file mode 100644
index 0000000..becf749
--- /dev/null
+++ b/assets/readmes/State in React.md
@@ -0,0 +1,104 @@
+---
+date : 2024-12-01T21:31:26+05:30
+draft : false
+title : State in React
+---
+
+**State** is used to manage data that changes within a component. Unlike props, state is **mutable** and controlled by the component itself.
+
+---
+### Using the `useState` Hook
+
+1. Import `useState`
+ ```jsx
+ import { useState } from 'react';
+ ```
+
+2. Initialize state
+ ```jsx
+ const [count, setCount] = useState(0);
+ ```
+
+3. Update state
+ ```jsx
+ setCount(count + 1);
+ ```
+
+---
+### Example of State
+
+```jsx
+function Counter() {
+ const [count, setCount] = useState(0);
+
+ return (
+
+
Count: {count}
+
+
+ );
+}
+```
+
+---
+### Updating and Managing State
+
+1. Updating State
+ - State updates are asynchronous. React batches multiple state updates for performance.
+ - Use the previous state for calculations
+ ```jsx
+ setCount((prevCount) => prevCount + 1);
+ ```
+
+2. Managing Complex State
+ - For objects or arrays, update using the spread operator
+ ```jsx
+ const [user, setUser] = useState({ name: "John", age: 25 });
+ setUser((prevUser) => ({ ...prevUser, age: 26 }));
+ ```
+
+3. Conditional Rendering Based on State
+ ```jsx
+ function Toggle() {
+ const [isOn, setIsOn] = useState(false);
+
+ return (
+
+ );
+ }
+ ```
+
+4. State in Forms
+ Manage input fields using state
+ ```jsx
+ function Form() {
+ const [name, setName] = useState("");
+
+ return (
+ setName(e.target.value)}
+ />
+ );
+ }
+ ```
+
+---
+### Summary
+
+|**Feature**|**Props**|**State**|
+|---|---|---|
+|**Mutability**|Immutable (read-only)|Mutable (can be updated)|
+|**Scope**|Passed from parent to child|Local to the component|
+|**Use Case**|Passing data between components|Managing dynamic, interactive data|
+|**Example**|``|`const [count, setCount] = useState(0)`|
+- **Props** make components reusable by passing dynamic data.
+- **State** manages component-specific data that changes over time.
+
+---
+# References
+
+- https://www.freecodecamp.org/news/full-guide-to-react-hooks/
\ No newline at end of file
diff --git a/assets/readmes/Styling in React.md b/assets/readmes/Styling in React.md
new file mode 100644
index 0000000..4fb8c46
--- /dev/null
+++ b/assets/readmes/Styling in React.md
@@ -0,0 +1,235 @@
+---
+date : 2024-12-01T21:42:01+05:30
+draft : false
+title : Styling in React
+---
+
+In React, styling can be done in multiple ways depending on your preferences and the requirements of the project. You can use inline styles, external CSS, CSS Modules, or even CSS-in-JS solutions like **Styled Components** and utility-first frameworks like **Tailwind CSS**. This note will explore these approaches and when to use each.
+
+---
+
+### 1. Inline Styles vs External CSS vs CSS Modules
+
+#### 1.1 Inline Styles
+
+Inline styles are applied directly within a component using a JavaScript object. Each style property is written in camelCase instead of hyphenated format.
+
+**Advantages**:
+
+- Simple and quick for small styles or individual components.
+- Styles are scoped to the component, preventing accidental global styles.
+
+**Disadvantages**:
+
+- Not ideal for complex styles or media queries.
+- Limited to basic styles and does not support pseudo-classes like `:hover` or `:focus`.
+
+#### Example of Inline Styles:
+
+```jsx
+function MyComponent() {
+ const buttonStyle = {
+ backgroundColor: 'blue',
+ color: 'white',
+ padding: '10px',
+ borderRadius: '5px'
+ };
+
+ return ;
+}
+```
+
+#### 1.2 External CSS
+
+External CSS is the traditional way of styling websites. You create a `.css` file, and then link it to your React component by importing it. This approach is great for global styles and standard CSS features like pseudo-classes, media queries, and more.
+
+**Advantages**:
+
+- Good for global styles and shared styles between components.
+- Easier to maintain for larger projects.
+
+**Disadvantages**:
+
+- Global scope can lead to unintended side effects (i.e., styles affecting unrelated components).
+- No automatic scoping of styles, which can lead to conflicts.
+
+#### Example of External CSS:
+
+1. **Create a CSS file** (`styles.css`):
+
+```css
+/* styles.css */
+.button {
+ background-color: blue;
+ color: white;
+ padding: 10px;
+ border-radius: 5px;
+}
+```
+
+2. **Import and use in a React component**:
+
+```jsx
+import './styles.css';
+
+function MyComponent() {
+ return ;
+}
+```
+
+#### 1.3 CSS Modules
+
+CSS Modules help in **scoping CSS locally** to the component, meaning styles are applied only to the specific component and won't interfere with other components. They use a unique class name behind the scenes to prevent style conflicts.
+
+**Advantages**:
+
+- Localized styling, meaning styles are scoped to the component.
+- Prevents class name conflicts.
+
+**Disadvantages**:
+
+- Can become verbose if not structured well.
+- Requires an additional setup (though this is done automatically in most React build tools).
+
+#### Example of CSS Modules
+
+1. **Create a CSS Module file** (`MyComponent.module.css`):
+
+```css
+/* MyComponent.module.css */
+.button {
+ background-color: blue;
+ color: white;
+ padding: 10px;
+ border-radius: 5px;
+}
+```
+
+2. **Import and use the CSS Module in the component**:
+
+```jsx
+import styles from './MyComponent.module.css';
+
+function MyComponent() {
+ return ;
+}
+```
+
+---
+
+### 2. Introduction to Styling Libraries
+
+#### 2.1 Styled Components (CSS-in-JS)
+
+**Styled Components** is a popular **CSS-in-JS** library that allows you to write CSS directly in your JavaScript/JSX files. It provides the benefit of scoped styling (like CSS Modules), but also supports more dynamic styles by utilizing JavaScript to control the style based on props or state.
+
+**Advantages**:
+
+- Styles are scoped to the component by default.
+- Supports dynamic styles based on props or state.
+- Full access to JavaScript logic in styling (e.g., conditional styles).
+
+**Disadvantages**:
+
+- May add some overhead for small projects.
+- Can result in larger JavaScript bundles due to the CSS-in-JS runtime.
+
+#### Example of Styled Components:
+
+1. **Install Styled Components**:
+
+```bash
+npm install styled-components
+```
+
+2. **Usage in a Component**:
+
+```jsx
+import styled from 'styled-components';
+
+const Button = styled.button`
+ background-color: blue;
+ color: white;
+ padding: 10px;
+ border-radius: 5px;
+
+ &:hover {
+ background-color: darkblue;
+ }
+`;
+
+function MyComponent() {
+ return ;
+}
+```
+
+In this example, the `Button` component is styled using `styled-components`, and the styles are applied only to that component.
+
+---
+
+#### 2.2 Tailwind CSS
+
+**Tailwind CSS** is a utility-first CSS framework that provides low-level utility classes to build custom designs. It’s often used with React to create fast and responsive UIs without writing custom CSS.
+
+**Advantages**:
+
+- Fast to develop with, as it avoids the need to write custom CSS.
+- Encourages reusable and consistent styles with utility classes.
+- Built-in responsive design and other common design patterns.
+
+**Disadvantages**:
+
+- May result in long class names in JSX, which can be harder to read.
+- Over-reliance on utility classes can lead to repetitive code.
+
+#### Example of Tailwind CSS:
+
+1. **Install Tailwind CSS**:
+
+```bash
+npm install tailwindcss
+npx tailwindcss init
+```
+
+2. **Setup and use in your React component**:
+
+```jsx
+function MyComponent() {
+ return (
+
+ );
+}
+```
+
+In this example, Tailwind utility classes are used to style the `button` element with background color, text color, padding, rounded corners, and a hover effect.
+
+---
+
+### Summary of Styling in React
+
+|**Method**|**Advantages**|**Disadvantages**|
+|---|---|---|
+|**Inline Styles**|Quick to implement, scoped to component|Limited features (no pseudo-classes), not ideal for complex styles|
+|**External CSS**|Great for global styles and easy to maintain|Global scope can lead to conflicts, no automatic scoping|
+|**CSS Modules**|Scoped to components, prevents style conflicts|Requires extra setup, can become verbose|
+|**Styled Components (CSS-in-JS)**|Scoped styles, dynamic styling based on props or state|Can add overhead, larger bundle sizes|
+|**Tailwind CSS**|Fast development, utility classes for consistent design|Long class names in JSX, can result in repetitive code|
+
+---
+
+### Conclusion
+
+- **Inline styles** are useful for simple, scoped styling but are limited for complex scenarios.
+- **External CSS** is great for global styles but can cause conflicts in larger projects.
+- **CSS Modules** provide scoped styles without the global leakage of external CSS.
+- **Styled Components** offer powerful, dynamic styling capabilities within React using JavaScript.
+- **Tailwind CSS** is an efficient utility-first CSS framework that speeds up development with a consistent design pattern.
+
+Choosing the right approach depends on the project size, requirements, and preferences. For small projects, inline styles or external CSS might suffice, while larger projects may benefit from CSS Modules, Styled Components, or Tailwind CSS.
+
+---
+# References
+
+- https://legacy.reactjs.org/docs/faq-styling.html
\ No newline at end of file
diff --git a/build-and-deploy-project-to-github.html b/build-and-deploy-project-to-github.html
index 06c4126..b302f1f 100644
--- a/build-and-deploy-project-to-github.html
+++ b/build-and-deploy-project-to-github.html
@@ -1,4 +1,4 @@
-Kavindu Udara
build and deploy project to github
12 February 2025
Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project:
+Kavindu Udara
build and deploy project to github
12 February 2025
Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project:
Install gh-pages:
@@ -82,4 +82,4 @@
Resources not loading - vite config error
-
This should fix the asset paths and make sure your deployed site loads correctly. If you encounter any more issues or need further assistance, feel free to let me know!
\ No newline at end of file
+
This should fix the asset paths and make sure your deployed site loads correctly. If you encounter any more issues or need further assistance, feel free to let me know!
\ No newline at end of file
diff --git a/build-and-deploy-project-to-github.txt b/build-and-deploy-project-to-github.txt
index 249c38e..9678bd8 100644
--- a/build-and-deploy-project-to-github.txt
+++ b/build-and-deploy-project-to-github.txt
@@ -5,9 +5,103 @@
7:I[6213,[],"MetadataBoundary"]
9:I[6213,[],"ViewportBoundary"]
b:I[4835,[],""]
-:HL["/me/_next/static/css/7cdffd469baeb000.css","style"]
-0:{"P":null,"b":"yWoAn8OvJELat1C2W9Cyt","p":"/me","c":["","build-and-deploy-project-to-github"],"i":false,"f":[[["",{"children":[["slug","build-and-deploy-project-to-github","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/7cdffd469baeb000.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","build-and-deploy-project-to-github","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","WFIZ4KjhAnYgpToqLorpa",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
-4:["$","div",null,{"className":"max-w-4xl mx-auto p-8","children":["$","div",null,{"className":"markdown-container","children":[["$","div",null,{"className":"flex flex-wrap items-center justify-start gap-4 mb-5","children":[["$","button",null,{"className":"p-4 rounded-lg cursor-pointer ","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 448 512","children":["$undefined",[["$","path","0",{"d":"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z","children":[]}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","h1",null,{"className":"text-4xl font-bold ","children":"build and deploy project to github"}]]}],["$","blockquote",null,{"className":"underline font-semibold","children":"12 February 2025"}],["$","hr",null,{}],["$","div",null,{"className":"prose","children":[["$","p","p-0",{"children":"Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project:"}],"\n",["$","ol","ol-0",{"children":["\n",["$","li","li-0",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Install gh-pages"}],":\nFirst, you need to install the ",["$","code","code-0",{"children":"gh-pages"}]," package as a dev dependency. Open your terminal and run the following command:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-sh","children":"npm install gh-pages --save-dev\n"}]}],"\n"]}],"\n",["$","li","li-1",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Update package.json"}],":\nNext, you need to make some updates to your ",["$","code","code-0",{"children":"package.json"}]," file. Add the following properties:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-json","children":"{\n \"homepage\": \"https://your-username.github.io/your-repo-name\",\n \"scripts\": {\n \"predeploy\": \"npm run build\",\n \"deploy\": \"gh-pages -d build\"\n }\n}\n"}]}],"\n",["$","p","p-1",{"children":["Replace ",["$","code","code-0",{"children":"your-username"}]," with your GitHub username and ",["$","code","code-1",{"children":"your-repo-name"}]," with the name of your repository."]}],"\n"]}],"\n",["$","li","li-2",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Build and deploy"}],":\nFinally, run the following command in your terminal to build and deploy your project:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-sh","children":"npm run deploy\n"}]}],"\n"]}],"\n"]}],"\n",["$","p","p-1",{"children":["This will create a production build of your React project and push it to a branch named ",["$","code","code-0",{"children":"gh-pages"}]," in your GitHub repository. Your site will be available at ",["$","code","code-1",{"children":"https://your-username.github.io/your-repo-name"}],"."]}],"\n",["$","p","p-2",{"children":"If you need any more help or run into any issues, feel free to ask!"}],"\n",["$","hr","hr-0",{}],"\n",["$","h1","h1-0",{"children":"Update the changes"}],"\n",["$","p","p-3",{"children":"Updating your deployed page on GitHub Pages after making changes to your project is quite straightforward. All you need to do is follow these steps:"}],"\n",["$","ol","ol-1",{"children":["\n",["$","li","li-0",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Make Changes"}],": First, make the necessary changes to your project locally."]}],"\n"]}],"\n",["$","li","li-1",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Commit Changes"}],": Save and commit your changes to your local repository:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-sh","children":"git add .\ngit commit -m \"Your commit message\"\n"}]}],"\n"]}],"\n",["$","li","li-2",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Push Changes"}],": Push your changes to your GitHub repository:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-sh","children":"git push origin main\n"}]}],"\n",["$","p","p-1",{"children":["Replace ",["$","code","code-0",{"children":"main"}]," with your branch name if it's different."]}],"\n"]}],"\n",["$","li","li-3",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Deploy Again"}],": Run the deploy script again to update the GitHub Pages with your latest changes:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-sh","children":"npm run deploy\n"}]}],"\n"]}],"\n"]}],"\n",["$","p","p-4",{"children":["This will rebuild your project and push the new build to the ",["$","code","code-0",{"children":"gh-pages"}]," branch, updating your deployed page."]}],"\n",["$","p","p-5",{"children":"By following these steps, your live site will reflect the latest changes you've made to your project. If you run into any issues or need further assistance, feel free to ask!"}],"\n",["$","hr","hr-1",{}],"\n",["$","h1","h1-1",{"children":"Resources not loading - vite config error"}],"\n",["$","p","p-6",{"children":["It looks like the problem is that your assets are not being found at the correct paths. This usually happens because of incorrect relative paths or base URL configuration. In Vite, you can fix this by setting the ",["$","code","code-0",{"children":"base"}]," property in ",["$","code","code-1",{"children":"vite.config.js"}]," to match your repository name."]}],"\n",["$","p","p-7",{"children":["Here’s how you can update your ",["$","code","code-0",{"children":"vite.config.js"}]," file:"]}],"\n",["$","ol","ol-2",{"children":["\n",["$","li","li-0",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Create or edit vite.config.js"}],":\nIf you don't have a ",["$","code","code-0",{"children":"vite.config.js"}]," file, create one in the root of your project. Add the following content:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-js","children":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n base: '/react-music-player/', // Replace with your repo name\n plugins: [react()],\n});\n"}]}],"\n",["$","p","p-1",{"children":["If you already have a ",["$","code","code-0",{"children":"vite.config.js"}]," file, just add or update the ",["$","code","code-1",{"children":"base"}]," property as shown above."]}],"\n"]}],"\n",["$","li","li-1",{"children":["\n",["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Rebuild and redeploy"}],":\nNow, rebuild your project and deploy it again:"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-sh","children":"npm run build\nnpm run deploy\n"}]}],"\n"]}],"\n"]}],"\n",["$","p","p-8",{"children":"This should fix the asset paths and make sure your deployed site loads correctly. If you encounter any more issues or need further assistance, feel free to let me know!"}]]}]]}]}]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","build-and-deploy-project-to-github"],"i":false,"f":[[["",{"children":[["slug","build-and-deploy-project-to-github","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","build-and-deploy-project-to-github","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","KWxV4gj02iTFUO1MRS_Nb",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:Td47,
+Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project:
+
+1. **Install gh-pages**:
+ First, you need to install the `gh-pages` package as a dev dependency. Open your terminal and run the following command:
+ ```sh
+ npm install gh-pages --save-dev
+ ```
+
+2. **Update package.json**:
+ Next, you need to make some updates to your `package.json` file. Add the following properties:
+ ```json
+ {
+ "homepage": "https://your-username.github.io/your-repo-name",
+ "scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build"
+ }
+ }
+ ```
+ Replace `your-username` with your GitHub username and `your-repo-name` with the name of your repository.
+
+3. **Build and deploy**:
+ Finally, run the following command in your terminal to build and deploy your project:
+ ```sh
+ npm run deploy
+ ```
+
+This will create a production build of your React project and push it to a branch named `gh-pages` in your GitHub repository. Your site will be available at `https://your-username.github.io/your-repo-name`.
+
+If you need any more help or run into any issues, feel free to ask!
+
+---
+
+# Update the changes
+
+Updating your deployed page on GitHub Pages after making changes to your project is quite straightforward. All you need to do is follow these steps:
+
+1. **Make Changes**: First, make the necessary changes to your project locally.
+
+2. **Commit Changes**: Save and commit your changes to your local repository:
+ ```sh
+ git add .
+ git commit -m "Your commit message"
+ ```
+
+3. **Push Changes**: Push your changes to your GitHub repository:
+ ```sh
+ git push origin main
+ ```
+ Replace `main` with your branch name if it's different.
+
+4. **Deploy Again**: Run the deploy script again to update the GitHub Pages with your latest changes:
+ ```sh
+ npm run deploy
+ ```
+
+This will rebuild your project and push the new build to the `gh-pages` branch, updating your deployed page.
+
+By following these steps, your live site will reflect the latest changes you've made to your project. If you run into any issues or need further assistance, feel free to ask!
+
+---
+
+# Resources not loading - vite config error
+
+It looks like the problem is that your assets are not being found at the correct paths. This usually happens because of incorrect relative paths or base URL configuration. In Vite, you can fix this by setting the `base` property in `vite.config.js` to match your repository name.
+
+Here’s how you can update your `vite.config.js` file:
+
+1. **Create or edit vite.config.js**:
+ If you don't have a `vite.config.js` file, create one in the root of your project. Add the following content:
+
+ ```js
+ // vite.config.js
+ import { defineConfig } from 'vite';
+ import react from '@vitejs/plugin-react';
+
+ export default defineConfig({
+ base: '/react-music-player/', // Replace with your repo name
+ plugins: [react()],
+ });
+ ```
+
+ If you already have a `vite.config.js` file, just add or update the `base` property as shown above.
+
+2. **Rebuild and redeploy**:
+ Now, rebuild your project and deploy it again:
+
+ ```sh
+ npm run build
+ npm run deploy
+ ```
+
+This should fix the asset paths and make sure your deployed site loads correctly. If you encounter any more issues or need further assistance, feel free to let me know!4:["$","$Lc",null,{"content":"$d","data":{"date":"2025-02-12T11:12:58+0530","draft":true,"title":"build and deploy project to github"}}]
a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
6:null
diff --git a/components-in-react.html b/components-in-react.html
new file mode 100644
index 0000000..86fd6f7
--- /dev/null
+++ b/components-in-react.html
@@ -0,0 +1,123 @@
+Kavindu Udara
Components in React
01 December 2024
React components are the building blocks of React applications. They allow developers to break the UI into reusable, independent pieces.
+
+
Functional Components vs Class Components
+
Aspect
Functional Components
Class Components
Definition
Plain JavaScript functions that return JSX.
ES6 classes that extend React.Component.
State
Uses the useState and useEffect hooks (introduced in React 16.8).
Uses this.state for managing state.
Lifecycle Methods
Replaced by hooks like useEffect.
Explicit lifecycle methods like componentDidMount.
Syntax
Simpler and more concise.
More verbose due to class structure.
Performance
Generally lighter and faster.
Slightly heavier because of class overhead.
Example
Functional Component:
Class Component:
```jsx
```jsx
function Greet() {
class Greet extends React.Component {
return <h1>Hello</h1>;
render() {
}
return <h1>Hello</h1>;
```
}
+
+
When to Use?
+
+
Use functional components whenever possible; they are the modern and preferred approach. Class components are now rarely used in new projects.
\ No newline at end of file
diff --git a/components-in-react.txt b/components-in-react.txt
new file mode 100644
index 0000000..61db6d0
--- /dev/null
+++ b/components-in-react.txt
@@ -0,0 +1,152 @@
+1:"$Sreact.fragment"
+2:I[5244,[],""]
+3:I[3866,[],""]
+5:I[6213,[],"OutletBoundary"]
+7:I[6213,[],"MetadataBoundary"]
+9:I[6213,[],"ViewportBoundary"]
+b:I[4835,[],""]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","components-in-react"],"i":false,"f":[[["",{"children":[["slug","components-in-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","components-in-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","fzAiIk6IGkXF1VmCsgKxh",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:T1273,
+React components are the building blocks of React applications. They allow developers to break the UI into reusable, independent pieces.
+
+---
+### Functional Components vs Class Components
+
+| **Aspect** | **Functional Components** | **Class Components** |
+| ------------------------ | --------------------------------------------------------------------- | ---------------------------------------------------- |
+| **Definition** | Plain JavaScript functions that return JSX. | ES6 classes that extend `React.Component`. |
+| **State** | Uses the `useState` and `useEffect` hooks (introduced in React 16.8). | Uses `this.state` for managing state. |
+| **Lifecycle Methods** | Replaced by hooks like `useEffect`. | Explicit lifecycle methods like `componentDidMount`. |
+| **Syntax** | Simpler and more concise. | More verbose due to class structure. |
+| **Performance** | Generally lighter and faster. | Slightly heavier because of class overhead. |
+| **Example** | | |
+| Functional Component: | Class Component: | |
+| ```jsx | ```jsx | |
+| function Greet() { | class Greet extends React.Component { | |
+| return `
Hello
`; | render() { | |
+| } | return `
Hello
`; | |
+| ``` | } | |
+
+---
+### When to Use?
+
+- Use functional components whenever possible; they are the modern and preferred approach. Class components are now rarely used in new projects.
+
+---
+### How to Create and Export Components
+
+1. Creating a Functional Component
+ ```jsx
+ // Greet.jsx
+ function Greet() {
+ return
Hello, World!
;
+ }
+ export default Greet;
+ ```
+
+2. Creating a Class Component
+ ```jsx
+ // Welcome.jsx
+ import React, { Component } from 'react';
+ class Welcome extends Component {
+ render() {
+ return
Welcome to React!
;
+ }
+ }
+ export default Welcome;
+ ```
+
+3. Named Exports
+ You can export multiple components from a file:
+```jsx
+// Greetings.jsx
+export function Hello() {
+ return
Hello!
;
+}
+
+export function Goodbye() {
+ return
Goodbye!
;
+}
+
+```
+
+---
+### Importing Components and Using Them Inside Other Components
+
+1. Default Export
+ Import and use a default exported component
+```jsx
+import Greet from './Greet';
+
+function App() {
+ return (
+
+
+
+ );
+}
+export default App;
+
+```
+
+2. Named Exports
+ Import and use named exported components
+```jsx
+import { Hello, Goodbye } from './Greetings';
+
+function App() {
+ return (
+
+
+
+
+ );
+}
+export default App;
+```
+
+3. Aliasing Components
+ Rename components during import
+```jsx
+import { Hello as Hi } from './Greetings';
+
+function App() {
+ return ;
+}
+export default App;
+```
+
+4. Composing Components
+ Use components inside other components to build a hierarchy
+```jsx
+import Greet from './Greet';
+
+function Header() {
+ return (
+
+
+
This is a header
+
+ );
+}
+
+export default Header;
+```
+
+---
+### Summary
+
+- **Functional Components** are the modern standard due to hooks and simplicity.
+- Components can be exported as default or named exports.
+- You can compose a rich UI by importing and using components inside other components.
+ This modular structure makes React scalable and maintainable.
+
+---
+# References
+
+- https://www.freecodecamp.org/news/function-component-vs-class-component-in-react/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T15:55:51.000Z","draft":false,"title":"Components in React"}}]
+a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
+8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
+6:null
diff --git a/conditional-rendering-in-react.html b/conditional-rendering-in-react.html
new file mode 100644
index 0000000..d7ec8d7
--- /dev/null
+++ b/conditional-rendering-in-react.html
@@ -0,0 +1,84 @@
+Kavindu Udara
Conditional Rendering in React
01 December 2024
Conditional rendering allows components to decide what to display based on certain conditions. React provides several ways to implement conditional rendering, making it easy to display different UI elements based on the state or props of a component.
+
+
1. Using if-else Statements
+
You can use standard JavaScript if-else statements for conditional rendering within a component. Typically, you would do this outside of the JSX return statement, such as within the render function or directly before the return.
In this example, if isLoggedIn is true, "Welcome Back!" is rendered; otherwise, "Please Sign In" is shown. Ternary operators are great for simple conditions.
+
+
3. Using && (Logical AND) Operator
+
The && (logical AND) operator can be used for conditional rendering when you want to display something only if a condition is true. This is useful for scenarios where you only want to render an element when a certain condition holds.
In this example, multiple conditions are checked using nested ternary operators to display different messages based on whether the user is logged in and whether they are an admin.
When you want to render something only if a condition is true
{isLoggedIn && <h1>Welcome!</h1>}
+
+
Best Practices
+
+
Use ternary operators for simple conditions, especially within JSX.
+
Use && for conditional rendering when you only want to render an element when a condition is true.
+
For more complex logic, prefer if-else statements outside of JSX.
+
+
By using these techniques, you can conditionally render content in React based on various states, props, or conditions, enabling dynamic and interactive user interfaces.
\ No newline at end of file
diff --git a/conditional-rendering-in-react.txt b/conditional-rendering-in-react.txt
new file mode 100644
index 0000000..28c012e
--- /dev/null
+++ b/conditional-rendering-in-react.txt
@@ -0,0 +1,137 @@
+1:"$Sreact.fragment"
+2:I[5244,[],""]
+3:I[3866,[],""]
+5:I[6213,[],"OutletBoundary"]
+7:I[6213,[],"MetadataBoundary"]
+9:I[6213,[],"ViewportBoundary"]
+b:I[4835,[],""]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","conditional-rendering-in-react"],"i":false,"f":[[["",{"children":[["slug","conditional-rendering-in-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","conditional-rendering-in-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","KrClAiRZBN8Hj3peww_OE",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:T1016,
+Conditional rendering allows components to decide what to display based on certain conditions. React provides several ways to implement conditional rendering, making it easy to display different UI elements based on the state or props of a component.
+
+---
+
+### 1. Using `if-else` Statements
+
+You can use standard JavaScript `if-else` statements for conditional rendering within a component. Typically, you would do this outside of the JSX return statement, such as within the render function or directly before the return.
+
+#### Example: Using `if-else`
+
+```jsx
+function Greeting({ isLoggedIn }) {
+ let message;
+
+ if (isLoggedIn) {
+ message =
Welcome Back!
;
+ } else {
+ message =
Please Sign In
;
+ }
+
+ return
{message}
;
+}
+```
+
+In this example, `if-else` is used to set the value of `message` based on the `isLoggedIn` prop, which is then rendered inside the component.
+
+---
+
+### 2. Using Ternary Operators
+
+A **ternary operator** is a shorthand for `if-else` and is commonly used for inline conditional rendering within JSX. It has the following syntax:
+
+```jsx
+condition ? expression_if_true : expression_if_false;
+```
+
+#### Example: Using Ternary Operator
+
+```jsx
+function Greeting({ isLoggedIn }) {
+ return (
+
+ {isLoggedIn ?
Welcome Back!
:
Please Sign In
}
+
+ );
+}
+```
+
+In this example, if `isLoggedIn` is `true`, "Welcome Back!" is rendered; otherwise, "Please Sign In" is shown. Ternary operators are great for simple conditions.
+
+---
+
+### 3. Using `&&` (Logical AND) Operator
+
+The `&&` (logical AND) operator can be used for conditional rendering when you want to display something only if a condition is `true`. This is useful for scenarios where you only want to render an element when a certain condition holds.
+
+#### Example: Using `&&` Operator
+
+```jsx
+function Notification({ message }) {
+ return (
+
+ {message &&
{message}
}
+
+ );
+}
+```
+
+In this example, the paragraph will only be rendered if `message` is truthy. If `message` is `null` or `undefined`, nothing will be displayed.
+
+---
+
+### 4. Conditional Rendering Based on Multiple Conditions
+
+You can also combine `if-else`, ternary operators, and `&&` logic for more complex conditions.
+
+#### Example: Multiple Conditions
+
+```jsx
+function UserStatus({ user }) {
+ return (
+
+ {user ? (
+ user.isAdmin ? (
+
Welcome, Admin!
+ ) : (
+
Welcome, {user.name}!
+ )
+ ) : (
+
Please log in
+ )}
+
+ );
+}
+```
+
+In this example, multiple conditions are checked using nested ternary operators to display different messages based on whether the user is logged in and whether they are an admin.
+
+---
+
+### Summary of Conditional Rendering Methods
+
+|**Method**|**Use Case**|**Example**|
+|---|---|---|
+|**`if-else`**|For more complex conditions or multiple branches|`if (isLoggedIn) { return
}`|
+|**`&&` (Logical AND)**|When you want to render something only if a condition is true|`{isLoggedIn &&
Welcome!
}`|
+
+---
+
+### Best Practices
+
+- Use **ternary operators** for simple conditions, especially within JSX.
+- Use **`&&`** for conditional rendering when you only want to render an element when a condition is true.
+- For more complex logic, prefer **`if-else` statements** outside of JSX.
+
+By using these techniques, you can conditionally render content in React based on various states, props, or conditions, enabling dynamic and interactive user interfaces.
+
+---
+# References
+
+- https://www.w3schools.com/react/react_conditional_rendering.asp
+- https://legacy.reactjs.org/docs/conditional-rendering.html4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T16:05:23.000Z","draft":false,"title":"Conditional Rendering in React"}}]
+a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
+8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
+6:null
diff --git a/deploying-a-react-app.html b/deploying-a-react-app.html
new file mode 100644
index 0000000..b1a502c
--- /dev/null
+++ b/deploying-a-react-app.html
@@ -0,0 +1,84 @@
+Kavindu Udara
Deploying a React App
01 December 2024
Deploying a React app involves several steps to prepare the app for production, including optimizing the build, configuring deployment settings, and choosing a hosting platform. This note focuses on the preparation of a React app for production using the npm run build command, which creates an optimized version of your app for deployment.
+
+
1. Preparing the App for Production Using npm run build
+
When you’re ready to deploy your React app, the first step is to create a production build. React provides a command npm run build that bundles your app into static files optimized for performance. This build includes minified JavaScript, optimized assets, and a structure that can be served by a static server.
+
Steps to Prepare Your React App for Production
+
+
+
Ensure the Project is Ready:
+
+
Before building your app, make sure all code is final and all features are working as expected.
+
Test your app thoroughly in development mode (npm start).
+
+
+
+
Create a Production Build: To create a production-ready build, open your terminal and run:
+
npm run build
+
+
This command does the following:
+
+
Minifies and bundles your JavaScript and CSS files for faster loading.
+
Optimizes images and other assets.
+
Adds hashing to filenames to improve caching.
+
Ensures that the app is ready for deployment to a web server.
+
+
After running the command, a new folder named build/ will be created in your project directory.
+
+
+
Inspect the Build Folder: The build/ folder will contain the following files:
+
+
index.html: The main HTML file that includes links to your bundled JavaScript and CSS.
+
static/: A folder containing all the assets (images, fonts, etc.) and minified JavaScript and CSS files.
+
asset-manifest.json: Contains a list of files with their hash for cache management.
+
+
This build folder is ready to be deployed to a static server.
+
+
+
Environment Variables: Ensure that all necessary environment variables are set for production. You can define them in .env files or directly in the server environment.
+
For example, if you need to specify a different API URL for production, you can use:
+
REACT_APP_API_URL=https://api.yourdomain.com
+
+
These environment variables are automatically replaced during the build process.
+
+
+
Check the Build: It's a good idea to test the build locally before deploying. You can use a simple static server like serve to serve your production build.
+
First, install serve globally if you don’t have it:
+
npm install -g serve
+
+
Then, run the following command to serve your build:
+
serve -s build
+
+
This will start a local server that serves your production build, allowing you to check if everything is working as expected before deploying it to a live server.
+
+
+
+
2. Key Benefits of Using npm run build
+
+
Performance Optimization: The build command optimizes your React app for production by reducing the file sizes (through minification), removing unnecessary code, and making the app load faster.
+
Caching: The build process generates hashed filenames for assets, improving cache management on the client side. This means that once assets are cached, users won't have to re-download them unless they change.
+
Compatibility: The production build is optimized to run on most modern web servers, making it easier to deploy to different hosting platforms.
+
+
+
3. Deploying the Production Build
+
Once the build is ready, you can deploy it to your desired hosting platform. Some common platforms for deploying React apps include:
+
+
Netlify: Simple, free hosting for static sites. Just drag and drop the build/ folder or link your GitHub repository.
+
Vercel: Another popular platform for static apps that integrates well with React. It automatically optimizes the build during deployment.
+
GitHub Pages: Free hosting for static websites directly from your GitHub repository.
+
Firebase Hosting: Provides fast, secure hosting for web apps with a free tier available.
+
AWS S3 & CloudFront: For more complex or scalable deployments.
+
+
+
Summary
+
+
npm run build is the key command for preparing your React app for production. It bundles and optimizes your app for performance and scalability.
+
After building the app, you will have a build/ folder containing all the optimized assets ready to be deployed.
+
Ensure that environment variables are correctly set for production, and test the build locally before deploying it.
+
Popular platforms for deploying React apps include Netlify, Vercel, Firebase, and GitHub Pages.
+
+
By following these steps, you’ll ensure your React app is production-ready and performs optimally for end-users.
\ No newline at end of file
diff --git a/deploying-a-react-app.txt b/deploying-a-react-app.txt
new file mode 100644
index 0000000..211eeba
--- /dev/null
+++ b/deploying-a-react-app.txt
@@ -0,0 +1,113 @@
+1:"$Sreact.fragment"
+2:I[5244,[],""]
+3:I[3866,[],""]
+5:I[6213,[],"OutletBoundary"]
+7:I[6213,[],"MetadataBoundary"]
+9:I[6213,[],"ViewportBoundary"]
+b:I[4835,[],""]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","deploying-a-react-app"],"i":false,"f":[[["",{"children":[["slug","deploying-a-react-app","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","deploying-a-react-app","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","aNzXhI1YBnB8l-6JbdW3g",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:T1421,
+Deploying a React app involves several steps to prepare the app for production, including optimizing the build, configuring deployment settings, and choosing a hosting platform. This note focuses on the preparation of a React app for production using the `npm run build` command, which creates an optimized version of your app for deployment.
+
+---
+
+### 1. Preparing the App for Production Using `npm run build`
+
+When you’re ready to deploy your React app, the first step is to create a **production build**. React provides a command `npm run build` that bundles your app into static files optimized for performance. This build includes minified JavaScript, optimized assets, and a structure that can be served by a static server.
+
+#### Steps to Prepare Your React App for Production
+
+1. **Ensure the Project is Ready:**
+
+ - Before building your app, make sure all code is final and all features are working as expected.
+ - Test your app thoroughly in development mode (`npm start`).
+2. **Create a Production Build:** To create a production-ready build, open your terminal and run:
+
+ ```bash
+ npm run build
+ ```
+
+ This command does the following:
+
+ - **Minifies** and **bundles** your JavaScript and CSS files for faster loading.
+ - Optimizes images and other assets.
+ - Adds **hashing** to filenames to improve caching.
+ - Ensures that the app is ready for deployment to a web server.
+
+ After running the command, a new folder named `build/` will be created in your project directory.
+
+3. **Inspect the Build Folder:** The `build/` folder will contain the following files:
+
+ - `index.html`: The main HTML file that includes links to your bundled JavaScript and CSS.
+ - `static/`: A folder containing all the assets (images, fonts, etc.) and minified JavaScript and CSS files.
+ - `asset-manifest.json`: Contains a list of files with their hash for cache management.
+
+ This build folder is ready to be deployed to a static server.
+
+4. **Environment Variables:** Ensure that all necessary environment variables are set for production. You can define them in `.env` files or directly in the server environment.
+
+ For example, if you need to specify a different **API URL** for production, you can use:
+
+ ```bash
+ REACT_APP_API_URL=https://api.yourdomain.com
+ ```
+
+ These environment variables are automatically replaced during the build process.
+
+5. **Check the Build:** It's a good idea to test the build locally before deploying. You can use a simple static server like **serve** to serve your production build.
+
+ First, install `serve` globally if you don’t have it:
+
+ ```bash
+ npm install -g serve
+ ```
+
+ Then, run the following command to serve your build:
+
+ ```bash
+ serve -s build
+ ```
+
+ This will start a local server that serves your production build, allowing you to check if everything is working as expected before deploying it to a live server.
+
+
+---
+
+### 2. Key Benefits of Using `npm run build`
+
+- **Performance Optimization:** The `build` command optimizes your React app for production by reducing the file sizes (through minification), removing unnecessary code, and making the app load faster.
+- **Caching:** The build process generates hashed filenames for assets, improving cache management on the client side. This means that once assets are cached, users won't have to re-download them unless they change.
+- **Compatibility:** The production build is optimized to run on most modern web servers, making it easier to deploy to different hosting platforms.
+
+---
+
+### 3. Deploying the Production Build
+
+Once the build is ready, you can deploy it to your desired hosting platform. Some common platforms for deploying React apps include:
+
+- **Netlify:** Simple, free hosting for static sites. Just drag and drop the `build/` folder or link your GitHub repository.
+- **Vercel:** Another popular platform for static apps that integrates well with React. It automatically optimizes the build during deployment.
+- **GitHub Pages:** Free hosting for static websites directly from your GitHub repository.
+- **Firebase Hosting:** Provides fast, secure hosting for web apps with a free tier available.
+- **AWS S3 & CloudFront:** For more complex or scalable deployments.
+
+---
+
+### Summary
+
+- **`npm run build`** is the key command for preparing your React app for production. It bundles and optimizes your app for performance and scalability.
+- After building the app, you will have a `build/` folder containing all the optimized assets ready to be deployed.
+- Ensure that environment variables are correctly set for production, and test the build locally before deploying it.
+- Popular platforms for deploying React apps include Netlify, Vercel, Firebase, and GitHub Pages.
+
+By following these steps, you’ll ensure your React app is production-ready and performs optimally for end-users.
+
+---
+# References
+
+- https://www.geeksforgeeks.org/how-do-you-deploy-a-react-application/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T16:14:35.000Z","draft":false,"title":"Deploying a React App"}}]
+a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
+8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
+6:null
diff --git a/event-handling-in-react.html b/event-handling-in-react.html
new file mode 100644
index 0000000..4ba6f80
--- /dev/null
+++ b/event-handling-in-react.html
@@ -0,0 +1,148 @@
+Kavindu Udara
Event Handling in React
01 December 2024
React provides a way to handle user interactions such as clicks, form submissions, and other events using event handlers. These handlers work similarly to JavaScript event listeners but are optimized for React's virtual DOM.
+
+
1. Handling Events in React
+
Key Points:
+
+
Event handlers in React are written as camelCase (e.g., onClick, onChange).
+
Handlers are passed as functions, not strings (e.g., onClick={() => alert('Clicked!')}).
+
+
Common Event Handlers
+
+
Click Events: Triggered when an element is clicked.
2. Event Binding and Passing Data with Event Handlers
+
Event Binding
+
In React, event handlers automatically bind to the component instance, so you usually don't need explicit binding as in class components. However, in class components, you can bind methods in three ways:
Conditional rendering allows components to decide what to display based on certain conditions. React provides several ways to implement conditional rendering, making it easy to display different UI elements based on the state or props of a component.
...
Deploying a React app involves several steps to prepare the app for production, including optimizing the build, configuring deployment settings, and choosing a hosting platform. This note focuses on the preparation of a React app for production using the npm run build command, which creates an optimized version of your app for deployment.
...
React provides a way to handle user interactions such as clicks, form submissions, and other events using event handlers. These handlers work similarly to JavaScript event listeners but are optimized for React's virtual DOM.
...
Rendering lists in React is common for displaying multiple items dynamically. React provides a built-in way to efficiently render lists using JavaScript array methods like .map(). Additionally, using keys is important for optimizing rendering and maintaining state in lists.
...
Props (short for properties) are used to pass data from a parent component to a child component. Props are read-only, meaning they cannot be modified by the child component receiving them.
...
React hooks allow functional components to manage side effects, state, and other lifecycle events. The introduction of hooks has simplified component lifecycle management and enabled functional components to become more powerful and feature-rich.
...
In React, styling can be done in multiple ways depending on your preferences and the requirements of the project. You can use inline styles, external CSS, CSS Modules, or even CSS-in-JS solutions like Styled Components and utility-first frameworks like Tailwind CSS. This note will explore these approaches and when to use each.
...
Yes, you can integrate WhatsApp into your web application using the WhatsApp Business API. This API allows you to send and receive messages, manage contacts, and automate interactions with users on WhatsApp. Here's how you can get started:
-...
\ No newline at end of file
diff --git a/index.txt b/index.txt
index 97fa595..3149fe1 100644
--- a/index.txt
+++ b/index.txt
@@ -1,13 +1,13 @@
1:"$Sreact.fragment"
2:I[5244,[],""]
3:I[3866,[],""]
-4:I[8173,["974","static/chunks/app/page-91639fe7c172535c.js"],""]
+4:I[8173,["974","static/chunks/app/page-28d4954a8febb4bc.js"],""]
5:I[6213,[],"OutletBoundary"]
7:I[6213,[],"MetadataBoundary"]
9:I[6213,[],"ViewportBoundary"]
b:I[4835,[],""]
-:HL["/me/_next/static/css/7cdffd469baeb000.css","style"]
-0:{"P":null,"b":"yWoAn8OvJELat1C2W9Cyt","p":"/me","c":["",""],"i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/7cdffd469baeb000.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","div",null,{"className":"max-w-4xl mx-auto p-8","children":[["$","h1",null,{"className":"text-3xl font-bold mb-8","children":"Available Blogs"}],["$","div",null,{"className":"space-y-4","children":[["$","div","0",{"children":[["$","h2",null,{"children":"build and deploy project to github"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project: ..."}]}],["$","$L4",null,{"href":"/build-and-deploy-project-to-github","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","1",{"children":[["$","h2",null,{"children":"Getting Started Guide"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Content of the guide... ..."}]}],["$","$L4",null,{"href":"/getting-started-guide","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","2",{"children":[["$","h2",null,{"children":"My First Blog Post"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/': ..."}]}],["$","$L4",null,{"href":"/my-first-blog-post","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","3",{"children":[["$","h2",null,{"children":"What Is JSX TSX and How It Differs From HTML"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":[["$","strong","strong-0",{"children":"JSX (JavaScript XML)"}],": A syntax extension for JavaScript used in React to describe the UI structure. ..."]}],"\n"]}]}],["$","$L4",null,{"href":"/what-is-jsx-tsx-and-how-it-differs-from-html","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","4",{"children":[["$","h2",null,{"children":"Whatsapp"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":["Yes, you can integrate WhatsApp into your web application using the ",["$","strong","strong-0",{"children":"WhatsApp Business API"}],". This API allows you to send and receive messages, manage contacts, and automate interactions with users on WhatsApp. Here's how you can get started:\n..."]}]}],["$","$L4",null,{"href":"/whatsapp","children":"Learn More"}],["$","hr",null,{}]]}]]}]]}],null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","E2dtHTJ_tOrGuvLu3c5IA",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["",""],"i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","div",null,{"className":"max-w-4xl mx-auto p-8","children":[["$","h1",null,{"className":"text-3xl font-bold mb-8","children":"Available Blogs"}],["$","div",null,{"className":"space-y-4","children":[["$","div","0",{"children":[["$","h2",null,{"children":"build and deploy project to github"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Great to hear that you're ready to publish your React project on GitHub Pages! Here are the steps you can follow to build and deploy your project: ..."}]}],["$","$L4",null,{"href":"/build-and-deploy-project-to-github","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","1",{"children":[["$","h2",null,{"children":"Components in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"React components are the building blocks of React applications. They allow developers to break the UI into reusable, independent pieces.\r..."}]}],["$","$L4",null,{"href":"/components-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","2",{"children":[["$","h2",null,{"children":"Conditional Rendering in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Conditional rendering allows components to decide what to display based on certain conditions. React provides several ways to implement conditional rendering, making it easy to display different UI elements based on the state or props of a component.\r..."}]}],["$","$L4",null,{"href":"/conditional-rendering-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","3",{"children":[["$","h2",null,{"children":"Deploying a React App"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":["Deploying a React app involves several steps to prepare the app for production, including optimizing the build, configuring deployment settings, and choosing a hosting platform. This note focuses on the preparation of a React app for production using the ",["$","code","code-0",{"children":"npm run build"}]," command, which creates an optimized version of your app for deployment.\r..."]}]}],["$","$L4",null,{"href":"/deploying-a-react-app","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","4",{"children":[["$","h2",null,{"children":"Event Handling in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"React provides a way to handle user interactions such as clicks, form submissions, and other events using event handlers. These handlers work similarly to JavaScript event listeners but are optimized for React's virtual DOM.\r..."}]}],["$","$L4",null,{"href":"/event-handling-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","5",{"children":[["$","h2",null,{"children":"Getting Started Guide"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Content of the guide... ..."}]}],["$","$L4",null,{"href":"/getting-started-guide","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","6",{"children":[["$","h2",null,{"children":"Lists and Keys in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":["Rendering lists in React is common for displaying multiple items dynamically. React provides a built-in way to efficiently render lists using JavaScript array methods like ",["$","code","code-0",{"children":".map()"}],". Additionally, using ",["$","strong","strong-0",{"children":"keys"}]," is important for optimizing rendering and maintaining state in lists.\r..."]}]}],["$","$L4",null,{"href":"/lists-and-keys-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","7",{"children":[["$","h2",null,{"children":"My First Blog Post"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/': ..."}]}],["$","$L4",null,{"href":"/my-first-blog-post","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","8",{"children":[["$","h2",null,{"children":"Props in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"Props"}]," (short for properties) are used to pass data from a parent component to a child component. Props are ",["$","strong","strong-1",{"children":"read-only"}],", meaning they cannot be modified by the child component receiving them.\r..."]}]}],["$","$L4",null,{"href":"/props-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","9",{"children":[["$","h2",null,{"children":"React Fundamentals"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","ol","ol-0",{"children":["\n",["$","li","li-0",{"children":[["$","strong","strong-0",{"children":"Introduction"}],"\r..."]}],"\n"]}]}],["$","$L4",null,{"href":"/react-fundamentals","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","10",{"children":[["$","h2",null,{"children":"React Lifecycle and Hooks"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"React hooks allow functional components to manage side effects, state, and other lifecycle events. The introduction of hooks has simplified component lifecycle management and enabled functional components to become more powerful and feature-rich.\r..."}]}],["$","$L4",null,{"href":"/react-lifecycle-and-hooks","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","11",{"children":[["$","h2",null,{"children":"React Reusable Components"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":"Reusable components are building blocks of a React application designed to be reused in multiple places.\r..."}],"\n"]}]}],["$","$L4",null,{"href":"/react-reusable-components","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","12",{"children":[["$","h2",null,{"children":"React Virtual DOM"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":["The ",["$","strong","strong-0",{"children":"Virtual DOM (VDOM)"}]," is a lightweight in-memory representation of the real DOM.\r..."]}],"\n"]}]}],["$","$L4",null,{"href":"/react-virtual-dom","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","13",{"children":[["$","h2",null,{"children":"Real World Examples of Apps Build With React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":"This is some real world examples that build with react\r..."}]}],["$","$L4",null,{"href":"/real-world-examples-of-apps-build-with-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","14",{"children":[["$","h2",null,{"children":"Setting Up the Development Environment for React With Vite"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":[["$","h3","h3-0",{"children":"1. Installing Node.js and npm"}],"\n",["$","p","p-0",{"children":"..."}]]}],["$","$L4",null,{"href":"/setting-up-the-development-environment-for-react-with-vite","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","15",{"children":[["$","h2",null,{"children":"State in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":[["$","strong","strong-0",{"children":"State"}]," is used to manage data that changes within a component. Unlike props, state is ",["$","strong","strong-1",{"children":"mutable"}]," and controlled by the component itself.\r..."]}]}],["$","$L4",null,{"href":"/state-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","16",{"children":[["$","h2",null,{"children":"Styling in React"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":["In React, styling can be done in multiple ways depending on your preferences and the requirements of the project. You can use inline styles, external CSS, CSS Modules, or even CSS-in-JS solutions like ",["$","strong","strong-0",{"children":"Styled Components"}]," and utility-first frameworks like ",["$","strong","strong-1",{"children":"Tailwind CSS"}],". This note will explore these approaches and when to use each.\r..."]}]}],["$","$L4",null,{"href":"/styling-in-react","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","17",{"children":[["$","h2",null,{"children":"What Is JSX TSX and How It Differs From HTML"}],["$","blockquote",null,{"children":"01 December 2024"}],["$","div",null,{"className":"prose my-5","children":["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":[["$","strong","strong-0",{"children":"JSX (JavaScript XML)"}],": A syntax extension for JavaScript used in React to describe the UI structure. ..."]}],"\n"]}]}],["$","$L4",null,{"href":"/what-is-jsx-tsx-and-how-it-differs-from-html","children":"Learn More"}],["$","hr",null,{}]]}],["$","div","18",{"children":[["$","h2",null,{"children":"Whatsapp"}],["$","blockquote",null,{"children":"12 February 2025"}],["$","div",null,{"className":"prose my-5","children":["$","p","p-0",{"children":["Yes, you can integrate WhatsApp into your web application using the ",["$","strong","strong-0",{"children":"WhatsApp Business API"}],". This API allows you to send and receive messages, manage contacts, and automate interactions with users on WhatsApp. Here's how you can get started:\n..."]}]}],["$","$L4",null,{"href":"/whatsapp","children":"Learn More"}],["$","hr",null,{}]]}]]}]]}],null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","sYEptTizoutWnPW8h8jyL",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
6:null
diff --git a/lists-and-keys-in-react.html b/lists-and-keys-in-react.html
new file mode 100644
index 0000000..8833556
--- /dev/null
+++ b/lists-and-keys-in-react.html
@@ -0,0 +1,104 @@
+Kavindu Udara
Lists and Keys in React
01 December 2024
Rendering lists in React is common for displaying multiple items dynamically. React provides a built-in way to efficiently render lists using JavaScript array methods like .map(). Additionally, using keys is important for optimizing rendering and maintaining state in lists.
+
+
1. Rendering Lists with .map()
+
In React, the .map() function is commonly used to iterate over an array of data and return an array of elements that can be rendered. This is especially useful for rendering dynamic data like lists of items.
We use the .map() method to iterate over the items array.
+
For each item, we return a list item (<li>) containing the item text.
+
+
+
2. Importance of Keys in List Rendering
+
Keys help React identify which items have changed, been added, or removed, allowing for efficient updates to the virtual DOM and the UI. When rendering lists, React needs a unique identifier for each element to keep track of their position and improve performance.
+
Why are Keys Important?
+
+
Efficient Updates: Without keys, React would have to re-render all list items when one item changes. With keys, React only re-renders the changed items.
+
Unique Identification: Keys ensure that React can distinguish between individual elements in a list.
+
+
Best Practices for Keys:
+
+
Keys must be unique among siblings (elements at the same level in the list).
+
Avoid using array indices as keys when the list can change dynamically (e.g., items can be added or removed).
Each list item has a unique id which is used as the key.
+
This ensures that React can efficiently track changes to the list.
+
+
+
3. Handling Dynamic List Changes
+
When the list data changes (e.g., items are added, removed, or reordered), keys help React know how to efficiently update the UI. Without keys or with incorrect keys, React may not be able to identify which items are changing and might re-render the entire list unnecessarily.
\ No newline at end of file
diff --git a/lists-and-keys-in-react.txt b/lists-and-keys-in-react.txt
new file mode 100644
index 0000000..57c44fd
--- /dev/null
+++ b/lists-and-keys-in-react.txt
@@ -0,0 +1,144 @@
+1:"$Sreact.fragment"
+2:I[5244,[],""]
+3:I[3866,[],""]
+5:I[6213,[],"OutletBoundary"]
+7:I[6213,[],"MetadataBoundary"]
+9:I[6213,[],"ViewportBoundary"]
+b:I[4835,[],""]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","lists-and-keys-in-react"],"i":false,"f":[[["",{"children":[["slug","lists-and-keys-in-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","lists-and-keys-in-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","Oi6KK3K3jtPKQEpe9FHOL",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:T11a2,
+Rendering lists in React is common for displaying multiple items dynamically. React provides a built-in way to efficiently render lists using JavaScript array methods like `.map()`. Additionally, using **keys** is important for optimizing rendering and maintaining state in lists.
+
+---
+
+#### 1. Rendering Lists with `.map()`
+
+In React, the `.map()` function is commonly used to iterate over an array of data and return an array of elements that can be rendered. This is especially useful for rendering dynamic data like lists of items.
+
+##### Example: Rendering a List of Items
+
+```jsx
+function ItemList() {
+ const items = ['Apple', 'Banana', 'Cherry'];
+
+ return (
+
+ {items.map((item, index) => (
+
{item}
+ ))}
+
+ );
+}
+```
+
+In this example:
+
+- We use the `.map()` method to iterate over the `items` array.
+- For each item, we return a list item (`
`) containing the `item` text.
+
+---
+
+#### 2. Importance of Keys in List Rendering
+
+**Keys** help React identify which items have changed, been added, or removed, allowing for efficient updates to the virtual DOM and the UI. When rendering lists, React needs a unique identifier for each element to keep track of their position and improve performance.
+
+##### Why are Keys Important?
+
+- **Efficient Updates**: Without keys, React would have to re-render all list items when one item changes. With keys, React only re-renders the changed items.
+- **Unique Identification**: Keys ensure that React can distinguish between individual elements in a list.
+
+##### Best Practices for Keys:
+
+- Keys must be **unique** among siblings (elements at the same level in the list).
+- Avoid using **array indices** as keys when the list can change dynamically (e.g., items can be added or removed).
+
+##### Example: Using Unique Keys
+
+```jsx
+function ItemList() {
+ const items = [
+ { id: 1, name: 'Apple' },
+ { id: 2, name: 'Banana' },
+ { id: 3, name: 'Cherry' }
+ ];
+
+ return (
+
+ {items.map((item) => (
+
{item.name}
+ ))}
+
+ );
+}
+```
+
+In this example:
+
+- Each list item has a unique `id` which is used as the key.
+- This ensures that React can efficiently track changes to the list.
+
+---
+
+#### 3. Handling Dynamic List Changes
+
+When the list data changes (e.g., items are added, removed, or reordered), keys help React know how to efficiently update the UI. Without keys or with incorrect keys, React may not be able to identify which items are changing and might re-render the entire list unnecessarily.
+
+##### Example: Reordering List Items
+
+```jsx
+function ItemList() {
+ const [items, setItems] = useState([
+ { id: 1, name: 'Apple' },
+ { id: 2, name: 'Banana' },
+ { id: 3, name: 'Cherry' }
+ ]);
+
+ const reorderItems = () => {
+ setItems([items[2], items[1], items[0]]);
+ };
+
+ return (
+
+
+
+ {items.map((item) => (
+
{item.name}
+ ))}
+
+
+ );
+}
+```
+
+In this example:
+
+- If the `key` were not unique, React might not correctly update the UI after the items are reordered.
+- With the unique `id` as the key, React efficiently reorders the items in the list without unnecessary re-renders.
+
+---
+
+### Summary of Lists and Keys
+
+|**Method**|**Description**|**Example**|
+|---|---|---|
+|**Rendering Lists with `.map()`**|Iterates over an array to create an array of elements.|`{items.map(item =>
{item.name}
)}`|
+|**Importance of Keys**|Keys help React identify items and optimize re-renders.|`key={item.id}` ensures React optimally updates lists.|
+|**Best Practices for Keys**|Use unique identifiers (not array indices) as keys.|Prefer `key={item.id}` over `key={index}`.|
+
+---
+
+### Conclusion
+
+- Use **`.map()`** to render lists dynamically in React.
+- Always provide a **unique `key`** for each item in the list to improve performance and ensure accurate updates during re-renders.
+- Avoid using array indices as keys, especially when the list can be modified, as it may lead to issues with the state and rendering.
+
+---
+# References
+
+- https://legacy.reactjs.org/docs/lists-and-keys.html4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T16:07:30.000Z","draft":false,"title":"Lists and Keys in React"}}]
+a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
+8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
+6:null
diff --git a/my-first-blog-post.html b/my-first-blog-post.html
index 757c6a9..d257e6e 100644
--- a/my-first-blog-post.html
+++ b/my-first-blog-post.html
@@ -1,4 +1,4 @@
-Kavindu Udara
My First Blog Post
12 February 2025
Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/':
+Kavindu Udara
My First Blog Post
12 February 2025
Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/':
This is a blog quote text.
@@ -40,4 +40,4 @@
# Call the function
create_markdown_file
-
This script will prompt the user for the title of the markdown file and then create the file with the current date and time, draft set to true, and the provided title. The file will be saved in the directory 'public/assets/readmes/'.
\ No newline at end of file
+
This script will prompt the user for the title of the markdown file and then create the file with the current date and time, draft set to true, and the provided title. The file will be saved in the directory 'public/assets/readmes/'.
\ No newline at end of file
diff --git a/my-first-blog-post.txt b/my-first-blog-post.txt
index 2726b99..7cbd778 100644
--- a/my-first-blog-post.txt
+++ b/my-first-blog-post.txt
@@ -5,9 +5,56 @@
7:I[6213,[],"MetadataBoundary"]
9:I[6213,[],"ViewportBoundary"]
b:I[4835,[],""]
-:HL["/me/_next/static/css/7cdffd469baeb000.css","style"]
-0:{"P":null,"b":"yWoAn8OvJELat1C2W9Cyt","p":"/me","c":["","my-first-blog-post"],"i":false,"f":[[["",{"children":[["slug","my-first-blog-post","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/7cdffd469baeb000.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","my-first-blog-post","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","KRVCJhyIKorYL7fxroazL",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
-4:["$","div",null,{"className":"max-w-4xl mx-auto p-8","children":["$","div",null,{"className":"markdown-container","children":[["$","div",null,{"className":"flex flex-wrap items-center justify-start gap-4 mb-5","children":[["$","button",null,{"className":"p-4 rounded-lg cursor-pointer ","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 448 512","children":["$undefined",[["$","path","0",{"d":"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z","children":[]}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","h1",null,{"className":"text-4xl font-bold ","children":"My First Blog Post"}]]}],["$","blockquote",null,{"className":"underline font-semibold","children":"12 February 2025"}],["$","hr",null,{}],["$","div",null,{"className":"prose","children":[["$","p","p-0",{"children":"Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/':"}],"\n",["$","blockquote","blockquote-0",{"children":["\n",["$","p","p-0",{"children":"This is a blog quote text."}],"\n"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-bash","children":"#!/bin/bash\n\n# Function to create a new markdown file\ncreate_markdown_file() {\n # Get the current date and time in the required format\n current_date=$(date +\"%Y-%m-%dT%H:%M:%S%z\")\n\n # Get the title from the user\n read -p \"Enter the title of the markdown file: \" title read -p \"Enter the title of the markdown file: \" title read -p \"Enter the title of the markdown file: \" title read -p \"Enter the title of the markdown file: \" title\n\n # Replace spaces with underscores for the filename\n filename=\"${title// /_}.md\"\n \n # Define the directory\n dir=\"public/assets/readmes/\"\n \n # Create the directory if it doesn't exist\n mkdir -p $dir\n \n # Define the file path\n filepath=\"${dir}${filename}\"\n\n # Create the markdown file with the template\n cat < $filepath\n---\ndate: ${current_date}\ndraft: true\ntitle: ${title}\n---\n\nEOF\n\n echo \"Markdown file created at ${filepath}\"\n}\n\n# Call the function\ncreate_markdown_file\n"}]}],"\n",["$","p","p-1",{"children":["This script will prompt the user for the title of the markdown file and then create the file with the current date and time, ",["$","code","code-0",{"children":"draft"}]," set to ",["$","code","code-1",{"children":"true"}],", and the provided title. The file will be saved in the directory 'public/assets/readmes/'."]}]]}]]}]}]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","my-first-blog-post"],"i":false,"f":[[["",{"children":[["slug","my-first-blog-post","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","my-first-blog-post","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","aZBquZ6AEeTNvXx8tgnqy",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:T55a,
+Here is a bash script that creates a markdown file with the specified template in the directory 'public/assets/readmes/':
+
+> This is a blog quote text.
+
+```bash
+#!/bin/bash
+
+# Function to create a new markdown file
+create_markdown_file() {
+ # Get the current date and time in the required format
+ current_date=$(date +"%Y-%m-%dT%H:%M:%S%z")
+
+ # Get the title from the user
+ read -p "Enter the title of the markdown file: " title read -p "Enter the title of the markdown file: " title read -p "Enter the title of the markdown file: " title read -p "Enter the title of the markdown file: " title
+
+ # Replace spaces with underscores for the filename
+ filename="${title// /_}.md"
+
+ # Define the directory
+ dir="public/assets/readmes/"
+
+ # Create the directory if it doesn't exist
+ mkdir -p $dir
+
+ # Define the file path
+ filepath="${dir}${filename}"
+
+ # Create the markdown file with the template
+ cat < $filepath
+---
+date: ${current_date}
+draft: true
+title: ${title}
+---
+
+EOF
+
+ echo "Markdown file created at ${filepath}"
+}
+
+# Call the function
+create_markdown_file
+```
+
+This script will prompt the user for the title of the markdown file and then create the file with the current date and time, `draft` set to `true`, and the provided title. The file will be saved in the directory 'public/assets/readmes/'.
+4:["$","$Lc",null,{"content":"$d","data":{"date":"2025-02-12T11:12:58+0530","draft":true,"title":"My First Blog Post"}}]
a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
6:null
diff --git a/props-in-react.html b/props-in-react.html
new file mode 100644
index 0000000..7cbdae0
--- /dev/null
+++ b/props-in-react.html
@@ -0,0 +1,51 @@
+Kavindu Udara
Props in React
01 December 2024
Props (short for properties) are used to pass data from a parent component to a child component. Props are read-only, meaning they cannot be modified by the child component receiving them.
+
+
Key Features of Props
+
+
Passed as an object to the component.
+
Immutable (cannot be changed by the component receiving them).
+
Used for dynamic data and reusability.
+
+
+
How to Pass Props Between Components
+
+
+
Define props in the parent component
+
function Parent() {
+const name = "John";
+return <Child name={name} />;
+}
+
+
+
+
Access props in the child component
+
function Child(props) {
+return <h1>Hello, {props.name}!</h1>;
+}
+
+
+
+
Destructure props for cleaner syntax
+
function Child({ name }) {
+return <h1>Hello, {name}!</h1>;
+}
+
\ No newline at end of file
diff --git a/props-in-react.txt b/props-in-react.txt
new file mode 100644
index 0000000..94d81b9
--- /dev/null
+++ b/props-in-react.txt
@@ -0,0 +1,67 @@
+1:"$Sreact.fragment"
+2:I[5244,[],""]
+3:I[3866,[],""]
+5:I[6213,[],"OutletBoundary"]
+7:I[6213,[],"MetadataBoundary"]
+9:I[6213,[],"ViewportBoundary"]
+b:I[4835,[],""]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","props-in-react"],"i":false,"f":[[["",{"children":[["slug","props-in-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","props-in-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","QnFDwcdPBmNnomy6QyrZn",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:T4f6,
+**Props** (short for properties) are used to pass data from a parent component to a child component. Props are **read-only**, meaning they cannot be modified by the child component receiving them.
+
+---
+### Key Features of Props
+
+- Passed as an object to the component.
+- Immutable (cannot be changed by the component receiving them).
+- Used for dynamic data and reusability.
+
+---
+### How to Pass Props Between Components
+
+1. Define props in the parent component
+ ```jsx
+ function Parent() {
+ const name = "John";
+ return ;
+ }
+ ```
+
+2. Access props in the child component
+ ```jsx
+ function Child(props) {
+ return
Hello, {props.name}!
;
+ }
+ ```
+
+3. Destructure props for cleaner syntax
+ ```jsx
+ function Child({ name }) {
+ return
Preparing the app for production using npm run build.
+
+
+
\ No newline at end of file
diff --git a/react-fundamentals.txt b/react-fundamentals.txt
new file mode 100644
index 0000000..f41d7b0
--- /dev/null
+++ b/react-fundamentals.txt
@@ -0,0 +1,60 @@
+1:"$Sreact.fragment"
+2:I[5244,[],""]
+3:I[3866,[],""]
+5:I[6213,[],"OutletBoundary"]
+7:I[6213,[],"MetadataBoundary"]
+9:I[6213,[],"ViewportBoundary"]
+b:I[4835,[],""]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","react-fundamentals"],"i":false,"f":[[["",{"children":[["slug","react-fundamentals","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","react-fundamentals","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","ztkE4ofuAH1TIgAYezwJU",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:T85a,
+1. **Introduction**
+ - What is React and Why use React ?
+ - [React Reusable Components](../react-reusable-components)
+ - [React Virtual DOM](../react-virtual-dom)
+ - Large Community Support
+ - [Real-world Examples of apps build with React](../real-world-examples-of-apps-build-with-react)
+
+2. [**Setting Up the Development Environment for React with Vite**](../setting-up-the-development-environment-for-react-with-vite)
+ - Installing Node.js and npm.
+ - Setting up a React Project.
+ - Overview of the project folder structure.
+
+3. **Understanding JSX / TSX**
+ - [What is JSX, TSX and How It Differs from HTML](../what-is-jsx-tsx-and-how-ut-differs-from-html)
+ - JSX/TSX attributes and how to use them.
+
+4. [**Components in React**](../components-in-react)
+ - Functional Components vs Class Components.
+ - How to create and export components.
+ - Importing components and using them inside other components.
+
+5. **Props and State** [Props in React](../props-in-react), [State in React](../state-in-react)
+ - Introduction to props and how to pass data between components.
+ - Introduction to state and `useState` hook.
+ - Updating and managing state.
+
+6. [**Event Handling in React** ](../event-handling-in-react)
+ - How to handle events like clicks, inputs, and form submissions.
+ - Event binding and passing data with event handlers.
+
+7. [**Conditional Rendering in React**](../conditional-rendering-in-react)
+ - How to conditionally render components using `if-else`, `ternary operators`, and `&&` logic.
+
+8. [**Lists and Keys in React**](../lists-and-keys-in-react)
+ - How to render lists in React using `.map()`.
+ - Importance of keys in list rendering.
+
+9. [**React Lifecycle and Hooks**](../react-lifecycle-and-hooks)
+ - Introduction to React hooks: `useEffect` for handling side effects.
+
+10. [**Styling in React**](../styling-in-react)
+ - Inline styles vs External CSS vs CSS Modules.
+ - Introduction to styling libraries like Styled Components or Tailwind CSS.
+
+11. [**Deploying a React App**](../deploying-a-react-app)
+ - Preparing the app for production using `npm run build`.4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T15:06:06.000Z","draft":false,"title":"React Fundamentals"}}]
+a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
+8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
+6:null
diff --git a/react-lifecycle-and-hooks.html b/react-lifecycle-and-hooks.html
new file mode 100644
index 0000000..324c848
--- /dev/null
+++ b/react-lifecycle-and-hooks.html
@@ -0,0 +1,173 @@
+Kavindu Udara
React Lifecycle and Hooks
01 December 2024
React hooks allow functional components to manage side effects, state, and other lifecycle events. The introduction of hooks has simplified component lifecycle management and enabled functional components to become more powerful and feature-rich.
+
+
1. Introduction to React Hooks
+
React hooks are functions that allow you to "hook into" React features from functional components. They provide a more declarative approach to handling component logic compared to class components. The most commonly used hooks are:
+
+
useState: To manage state in functional components.
+
useEffect: For handling side effects, such as fetching data or subscribing to external services.
+
useContext: For accessing context data.
+
+
The useEffect hook, in particular, is essential for dealing with side effects in React.
+
+
2. The useEffect Hook
+
The useEffect hook allows you to perform side effects in functional components. Side effects refer to operations that affect something outside the component, such as:
+
+
Fetching data from an API.
+
Subscribing to a service or event.
+
Manipulating the DOM.
+
Setting up timers.
+
+
The useEffect hook replaces the lifecycle methods found in class components (componentDidMount, componentDidUpdate, and componentWillUnmount).
+
Basic Syntax of useEffect
+
useEffect(() => {
+ // Code to run on component mount or state change
+}, [dependencies]);
+
+
+
The first argument is a function containing the side-effect logic.
+
The second argument is an array of dependencies. If any of the dependencies change, the effect will run again.
useEffect fetches data from an API when the component mounts (similar to componentDidMount in class components).
+
The empty dependency array [] means the effect runs only once after the initial render.
+
+
+
3. Cleanup with useEffect
+
Sometimes, you need to clean up after an effect, such as clearing timers or unsubscribing from an event. You can return a cleanup function from useEffect.
\ No newline at end of file
diff --git a/react-lifecycle-and-hooks.txt b/react-lifecycle-and-hooks.txt
new file mode 100644
index 0000000..45b9629
--- /dev/null
+++ b/react-lifecycle-and-hooks.txt
@@ -0,0 +1,222 @@
+1:"$Sreact.fragment"
+2:I[5244,[],""]
+3:I[3866,[],""]
+5:I[6213,[],"OutletBoundary"]
+7:I[6213,[],"MetadataBoundary"]
+9:I[6213,[],"ViewportBoundary"]
+b:I[4835,[],""]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","react-lifecycle-and-hooks"],"i":false,"f":[[["",{"children":[["slug","react-lifecycle-and-hooks","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","react-lifecycle-and-hooks","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","rgPJnG_e5td0OhUICwOHz",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:T19af,
+React hooks allow functional components to manage side effects, state, and other lifecycle events. The introduction of hooks has simplified component lifecycle management and enabled functional components to become more powerful and feature-rich.
+
+---
+
+### 1. Introduction to React Hooks
+
+React hooks are functions that allow you to "hook into" React features from functional components. They provide a more declarative approach to handling component logic compared to class components. The most commonly used hooks are:
+
+- `useState`: To manage state in functional components.
+- `useEffect`: For handling side effects, such as fetching data or subscribing to external services.
+- `useContext`: For accessing context data.
+
+The `useEffect` hook, in particular, is essential for dealing with side effects in React.
+
+---
+
+### 2. The `useEffect` Hook
+
+The `useEffect` hook allows you to perform **side effects** in functional components. Side effects refer to operations that affect something outside the component, such as:
+
+- Fetching data from an API.
+- Subscribing to a service or event.
+- Manipulating the DOM.
+- Setting up timers.
+
+The `useEffect` hook replaces the lifecycle methods found in class components (`componentDidMount`, `componentDidUpdate`, and `componentWillUnmount`).
+
+#### Basic Syntax of `useEffect`
+
+```jsx
+useEffect(() => {
+ // Code to run on component mount or state change
+}, [dependencies]);
+```
+
+- The first argument is a **function** containing the side-effect logic.
+- The second argument is an **array of dependencies**. If any of the dependencies change, the effect will run again.
+
+#### Example: Basic `useEffect` Usage
+
+```jsx
+import React, { useState, useEffect } from 'react';
+
+function DataFetchingComponent() {
+ const [data, setData] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ fetch('https://api.example.com/data')
+ .then(response => response.json())
+ .then(data => {
+ setData(data);
+ setLoading(false);
+ });
+ }, []); // Empty dependency array ensures effect runs only once (componentDidMount)
+
+ if (loading) return
Loading...
;
+
+ return (
+
+
Data
+
+ {data.map(item => (
+
{item.name}
+ ))}
+
+
+ );
+}
+```
+
+In this example:
+
+- **`useEffect`** fetches data from an API when the component mounts (similar to `componentDidMount` in class components).
+- The empty dependency array `[]` means the effect runs only once after the initial render.
+
+---
+
+### 3. Cleanup with `useEffect`
+
+Sometimes, you need to clean up after an effect, such as clearing timers or unsubscribing from an event. You can return a **cleanup function** from `useEffect`.
+
+#### Example: Cleanup in `useEffect`
+
+```jsx
+import React, { useEffect, useState } from 'react';
+
+function Timer() {
+ const [seconds, setSeconds] = useState(0);
+
+ useEffect(() => {
+ const timerId = setInterval(() => {
+ setSeconds(prev => prev + 1);
+ }, 1000);
+
+ // Cleanup function to clear the interval
+ return () => {
+ clearInterval(timerId);
+ };
+ }, []); // Runs once, equivalent to componentDidMount
+
+ return
Seconds: {seconds}
;
+}
+```
+
+In this example:
+
+- A timer is set using `setInterval` in the `useEffect` hook.
+- The **cleanup function** returned from `useEffect` clears the interval when the component is unmounted or before the effect is re-run.
+
+---
+
+### 4. Conditional Execution of `useEffect`
+
+By specifying **dependencies**, you can control when the `useEffect` hook runs:
+
+- If the dependency array is empty `[]`, the effect runs only once when the component mounts.
+- If the array contains values (e.g., `[prop, state]`), the effect runs when any of those values change.
+
+#### Example: Conditional `useEffect`
+
+```jsx
+import React, { useState, useEffect } from 'react';
+
+function Counter() {
+ const [count, setCount] = useState(0);
+
+ useEffect(() => {
+ document.title = `You clicked ${count} times`;
+ }, [count]); // Runs whenever count changes
+
+ return (
+
+
You clicked {count} times
+
+
+ );
+}
+```
+
+In this example:
+
+- The effect runs only when the `count` state changes, and it updates the document title with the current count.
+
+---
+
+### 5. Use Case Examples of `useEffect`
+
+- **Fetching data on mount:**
+
+ ```jsx
+ useEffect(() => {
+ fetchData();
+ }, []); // Runs once after component mount
+ ```
+
+- **Subscribing to an event:**
+
+ ```jsx
+ useEffect(() => {
+ const handleResize = () => {
+ console.log('Window resized');
+ };
+ window.addEventListener('resize', handleResize);
+
+ // Cleanup on component unmount
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []); // Runs once
+ ```
+
+- **Setting up a timer:**
+
+ ```jsx
+ useEffect(() => {
+ const timer = setInterval(() => {
+ console.log('Timer ticked');
+ }, 1000);
+
+ return () => clearInterval(timer); // Cleanup on unmount
+ }, []);
+ ```
+
+
+---
+
+### Summary of `useEffect`
+
+|**Feature**|**Description**|**Example**|
+|---|---|---|
+|**Basic usage**|Handles side effects like fetching data, setting up timers, etc.|`useEffect(() => { fetchData(); }, []);`|
+|**Dependencies**|Array of values that the effect depends on.|`useEffect(() => { console.log(count); }, [count]);`|
+|**Cleanup function**|Cleans up after effects (e.g., clearing timers).|`return () => { clearInterval(timer); }`|
+|**Conditional execution**|Control when the effect runs by setting dependencies.|`useEffect(() => { console.log('Mounted!'); }, []);`|
+
+---
+
+### Conclusion
+
+- **`useEffect`** is a powerful hook for managing side effects in functional components.
+- It allows you to **fetch data**, **subscribe to events**, and handle **cleanups** in a declarative way.
+- By using the dependency array, you can control when the effect should run, making it highly flexible and efficient.
+
+---
+# References
+
+- https://www.freecodecamp.org/news/react-lifecycle-methods-and-hooks-for-beginners/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T16:10:04.000Z","draft":false,"title":"React Lifecycle and Hooks"}}]
+a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
+8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
+6:null
diff --git a/react-reusable-components.html b/react-reusable-components.html
new file mode 100644
index 0000000..6c6d26b
--- /dev/null
+++ b/react-reusable-components.html
@@ -0,0 +1,75 @@
+Kavindu Udara
React Reusable Components
01 December 2024
+
Reusable components are building blocks of a React application designed to be reused in multiple places.
+
They promote modularity, maintainability, and efficiency.
+
+
+
Key Benefits
+
+
Code Reusability: Write once, use multiple times.
+
Consistency: Maintain consistent design and behavior across the app.
+
Ease of Maintenance: Updates to a component reflect across all its instances.
+
Efficiency: Reduces the need for duplicate code.
+
+
+
Best Practices for Creating Reusable Components
+
+
Single Responsibility Principle: Each component should have one clear purpose.
+
Props: Use props to make components configurable and dynamic.
+
Composition Over Inheritance: Combine smaller components to build larger ones.
+
Avoid Hardcoding: Parameterize data through props instead of hardcoding values.
+
Styling Flexibility: Use CSS modules, styled-components, or className props for flexible styling.
+
Granularity: Balance between too granular (many small components) and too monolithic (large components).
\ No newline at end of file
diff --git a/react-reusable-components.txt b/react-reusable-components.txt
new file mode 100644
index 0000000..7c40822
--- /dev/null
+++ b/react-reusable-components.txt
@@ -0,0 +1,91 @@
+1:"$Sreact.fragment"
+2:I[5244,[],""]
+3:I[3866,[],""]
+5:I[6213,[],"OutletBoundary"]
+7:I[6213,[],"MetadataBoundary"]
+9:I[6213,[],"ViewportBoundary"]
+b:I[4835,[],""]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","react-reusable-components"],"i":false,"f":[[["",{"children":[["slug","react-reusable-components","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","react-reusable-components","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","YWr1WANblgWhEKDQzXQEn",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:T8a4,
+- Reusable components are building blocks of a React application designed to be reused in multiple places.
+- They promote modularity, maintainability, and efficiency.
+
+---
+### Key Benefits
+
+- **Code Reusability**: Write once, use multiple times.
+- **Consistency**: Maintain consistent design and behavior across the app.
+- **Ease of Maintenance**: Updates to a component reflect across all its instances.
+- **Efficiency**: Reduces the need for duplicate code.
+
+---
+### Best Practices for Creating Reusable Components
+
+- **Single Responsibility Principle**: Each component should have one clear purpose.
+- **Props**: Use props to make components configurable and dynamic.
+- **Composition Over Inheritance**: Combine smaller components to build larger ones.
+- **Avoid Hardcoding**: Parameterize data through props instead of hardcoding values.
+- **Styling Flexibility**: Use CSS modules, styled-components, or className props for flexible styling.
+- **Granularity**: Balance between too granular (many small components) and too monolithic (large components).
+
+---
+### Examples of Reusable Components
+
+1. Button
+
+```jsx
+const Button = ({ onClick, children, style }) => (
+
+);
+```
+
+2. Input Field
+
+```jsx
+const Input = ({ type, value, onChange, placeholder }) => (
+
+);
+
+```
+
+3. Card
+
+```jsx
+const Card = ({ children, style }) => (
+
+ {children}
+
+);
+
+const defaultStyle = {
+ border: "1px solid #ccc",
+ padding: "10px",
+ borderRadius: "5px",
+};
+
+```
+
+---
+### Tips
+
+- **Test Components**: Ensure each component works in isolation.
+- **Prop Validation**: Use `PropTypes` or TypeScript for better validation and type safety.
+- **Document Components**: Add comments or maintain documentation to explain usage.
+
+---
+# References
+
+- https://www.freecodecamp.org/news/how-to-build-reusable-react-components/
+- https://buttercms.com/blog/building-reusable-components-using-react/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T15:11:07.000Z","draft":false,"title":"React Reusable Components"}}]
+a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
+8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
+6:null
diff --git a/react-virtual-dom.html b/react-virtual-dom.html
new file mode 100644
index 0000000..6a304c5
--- /dev/null
+++ b/react-virtual-dom.html
@@ -0,0 +1,108 @@
+Kavindu Udara
React Virtual DOM
01 December 2024
+
The Virtual DOM (VDOM) is a lightweight in-memory representation of the real DOM.
+
React uses the VDOM to manage updates efficiently without directly manipulating the real DOM.
+
+
+
Key Concepts
+
+
The actual structure rendered in the browser.
+
Updating it is slow because it triggers reflows and repaints.
+
+
+
How the Virtual DOM Works
+
+
Initial Render:
+
+
React creates a VDOM representation of the UI.
+
The VDOM is then used to create the real DOM for the browser.
+
+
+
Updating State or Props:
+
+
React creates a new VDOM tree based on the updated state/props.
+
It compares the new VDOM tree with the previous one (a process called diffing).
+
Only the differences (changes) are applied to the real DOM.
+
+
+
Efficient Updates:
+
+
React batches multiple updates and applies them in one operation to minimize performance costs.
+
+
+
+
+
Benefits of the Virtual DOM
+
+
Performance:
+
+
Reduces direct interactions with the real DOM.
+
Optimizes updates by calculating the smallest number of changes.
+
+
+
Declarative UI:
+
+
Developers focus on what the UI should look like, and React handles how to update the DOM.
+
+
+
Cross-Browser Compatibility:
+
+
React abstracts browser-specific quirks in DOM manipulation.
+
+
+
+
+
Real-Life Analogy
+
+
Think of updating the DOM like editing a book.
+
Instead of rewriting the entire book (real DOM), React keeps a draft copy (virtual DOM), compares the draft with the original, and only updates the changed parts.
+
+
+
Virtual DOM Diffing Algorithm
+
+
Tree Comparison: React compares the new VDOM tree with the old one.
+
Key-Based Optimization:
+
+
Keys in lists help React identify moved or updated elements efficiently.
+
+
+
Minimal Updates:
+
+
React calculates and applies only the minimal required changes to the real DOM.
\ No newline at end of file
diff --git a/react-virtual-dom.txt b/react-virtual-dom.txt
new file mode 100644
index 0000000..39445de
--- /dev/null
+++ b/react-virtual-dom.txt
@@ -0,0 +1,103 @@
+1:"$Sreact.fragment"
+2:I[5244,[],""]
+3:I[3866,[],""]
+5:I[6213,[],"OutletBoundary"]
+7:I[6213,[],"MetadataBoundary"]
+9:I[6213,[],"ViewportBoundary"]
+b:I[4835,[],""]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","react-virtual-dom"],"i":false,"f":[[["",{"children":[["slug","react-virtual-dom","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","react-virtual-dom","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","lBQkucnFyH6YR7k3SxTDc",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:Taf5,
+- The **Virtual DOM (VDOM)** is a lightweight in-memory representation of the real DOM.
+- React uses the VDOM to manage updates efficiently without directly manipulating the real DOM.
+
+---
+### Key Concepts
+
+- The actual structure rendered in the browser.
+- Updating it is slow because it triggers reflows and repaints.
+
+---
+### How the Virtual DOM Works
+
+- **Initial Render**:
+ - React creates a VDOM representation of the UI.
+ - The VDOM is then used to create the real DOM for the browser.
+- **Updating State or Props**:
+ - React creates a new VDOM tree based on the updated state/props.
+ - It compares the new VDOM tree with the previous one (a process called **diffing**).
+ - Only the differences (changes) are applied to the real DOM.
+- **Efficient Updates**:
+ - React batches multiple updates and applies them in one operation to minimize performance costs.
+
+---
+
+### Benefits of the Virtual DOM
+
+- **Performance**:
+ - Reduces direct interactions with the real DOM.
+ - Optimizes updates by calculating the smallest number of changes.
+- **Declarative UI**:
+ - Developers focus on what the UI should look like, and React handles how to update the DOM.
+- **Cross-Browser Compatibility**:
+ - React abstracts browser-specific quirks in DOM manipulation.
+
+---
+
+### Real-Life Analogy
+
+- Think of updating the DOM like editing a book.
+- Instead of rewriting the entire book (real DOM), React keeps a draft copy (virtual DOM), compares the draft with the original, and only updates the changed parts.
+
+---
+
+### Virtual DOM Diffing Algorithm
+
+- **Tree Comparison**: React compares the new VDOM tree with the old one.
+- **Key-Based Optimization**:
+ - Keys in lists help React identify moved or updated elements efficiently.
+- **Minimal Updates**:
+ - React calculates and applies only the minimal required changes to the real DOM.
+
+---
+### Example
+
+```jsx
+function App() {
+ const [count, setCount] = React.useState(0);
+
+ return (
+
+
Count: {count}
+
+
+ );
+}
+```
+
+When the button is clicked:
+
+1. React updates the state (`count`).
+2. React creates a new VDOM tree for ``.
+3. It compares the new tree with the old one.
+4. Only the `
` element is updated in the real DOM.
+
+---
+### Summary
+
+The Virtual DOM is a powerful feature of React that:
+
+- Improves performance.
+- Simplifies the UI development process.
+- Provides a smooth and efficient user experience.
+
+---
+# References
+
+- https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/
+- https://legacy.reactjs.org/docs/faq-internals.html
+- https://www.geeksforgeeks.org/reactjs-virtual-dom/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T15:24:27.000Z","draft":false,"title":"React Virtual DOM"}}]
+a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
+8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
+6:null
diff --git a/real-world-examples-of-apps-build-with-react.html b/real-world-examples-of-apps-build-with-react.html
new file mode 100644
index 0000000..2b7856a
--- /dev/null
+++ b/real-world-examples-of-apps-build-with-react.html
@@ -0,0 +1,9 @@
+
Kavindu Udara
Real World Examples of Apps Build With React
01 December 2024
This is some real world examples that build with react
+
+
Application
Description
Key Features
Facebook
Social media platform, React's origin.
News feed, notifications, live chat, real-time updates, and interactive UI.
Instagram
Photo and video sharing platform owned by Meta.
Stories, filters, reels, dynamic user feeds, and push notifications.
WhatsApp Web
Web version of the popular messaging app.
Real-time messaging, live updates, QR login, and responsive design.
Netflix
Streaming platform for movies and TV shows.
Dynamic user interface, personalized recommendations, and optimized streaming experiences.
Airbnb
Marketplace for lodging, primarily short-term rentals.
Interactive maps, real-time search results, and responsive layouts for booking accommodations.
Uber
Ridesharing platform for booking cabs and delivery services.
Live tracking, dynamic pricing, and real-time updates.
Pinterest
Visual discovery engine for sharing ideas and inspirations.
Infinite scrolling, dynamic pin recommendations, and smooth user interactions.
Slack
Collaboration platform for messaging and workplace tools.
Real-time messaging, file sharing, and integrated third-party tools.
Shopify
E-commerce platform for businesses to create online stores.
Dynamic dashboards, real-time inventory updates, and responsive store designs.
Discord
Voice, video, and text communication platform for communities and gamers.
Real-time messaging, custom UIs for servers, and seamless voice/video integration.
Dropbox
Cloud storage platform for storing and sharing files.
Interactive UI for file uploads, drag-and-drop functionality, and real-time collaboration tools.
Trello
Project management tool for task organization.
Drag-and-drop Kanban boards, real-time updates, and interactive UI elements.
Asana
Task and project management application for teams.
Real-time task tracking, dynamic boards, and visual project timelines.
BBC
News website offering global and local news.
Dynamic content updates, real-time notifications, and seamless video playback.
Medium
Blogging platform for writers and readers.
Interactive editor, personalized reading lists, and infinite scrolling for articles.
Khan Academy
Online learning platform offering free courses and lessons.
Interactive learning tools, real-time quizzes, and progress tracking.
GitHub (Front End)
Code hosting platform for version control and collaboration.
Interactive dashboards, real-time updates on pull requests, and code comparison tools.
CodeSandbox
Online code editor for web development.
Real-time collaborative editing, live previews, and seamless integration with GitHub.
Spotify (Web Player)
Music streaming platform for discovering and playing music.
Real-time search, dynamic playlists, and audio playback optimization.
+
These examples showcase React's versatility in building scalable, interactive, and high-performing applications across various domains like social media, e-commerce, streaming, and productivity tools.
\ No newline at end of file
diff --git a/real-world-examples-of-apps-build-with-react.txt b/real-world-examples-of-apps-build-with-react.txt
new file mode 100644
index 0000000..6b34f18
--- /dev/null
+++ b/real-world-examples-of-apps-build-with-react.txt
@@ -0,0 +1,46 @@
+1:"$Sreact.fragment"
+2:I[5244,[],""]
+3:I[3866,[],""]
+5:I[6213,[],"OutletBoundary"]
+7:I[6213,[],"MetadataBoundary"]
+9:I[6213,[],"ViewportBoundary"]
+b:I[4835,[],""]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","real-world-examples-of-apps-build-with-react"],"i":false,"f":[[["",{"children":[["slug","real-world-examples-of-apps-build-with-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","real-world-examples-of-apps-build-with-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","0nOJU3GhpG2dvZT_93o5F",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:T1211,
+This is some real world examples that build with react
+
+---
+
+| **Application** | **Description** | **Key Features** |
+| ------------------------ | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| **Facebook** | Social media platform, React's origin. | News feed, notifications, live chat, real-time updates, and interactive UI. |
+| **Instagram** | Photo and video sharing platform owned by Meta. | Stories, filters, reels, dynamic user feeds, and push notifications. |
+| **WhatsApp Web** | Web version of the popular messaging app. | Real-time messaging, live updates, QR login, and responsive design. |
+| **Netflix** | Streaming platform for movies and TV shows. | Dynamic user interface, personalized recommendations, and optimized streaming experiences. |
+| **Airbnb** | Marketplace for lodging, primarily short-term rentals. | Interactive maps, real-time search results, and responsive layouts for booking accommodations. |
+| **Uber** | Ridesharing platform for booking cabs and delivery services. | Live tracking, dynamic pricing, and real-time updates. |
+| **Pinterest** | Visual discovery engine for sharing ideas and inspirations. | Infinite scrolling, dynamic pin recommendations, and smooth user interactions. |
+| **Slack** | Collaboration platform for messaging and workplace tools. | Real-time messaging, file sharing, and integrated third-party tools. |
+| **Shopify** | E-commerce platform for businesses to create online stores. | Dynamic dashboards, real-time inventory updates, and responsive store designs. |
+| **Discord** | Voice, video, and text communication platform for communities and gamers. | Real-time messaging, custom UIs for servers, and seamless voice/video integration. |
+| **Dropbox** | Cloud storage platform for storing and sharing files. | Interactive UI for file uploads, drag-and-drop functionality, and real-time collaboration tools. |
+| **Trello** | Project management tool for task organization. | Drag-and-drop Kanban boards, real-time updates, and interactive UI elements. |
+| **Asana** | Task and project management application for teams. | Real-time task tracking, dynamic boards, and visual project timelines. |
+| **BBC** | News website offering global and local news. | Dynamic content updates, real-time notifications, and seamless video playback. |
+| **Medium** | Blogging platform for writers and readers. | Interactive editor, personalized reading lists, and infinite scrolling for articles. |
+| **Khan Academy** | Online learning platform offering free courses and lessons. | Interactive learning tools, real-time quizzes, and progress tracking. |
+| **GitHub (Front End)** | Code hosting platform for version control and collaboration. | Interactive dashboards, real-time updates on pull requests, and code comparison tools. |
+| **CodeSandbox** | Online code editor for web development. | Real-time collaborative editing, live previews, and seamless integration with GitHub. |
+| **Spotify (Web Player)** | Music streaming platform for discovering and playing music. | Real-time search, dynamic playlists, and audio playback optimization. |
+
+These examples showcase React's versatility in building scalable, interactive, and high-performing applications across various domains like social media, e-commerce, streaming, and productivity tools.
+
+---
+# References
+
+- https://www.netflix.com/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T15:28:46.000Z","draft":false,"title":"Real World Examples of Apps Build With React"}}]
+a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
+8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
+6:null
diff --git a/setting-up-the-development-environment-for-react-with-vite.html b/setting-up-the-development-environment-for-react-with-vite.html
new file mode 100644
index 0000000..69cf60d
--- /dev/null
+++ b/setting-up-the-development-environment-for-react-with-vite.html
@@ -0,0 +1,86 @@
+Kavindu Udara
Setting Up the Development Environment for React With Vite
01 December 2024
1. Installing Node.js and npm
+
Node.js and npm (Node Package Manager) are prerequisites for creating and running React applications.
\ No newline at end of file
diff --git a/setting-up-the-development-environment-for-react-with-vite.txt b/setting-up-the-development-environment-for-react-with-vite.txt
new file mode 100644
index 0000000..0025072
--- /dev/null
+++ b/setting-up-the-development-environment-for-react-with-vite.txt
@@ -0,0 +1,96 @@
+1:"$Sreact.fragment"
+2:I[5244,[],""]
+3:I[3866,[],""]
+5:I[6213,[],"OutletBoundary"]
+7:I[6213,[],"MetadataBoundary"]
+9:I[6213,[],"ViewportBoundary"]
+b:I[4835,[],""]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","setting-up-the-development-environment-for-react-with-vite"],"i":false,"f":[[["",{"children":[["slug","setting-up-the-development-environment-for-react-with-vite","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","setting-up-the-development-environment-for-react-with-vite","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","zt6gHU-Mu6nIEog_0iNWx",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:Ta89,
+### 1. Installing Node.js and npm
+
+Node.js and npm (Node Package Manager) are prerequisites for creating and running React applications.
+
+1. **Download and Install Node.js**:
+ - Visit the [Node.js official website](https://nodejs.org).
+ - Download the **LTS** version for stability.
+ - Follow the installation instructions for your operating system.
+2. **Verify Installation**:
+ - Open a terminal and run the following commands:
+```bash
+node -v
+npm -v
+```
+
+- These commands will display the installed versions of Node.js and npm.
+
+---
+
+### 2. Setting up a React Project
+
+1. Install Vite
+ Vite is a fast frontend build tool.
+ - Open a terminal and run
+```bash
+npm create vite@latest my-react-app --template react
+```
+
+ - Replace `my-react-app` with your desired project name.
+
+2. **Navigate to the Project Directory**:
+```bash
+cd my-react-app
+```
+
+3. **Install Dependencies**
+ Run the following command to install all the dependencies
+ ```bash
+ npm install
+ ```
+
+4. **Run the Development Server**
+ Start the Vite development server to preview your app
+ ```bash
+ npm run dev
+ ```
+
+ - The terminal will display a URL (e.g., `http://localhost:5173`) where you can view your app in the browser.
+
+---
+### 3. Overview of the Project Folder Structure
+
+Once the setup is complete, your project folder will look like this:
+
+```perl
+my-react-app/
+├── node_modules/ # Installed npm packages
+├── public/ # Static assets (e.g., images, icons)
+│ └── vite.svg # Default Vite logo
+├── src/ # Source code of your application
+│ ├── App.css # Styles for the App component
+│ ├── App.jsx # Main React component
+│ ├── main.jsx # Entry point for the application
+│ └── index.css # Global styles
+├── .gitignore # Files and folders to ignore in Git
+├── package.json # Project metadata and dependencies
+├── vite.config.js # Configuration file for Vite
+└── README.md # Project documentation
+```
+
+**Key Files and Folders**:
+
+- **`src/main.jsx`**: Entry point for your React app. It renders the root component (`App.jsx`).
+- **`src/App.jsx`**: Default React component created by Vite. Customize this file to start building your app.
+- **`public/`**: Store static assets like images or fonts.
+- **`package.json`**: Manages dependencies, scripts, and project metadata.
+- **`vite.config.js`**: Customize the build tool's behavior (e.g., plugins, server options).
+
+---
+# References
+
+- https://vite.dev/guide/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T15:38:32.000Z","draft":false,"title":"Setting Up the Development Environment for React With Vite"}}]
+a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
+8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
+6:null
diff --git a/state-in-react.html b/state-in-react.html
new file mode 100644
index 0000000..97a1410
--- /dev/null
+++ b/state-in-react.html
@@ -0,0 +1,96 @@
+Kavindu Udara
State in React
01 December 2024
State is used to manage data that changes within a component. Unlike props, state is mutable and controlled by the component itself.
\ No newline at end of file
diff --git a/state-in-react.txt b/state-in-react.txt
new file mode 100644
index 0000000..f3a6e8d
--- /dev/null
+++ b/state-in-react.txt
@@ -0,0 +1,112 @@
+1:"$Sreact.fragment"
+2:I[5244,[],""]
+3:I[3866,[],""]
+5:I[6213,[],"OutletBoundary"]
+7:I[6213,[],"MetadataBoundary"]
+9:I[6213,[],"ViewportBoundary"]
+b:I[4835,[],""]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","state-in-react"],"i":false,"f":[[["",{"children":[["slug","state-in-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","state-in-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","4d1UIYhVK_TgdoVybsR1Q",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:T8eb,
+**State** is used to manage data that changes within a component. Unlike props, state is **mutable** and controlled by the component itself.
+
+---
+### Using the `useState` Hook
+
+1. Import `useState`
+ ```jsx
+ import { useState } from 'react';
+ ```
+
+2. Initialize state
+ ```jsx
+ const [count, setCount] = useState(0);
+ ```
+
+3. Update state
+ ```jsx
+ setCount(count + 1);
+ ```
+
+---
+### Example of State
+
+```jsx
+function Counter() {
+ const [count, setCount] = useState(0);
+
+ return (
+
+
Count: {count}
+
+
+ );
+}
+```
+
+---
+### Updating and Managing State
+
+1. Updating State
+ - State updates are asynchronous. React batches multiple state updates for performance.
+ - Use the previous state for calculations
+ ```jsx
+ setCount((prevCount) => prevCount + 1);
+ ```
+
+2. Managing Complex State
+ - For objects or arrays, update using the spread operator
+ ```jsx
+ const [user, setUser] = useState({ name: "John", age: 25 });
+ setUser((prevUser) => ({ ...prevUser, age: 26 }));
+ ```
+
+3. Conditional Rendering Based on State
+ ```jsx
+ function Toggle() {
+ const [isOn, setIsOn] = useState(false);
+
+ return (
+
+ );
+ }
+ ```
+
+4. State in Forms
+ Manage input fields using state
+ ```jsx
+ function Form() {
+ const [name, setName] = useState("");
+
+ return (
+ setName(e.target.value)}
+ />
+ );
+ }
+ ```
+
+---
+### Summary
+
+|**Feature**|**Props**|**State**|
+|---|---|---|
+|**Mutability**|Immutable (read-only)|Mutable (can be updated)|
+|**Scope**|Passed from parent to child|Local to the component|
+|**Use Case**|Passing data between components|Managing dynamic, interactive data|
+|**Example**|``|`const [count, setCount] = useState(0)`|
+- **Props** make components reusable by passing dynamic data.
+- **State** manages component-specific data that changes over time.
+
+---
+# References
+
+- https://www.freecodecamp.org/news/full-guide-to-react-hooks/4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T16:01:26.000Z","draft":false,"title":"State in React"}}]
+a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
+8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
+6:null
diff --git a/styling-in-react.html b/styling-in-react.html
new file mode 100644
index 0000000..05b6fe5
--- /dev/null
+++ b/styling-in-react.html
@@ -0,0 +1,186 @@
+Kavindu Udara
Styling in React
01 December 2024
In React, styling can be done in multiple ways depending on your preferences and the requirements of the project. You can use inline styles, external CSS, CSS Modules, or even CSS-in-JS solutions like Styled Components and utility-first frameworks like Tailwind CSS. This note will explore these approaches and when to use each.
+
+
1. Inline Styles vs External CSS vs CSS Modules
+
1.1 Inline Styles
+
Inline styles are applied directly within a component using a JavaScript object. Each style property is written in camelCase instead of hyphenated format.
+
Advantages:
+
+
Simple and quick for small styles or individual components.
+
Styles are scoped to the component, preventing accidental global styles.
+
+
Disadvantages:
+
+
Not ideal for complex styles or media queries.
+
Limited to basic styles and does not support pseudo-classes like :hover or :focus.
External CSS is the traditional way of styling websites. You create a .css file, and then link it to your React component by importing it. This approach is great for global styles and standard CSS features like pseudo-classes, media queries, and more.
+
Advantages:
+
+
Good for global styles and shared styles between components.
+
Easier to maintain for larger projects.
+
+
Disadvantages:
+
+
Global scope can lead to unintended side effects (i.e., styles affecting unrelated components).
+
No automatic scoping of styles, which can lead to conflicts.
CSS Modules help in scoping CSS locally to the component, meaning styles are applied only to the specific component and won't interfere with other components. They use a unique class name behind the scenes to prevent style conflicts.
+
Advantages:
+
+
Localized styling, meaning styles are scoped to the component.
+
Prevents class name conflicts.
+
+
Disadvantages:
+
+
Can become verbose if not structured well.
+
Requires an additional setup (though this is done automatically in most React build tools).
+
+
Example of CSS Modules
+
+
Create a CSS Module file (MyComponent.module.css):
Styled Components is a popular CSS-in-JS library that allows you to write CSS directly in your JavaScript/JSX files. It provides the benefit of scoped styling (like CSS Modules), but also supports more dynamic styles by utilizing JavaScript to control the style based on props or state.
+
Advantages:
+
+
Styles are scoped to the component by default.
+
Supports dynamic styles based on props or state.
+
Full access to JavaScript logic in styling (e.g., conditional styles).
+
+
Disadvantages:
+
+
May add some overhead for small projects.
+
Can result in larger JavaScript bundles due to the CSS-in-JS runtime.
In this example, the Button component is styled using styled-components, and the styles are applied only to that component.
+
+
2.2 Tailwind CSS
+
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs. It’s often used with React to create fast and responsive UIs without writing custom CSS.
+
Advantages:
+
+
Fast to develop with, as it avoids the need to write custom CSS.
+
Encourages reusable and consistent styles with utility classes.
+
Built-in responsive design and other common design patterns.
+
+
Disadvantages:
+
+
May result in long class names in JSX, which can be harder to read.
+
Over-reliance on utility classes can lead to repetitive code.
In this example, Tailwind utility classes are used to style the button element with background color, text color, padding, rounded corners, and a hover effect.
+
+
Summary of Styling in React
+
Method
Advantages
Disadvantages
Inline Styles
Quick to implement, scoped to component
Limited features (no pseudo-classes), not ideal for complex styles
External CSS
Great for global styles and easy to maintain
Global scope can lead to conflicts, no automatic scoping
CSS Modules
Scoped to components, prevents style conflicts
Requires extra setup, can become verbose
Styled Components (CSS-in-JS)
Scoped styles, dynamic styling based on props or state
Can add overhead, larger bundle sizes
Tailwind CSS
Fast development, utility classes for consistent design
Long class names in JSX, can result in repetitive code
+
+
Conclusion
+
+
Inline styles are useful for simple, scoped styling but are limited for complex scenarios.
+
External CSS is great for global styles but can cause conflicts in larger projects.
+
CSS Modules provide scoped styles without the global leakage of external CSS.
+
Styled Components offer powerful, dynamic styling capabilities within React using JavaScript.
+
Tailwind CSS is an efficient utility-first CSS framework that speeds up development with a consistent design pattern.
+
+
Choosing the right approach depends on the project size, requirements, and preferences. For small projects, inline styles or external CSS might suffice, while larger projects may benefit from CSS Modules, Styled Components, or Tailwind CSS.
\ No newline at end of file
diff --git a/styling-in-react.txt b/styling-in-react.txt
new file mode 100644
index 0000000..03d489b
--- /dev/null
+++ b/styling-in-react.txt
@@ -0,0 +1,243 @@
+1:"$Sreact.fragment"
+2:I[5244,[],""]
+3:I[3866,[],""]
+5:I[6213,[],"OutletBoundary"]
+7:I[6213,[],"MetadataBoundary"]
+9:I[6213,[],"ViewportBoundary"]
+b:I[4835,[],""]
+:HL["/me/_next/static/css/1d9abe454822820e.css","style"]
+0:{"P":null,"b":"atdZIXSGzkPFBsJtwNKu0","p":"/me","c":["","styling-in-react"],"i":false,"f":[[["",{"children":[["slug","styling-in-react","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/1d9abe454822820e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","styling-in-react","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","dmd3LGpebGdeoeH4XYsrA",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
+c:I[5577,["479","static/chunks/795d4814-6ed8d3b2717688f6.js","711","static/chunks/8e1d74a4-cfd329457e90dfbc.js","528","static/chunks/528-65f71005039027ed.js","182","static/chunks/app/%5Bslug%5D/page-1ad8078ba5d2eeda.js"],"default"]
+d:T1c5c,
+In React, styling can be done in multiple ways depending on your preferences and the requirements of the project. You can use inline styles, external CSS, CSS Modules, or even CSS-in-JS solutions like **Styled Components** and utility-first frameworks like **Tailwind CSS**. This note will explore these approaches and when to use each.
+
+---
+
+### 1. Inline Styles vs External CSS vs CSS Modules
+
+#### 1.1 Inline Styles
+
+Inline styles are applied directly within a component using a JavaScript object. Each style property is written in camelCase instead of hyphenated format.
+
+**Advantages**:
+
+- Simple and quick for small styles or individual components.
+- Styles are scoped to the component, preventing accidental global styles.
+
+**Disadvantages**:
+
+- Not ideal for complex styles or media queries.
+- Limited to basic styles and does not support pseudo-classes like `:hover` or `:focus`.
+
+#### Example of Inline Styles:
+
+```jsx
+function MyComponent() {
+ const buttonStyle = {
+ backgroundColor: 'blue',
+ color: 'white',
+ padding: '10px',
+ borderRadius: '5px'
+ };
+
+ return ;
+}
+```
+
+#### 1.2 External CSS
+
+External CSS is the traditional way of styling websites. You create a `.css` file, and then link it to your React component by importing it. This approach is great for global styles and standard CSS features like pseudo-classes, media queries, and more.
+
+**Advantages**:
+
+- Good for global styles and shared styles between components.
+- Easier to maintain for larger projects.
+
+**Disadvantages**:
+
+- Global scope can lead to unintended side effects (i.e., styles affecting unrelated components).
+- No automatic scoping of styles, which can lead to conflicts.
+
+#### Example of External CSS:
+
+1. **Create a CSS file** (`styles.css`):
+
+```css
+/* styles.css */
+.button {
+ background-color: blue;
+ color: white;
+ padding: 10px;
+ border-radius: 5px;
+}
+```
+
+2. **Import and use in a React component**:
+
+```jsx
+import './styles.css';
+
+function MyComponent() {
+ return ;
+}
+```
+
+#### 1.3 CSS Modules
+
+CSS Modules help in **scoping CSS locally** to the component, meaning styles are applied only to the specific component and won't interfere with other components. They use a unique class name behind the scenes to prevent style conflicts.
+
+**Advantages**:
+
+- Localized styling, meaning styles are scoped to the component.
+- Prevents class name conflicts.
+
+**Disadvantages**:
+
+- Can become verbose if not structured well.
+- Requires an additional setup (though this is done automatically in most React build tools).
+
+#### Example of CSS Modules
+
+1. **Create a CSS Module file** (`MyComponent.module.css`):
+
+```css
+/* MyComponent.module.css */
+.button {
+ background-color: blue;
+ color: white;
+ padding: 10px;
+ border-radius: 5px;
+}
+```
+
+2. **Import and use the CSS Module in the component**:
+
+```jsx
+import styles from './MyComponent.module.css';
+
+function MyComponent() {
+ return ;
+}
+```
+
+---
+
+### 2. Introduction to Styling Libraries
+
+#### 2.1 Styled Components (CSS-in-JS)
+
+**Styled Components** is a popular **CSS-in-JS** library that allows you to write CSS directly in your JavaScript/JSX files. It provides the benefit of scoped styling (like CSS Modules), but also supports more dynamic styles by utilizing JavaScript to control the style based on props or state.
+
+**Advantages**:
+
+- Styles are scoped to the component by default.
+- Supports dynamic styles based on props or state.
+- Full access to JavaScript logic in styling (e.g., conditional styles).
+
+**Disadvantages**:
+
+- May add some overhead for small projects.
+- Can result in larger JavaScript bundles due to the CSS-in-JS runtime.
+
+#### Example of Styled Components:
+
+1. **Install Styled Components**:
+
+```bash
+npm install styled-components
+```
+
+2. **Usage in a Component**:
+
+```jsx
+import styled from 'styled-components';
+
+const Button = styled.button`
+ background-color: blue;
+ color: white;
+ padding: 10px;
+ border-radius: 5px;
+
+ &:hover {
+ background-color: darkblue;
+ }
+`;
+
+function MyComponent() {
+ return ;
+}
+```
+
+In this example, the `Button` component is styled using `styled-components`, and the styles are applied only to that component.
+
+---
+
+#### 2.2 Tailwind CSS
+
+**Tailwind CSS** is a utility-first CSS framework that provides low-level utility classes to build custom designs. It’s often used with React to create fast and responsive UIs without writing custom CSS.
+
+**Advantages**:
+
+- Fast to develop with, as it avoids the need to write custom CSS.
+- Encourages reusable and consistent styles with utility classes.
+- Built-in responsive design and other common design patterns.
+
+**Disadvantages**:
+
+- May result in long class names in JSX, which can be harder to read.
+- Over-reliance on utility classes can lead to repetitive code.
+
+#### Example of Tailwind CSS:
+
+1. **Install Tailwind CSS**:
+
+```bash
+npm install tailwindcss
+npx tailwindcss init
+```
+
+2. **Setup and use in your React component**:
+
+```jsx
+function MyComponent() {
+ return (
+
+ );
+}
+```
+
+In this example, Tailwind utility classes are used to style the `button` element with background color, text color, padding, rounded corners, and a hover effect.
+
+---
+
+### Summary of Styling in React
+
+|**Method**|**Advantages**|**Disadvantages**|
+|---|---|---|
+|**Inline Styles**|Quick to implement, scoped to component|Limited features (no pseudo-classes), not ideal for complex styles|
+|**External CSS**|Great for global styles and easy to maintain|Global scope can lead to conflicts, no automatic scoping|
+|**CSS Modules**|Scoped to components, prevents style conflicts|Requires extra setup, can become verbose|
+|**Styled Components (CSS-in-JS)**|Scoped styles, dynamic styling based on props or state|Can add overhead, larger bundle sizes|
+|**Tailwind CSS**|Fast development, utility classes for consistent design|Long class names in JSX, can result in repetitive code|
+
+---
+
+### Conclusion
+
+- **Inline styles** are useful for simple, scoped styling but are limited for complex scenarios.
+- **External CSS** is great for global styles but can cause conflicts in larger projects.
+- **CSS Modules** provide scoped styles without the global leakage of external CSS.
+- **Styled Components** offer powerful, dynamic styling capabilities within React using JavaScript.
+- **Tailwind CSS** is an efficient utility-first CSS framework that speeds up development with a consistent design pattern.
+
+Choosing the right approach depends on the project size, requirements, and preferences. For small projects, inline styles or external CSS might suffice, while larger projects may benefit from CSS Modules, Styled Components, or Tailwind CSS.
+
+---
+# References
+
+- https://legacy.reactjs.org/docs/faq-styling.html4:["$","$Lc",null,{"content":"$d","data":{"date":"$D2024-12-01T16:12:01.000Z","draft":false,"title":"Styling in React"}}]
+a:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
+8:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Kavindu Udara"}],["$","meta","2",{"name":"description","content":"Kavindu Udara's blog"}],["$","link","3",{"rel":"icon","href":"/me/favicon.ico","type":"image/x-icon","sizes":"16x16"}]]
+6:null
diff --git a/what-is-jsx-tsx-and-how-it-differs-from-html.html b/what-is-jsx-tsx-and-how-it-differs-from-html.html
index 9c3eebd..71763ce 100644
--- a/what-is-jsx-tsx-and-how-it-differs-from-html.html
+++ b/what-is-jsx-tsx-and-how-it-differs-from-html.html
@@ -1,4 +1,4 @@
-Kavindu Udara
What Is JSX TSX and How It Differs From HTML
01 December 2024
+Kavindu Udara
What Is JSX TSX and How It Differs From HTML
01 December 2024
JSX (JavaScript XML): A syntax extension for JavaScript used in React to describe the UI structure.
TSX (TypeScript XML): Similar to JSX but used in React projects with TypeScript for type safety.
Both allow developers to write code that looks like HTML, but they are not HTML—they are syntactic sugar that gets transpiled into JavaScript.
\ No newline at end of file
diff --git a/what-is-jsx-tsx-and-how-it-differs-from-html.txt b/what-is-jsx-tsx-and-how-it-differs-from-html.txt
index 461baab..368e5b1 100644
--- a/what-is-jsx-tsx-and-how-it-differs-from-html.txt
+++ b/what-is-jsx-tsx-and-how-it-differs-from-html.txt
@@ -5,9 +5,91 @@
7:I[6213,[],"MetadataBoundary"]
9:I[6213,[],"ViewportBoundary"]
b:I[4835,[],""]
-:HL["/me/_next/static/css/7cdffd469baeb000.css","style"]
-0:{"P":null,"b":"yWoAn8OvJELat1C2W9Cyt","p":"/me","c":["","what-is-jsx-tsx-and-how-it-differs-from-html"],"i":false,"f":[[["",{"children":[["slug","what-is-jsx-tsx-and-how-it-differs-from-html","d"],{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/me/_next/static/css/7cdffd469baeb000.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_a48e27 __variable_c96e19 antialiased","children":[["$","div",null,{"className":"readme-view max-w-4xl mx-auto p-8"}],["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}]}]]}],{"children":[["slug","what-is-jsx-tsx-and-how-it-differs-from-html","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","$0:f:0:1:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",null,["$","$L5",null,{"children":"$L6"}]]}],{},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","9fnXahlaRpYLl31xAY5C4",{"children":[["$","$L7",null,{"children":"$L8"}],["$","$L9",null,{"children":"$La"}],null]}]]}],false]],"m":"$undefined","G":["$b","$undefined"],"s":false,"S":true}
-4:["$","div",null,{"className":"max-w-4xl mx-auto p-8","children":["$","div",null,{"className":"markdown-container","children":[["$","div",null,{"className":"flex flex-wrap items-center justify-start gap-4 mb-5","children":[["$","button",null,{"className":"p-4 rounded-lg cursor-pointer ","children":["$","svg",null,{"stroke":"currentColor","fill":"currentColor","strokeWidth":"0","viewBox":"0 0 448 512","children":["$undefined",[["$","path","0",{"d":"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z","children":[]}]]],"className":"$undefined","style":{"color":"$undefined"},"height":"1em","width":"1em","xmlns":"http://www.w3.org/2000/svg"}]}],["$","h1",null,{"className":"text-4xl font-bold ","children":"What Is JSX TSX and How It Differs From HTML"}]]}],["$","blockquote",null,{"className":"underline font-semibold","children":"01 December 2024"}],["$","hr",null,{}],["$","div",null,{"className":"prose","children":[["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":[["$","strong","strong-0",{"children":"JSX (JavaScript XML)"}],": A syntax extension for JavaScript used in React to describe the UI structure."]}],"\n",["$","li","li-1",{"children":[["$","strong","strong-0",{"children":"TSX (TypeScript XML)"}],": Similar to JSX but used in React projects with TypeScript for type safety."]}],"\n",["$","li","li-2",{"children":"Both allow developers to write code that looks like HTML, but they are not HTML—they are syntactic sugar that gets transpiled into JavaScript."}],"\n"]}],"\n",["$","hr","hr-0",{}],"\n",["$","h3","h3-0",{"children":"Key Differences Between JSX/TSX and HTML"}],"\n",["$","table","table-0",{"children":[["$","thead","thead-0",{"children":["$","tr","tr-0",{"children":[["$","th","th-0",{"children":["$","strong","strong-0",{"children":"Feature"}]}],["$","th","th-1",{"children":["$","strong","strong-0",{"children":"JSX/TSX"}]}],["$","th","th-2",{"children":["$","strong","strong-0",{"children":"HTML"}]}]]}]}],["$","tbody","tbody-0",{"children":[["$","tr","tr-0",{"children":[["$","td","td-0",{"children":["$","strong","strong-0",{"children":"Syntax"}]}],["$","td","td-1",{"children":"Combines JavaScript/TypeScript with XML-like tags."}],["$","td","td-2",{"children":"Pure markup language."}]]}],["$","tr","tr-1",{"children":[["$","td","td-0",{"children":["$","strong","strong-0",{"children":"Attributes"}]}],["$","td","td-1",{"children":["Uses ",["$","code","code-0",{"children":"camelCase"}]," (e.g., ",["$","code","code-1",{"children":"className"}],", ",["$","code","code-2",{"children":"onClick"}],")."]}],["$","td","td-2",{"children":["Uses standard HTML attributes (e.g., ",["$","code","code-0",{"children":"class"}],", ",["$","code","code-1",{"children":"onclick"}],")."]}]]}],["$","tr","tr-2",{"children":[["$","td","td-0",{"children":["$","strong","strong-0",{"children":"Dynamic Content"}]}],["$","td","td-1",{"children":["Allows embedding of JavaScript expressions using ",["$","code","code-0",{"children":"{}"}],"."]}],["$","td","td-2",{"children":["Requires separate scripting with ",["$","code","code-0",{"children":"Kavindu Udara
Whatsapp
12 February 2025
Yes, you can integrate WhatsApp into your web application using the WhatsApp Business API. This API allows you to send and receive messages, manage contacts, and automate interactions with users on WhatsApp. Here's how you can get started:
+Kavindu Udara
Whatsapp
12 February 2025
Yes, you can integrate WhatsApp into your web application using the WhatsApp Business API. This API allows you to send and receive messages, manage contacts, and automate interactions with users on WhatsApp. Here's how you can get started:
1. WhatsApp Business API
The WhatsApp Business API is the official way to integrate WhatsApp into your application. It is designed for businesses and developers to interact with users at scale.
@@ -177,4 +177,4 @@
Summary
Free options like the WhatsApp Business App or Twilio's sandbox are limited and not suitable for production use.
Always ensure compliance with WhatsApp's policies to avoid account bans.
-
If you're just starting out, I recommend using the Twilio WhatsApp Sandbox for testing and then transitioning to the paid API for production use.
\ No newline at end of file
+
If you're just starting out, I recommend using the Twilio WhatsApp Sandbox for testing and then transitioning to the paid API for production use.