ReactJS Lecture Notes

Introduction to React

• React is a JavaScript library used for building user interfaces.
• Focuses on building applications using components.
• Components are self-contained sections of code that act as reusable building blocks.
• JSX (JavaScript XML) allows writing HTML-like code within JavaScript.
• React uses a Virtual DOM to improve rendering efficiency.

Prerequisites

• JavaScript knowledge (arrays, classes, objects, ES6 features).
• HTML familiarity is necessary since React components render HTML elements.

Installation Instructions

1. Download Node.js from nodejs.org.
2. Install Visual Studio Code as a text editor from code.visualstudio.com.
3. Create a project folder and run commands using npm to create a React app.

Project Structure

• node_modules: contains external libraries and packages.
• public: contains public assets (images, fonts).
• src: contains source files, including components and styles.
• Important files:
  • main.jsx: main JavaScript file.
  • index.css: main CSS file.

Creating Components

• Create functional components using the function keyword.
• Use the JSX syntax to return HTML-like structures from components.
• Components can include other components by importing them.

Styling Components

• Styles can be applied using external CSS, CSS Modules, or inline styles.
• Each method has its pros and cons:
  • External CSS: Global styles, but can lead to naming conflicts.
  • CSS Modules: Unique class names, less risk of conflicts, but requires additional setup.
  • Inline styles: Simple to use for minimal styling, but can be less readable.

Props

• Props are properties passed from parent to child components.
• Components can receive and use props to display different data.
• Use PropTypes for type-checking props to ensure correct data types.

State Management

• Use useState to manage state within functional components.
• Updating state with useState triggers a re-render of the component.
• Use useEffect to perform side effects based on state changes or component lifecycle events.

Conditional Rendering

• Control what gets rendered based on conditions (e.g., user authentication).
• Can use ternary operators or if statements to conditionally render components.

Lists and Keys

• Use the map method to render lists of components from arrays.
• Provide a key prop to each component in a list to help React identify items.

Handling Events

• Use event handlers (e.g., onClick) to respond to user actions.
• Event handlers can change state or perform actions based on user input.

State in Objects/Arrays

• Manage state for complex data types like objects and arrays.
• Use the spread operator to maintain previous state while updating.

Context API

• The useContext hook allows sharing data across components without prop drilling.
• Create a context and use a provider to supply values to nested components.

Refs

• useRef allows accessing DOM elements directly without causing re-renders.
• Useful for managing focus, animations, and direct DOM manipulation.

Digital Clock Example

• Demonstrated creating a digital clock component with useState and useEffect.
• Uses intervals to update the clock every second.

Stopwatch Example

• Created a stopwatch component to track elapsed time.
• Utilized useRef to manage time without causing component re-renders.

Practice and Projects

• Various examples and practice projects to reinforce learning concepts in React.

This concludes the lecture notes on ReactJS. Be sure to review and practice building components and managing state using the concepts covered.