#React

Below are the different types of states that can exist within an application. There are three main types:

1. Local State

Local state pertains to a single component. An example of this would be listening to user input in a field or toggling a “show more details” button. Typically, local state is managed within the component using useState or useReducer.

2. Cross-Component State

Cross-component state impacts multiple components. For instance, managing the open/closed state of a modal overlay. While this can also be managed using useState or useReducer, it often involves passing state between components via props drilling.

3. App-Wide State

App-wide state influences the entire application, such as themes or user authentication status. Similar to cross-component state, this can be managed using useState or useReducer, albeit with the assistance of props drilling.

Here is the step by step guide to create a React project with Vite.

• Run the command npm create vite in the command prompt.
• Afer the script you will be prompted to enter a project name.
• After entering the project name, Vite will prompt you to select a framework. Select the framework as React.
• After selecting framework, Vite will prompt you to select language type.
• After selecting the language type, Vite will show the message as Scaffolding the project in the location.
• After that you can go to the folder and instruct to install the dependencies with the command npm install.

And here is the step to install Tailwind CSS as a Vite plugin.

• Run the command npm install tailwindcss @tailwindcss/vite to Install tailwindcss and @tailwindcss/vite via npm.

• Add the @tailwindcss/vite plugin to your Vite configuration.

  import { defineConfig } from 'vite'
  import tailwindcss from '@tailwindcss/vite'
  export default defineConfig({
  plugins: [
      tailwindcss(),
  ],
  })

• Add an @import "tailwindcss"; to your CSS file that imports Tailwind CSS.

• After that you can run the project with command npm run dev or whatever command is configured in your package.json file..

References

DigitalOcean, TailwindCSS

React and ReactDOM are two distinct libraries that are commonly used together in the development of web applications with React.

React is a JavaScript library focused on building user interfaces. It follows a declarative approach, where developers define what the UI should look like based on the current state of the application. React then efficiently updates and renders components as the state changes. Its design emphasizes flexibility and efficiency, making it a popular choice for developing both web and mobile applications.

ReactDOM, on the other hand, serves as a bridge between React and the DOM (Document Object Model). The DOM is a hierarchical structure representing the HTML content of a web page. ReactDOM provides a set of methods that enable React components to be rendered and updated within the DOM. It ensures that the user interface is synchronized with the underlying HTML structure.

In summary, React is a library for building user interfaces, while ReactDOM handles the interaction with the DOM, rendering React components onto the web page. Although they are often used together, they serve different purposes and can function independently of each other.

Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators.

&& operator

{ isYes && <A />}

? : operator

isYes ? Yes() : No()

• In React, you control branching logic with JavaScript.
• You can return a JSX expression conditionally with an if statement.
• You can conditionally save some JSX to a variable and then include it inside other JSX by - using the curly braces.
• In JSX, {cond ? <A /> : <B />} means “if cond, render <A />, otherwise <B />.
• In JSX, {cond && <A />} means “if cond, render <A />, otherwise nothing”.
• The shortcuts are common, but you don’t have to use them if you prefer plain if.

References

React Doc

Lifting state up in react means moving data from a child component to some parent component either to use it there or pass it some other child component.

• When you want to coordinate two components, move their state to their common parent.
• Then pass the information down through props from their common parent.
• Finally, pass the event handlers down so that the children can change the parent’s state.
• It’s useful to consider components as “controlled” (driven by props) or “uncontrolled” (driven by state).

A component with its own local state is often referred to as uncontrolled.

In contrast, a component is considered controlled when its key data and behavior are managed externally through props, rather than relying on its own local state. This approach allows the parent component to have full control over its behavior and data flow.

When designing a component, carefully consider which pieces of information should be controlled (managed via props) and which should remain uncontrolled (handled by the component’s state). However, keep in mind that you’re not locked into your initial decision—you can always refactor later as the needs of your application evolve.

References

React Doc, Freecodecamp