React Components

Study Notes

Functional Components: JavaScript functions that take in props and return JSX elements.
- Example: const Greeting = (props) => Hello, {props.name}!;
- Can be used with React Hooks to manage state and side effects.
Class Components: JavaScript classes that extend the React.Component class.
- Example: class Greeting extends React.Component { render() { return Hello, {this.props.name}!; } }
- Can have state and lifecycle methods.
Component Lifecycle: Methods that are called at different points during a component's life cycle.
- Examples: componentDidMount(), componentDidUpdate(), componentWillUnmount()
Props: Immutable values passed from a parent component to a child component.
- Can be used to customize the behavior of a component.
- Example: ``

JSX Syntax: A syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files.
- Example: const element = Hello, World!;
JSX Elements: The building blocks of JSX, which can be used to create React components.
- Example: <div>, <p>, ``
JSX Attributes: Used to add properties to JSX elements.
- Example: <a href="https://www.example.com">Visit Example</a>
JSX Expressions: JavaScript expressions that can be embedded inside JSX elements.
- Example: </p>Hello, {name}!
JSX and JavaScript: JSX can be used to generate JavaScript code that creates React elements.
- Example: const element = Hello, World!; compiles to const element = React.createElement("h1", null, "Hello, World!");

Functional Components are JavaScript functions that take in props and return JSX elements.
They can be used with React Hooks to manage state and side effects.
Example: const Greeting = (props) => Hello, {props.name}!;

Class Components are JavaScript classes that extend the React.Component class.
They can have state and lifecycle methods.
Example: class Greeting extends React.Component { render() { return Hello, {this.props.name}!; } }

Component Lifecycle refers to the methods that are called at different points during a component's life cycle.
Examples of lifecycle methods include componentDidMount(), componentDidUpdate(), and componentWillUnmount().

JSX Syntax is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files.
Example: const element = Hello, World!;

JSX Elements are the building blocks of JSX, which can be used to create React components.
Examples: , , ``

JSX Expressions are JavaScript expressions that can be embedded inside JSX elements.
Example: Hello, {name}!

JSX can be used to generate JavaScript code that creates React elements.
Example: const element = Hello, World!; compiles to const element = React.createElement("h1", null, "Hello, World!");