Notes on ReactJS Introduction and Usage

Overview of ReactJS

• React is a JavaScript library (not a framework) used to build user interfaces (UIs) for web applications.
• The focus is on building web applications using components.
  • Components are self-contained sections of code that serve as reusable building blocks.
  • Think of components like Legos, where each one represents reusable JavaScript and HTML code.

Key Features

• JSX (JavaScript XML): A syntax extension used in React to write HTML-like code within JavaScript files.
• Virtual DOM: A lightweight version of the real DOM that allows for efficient updates by only rendering changed components, improving performance.

Installation Instructions

Prerequisites

• Knowledge of JavaScript (arrays, classes, objects, ES6 features).
• Knowledge of HTML and CSS since components involve rendering HTML elements.

Setup Steps

1. Download Node.js from nodejs.org. Includes Node Package Manager (NPM).
2. Install Visual Studio Code (VS Code).
3. Create a Project Folder in VS Code.
4. Open the terminal and navigate to the project folder.
5. Create a React app using:

   npm create vite@latest
   

   • Select react when prompted for a framework.
6. Install dependencies using:

   npm install
   

7. Start the development server:

   npm run dev
   

Project Structure

• Node Modules: Contains external libraries and packages.
• Public Folder: Stores public assets (images, fonts).
• Source Folder: Main folder for application code.
  • Contains assets for images/videos and .jsx files for components.
  • Main JSX file serves as the main entry point for the app.

Creating Components

• Creating Components involves defining functions to return HTML-like elements and exporting them for use in other files.
  • Components can accept props for dynamic data input.
  • Example component creation:

  const Header = () => {
      return <h1>My Website</h1>;
  };
  export default Header;
  

Using State and Effects

• State Management: Use the useState hook to create stateful variables.
  • Example:

  const [count, setCount] = useState(0);
  

• Effects: Use useEffect for side effects and to perform actions based on state changes.
  • Example:

  useEffect(() => {
      // Code to run on state change
  }, [dependencies]);
  

Common Patterns

• Conditional Rendering: Render components based on conditions.
• Event Handling: Handle user inputs or interactions via functions called in events.
  • Use synthetic events provided by React.

Creating a To-Do List App

• Components can be nested, allowing for complex layouts and functionalities.
• Example structure might include a main ToDoList component that manages tasks and a Task sub-component that represents individual items.
• Each task might include actions like delete, edit, or mark as complete.

Conclusion

• React is a powerful tool for building modern web applications. Its component-based architecture, efficient updating mechanisms, and overall flexibility make it a preferred choice for developers.