Introduction

React.js is a JavaScript library for building user interfaces, developed by Facebook. It allows you to create reusable UI components and efficiently manage the state of your application.

JSX

JSX is a syntax extension for JavaScript used with React to describe what the UI should look like. It allows you to write HTML-like code within JavaScript.

const element = 
Hello, world!
;

Components

A React component is a reusable piece of UI that can contain both presentation and logic. Components can be either functional or class-based.

// Functional Component
function Greeting(props) {
    return 
Hello, {props.name}!
;
}

// Class-based Component
class Greeting extends React.Component {
    render() {
        return 
Hello, {this.props.name}!
;
    }
}

Props

Props (short for properties) are used to pass data from parent to child components in React. They are read-only and immutable.

function Greeting(props) {
    return 
Hello, {props.name}!
;
}

ReactDOM.render(
    ,
    document.getElementById('root')
);

State

State is used to manage data that changes over time within a component. It is mutable and can only be used in class-based components.

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    render() {
        return (
            

                
Count: {this.state.count}
                 this.setState({ count: this.state.count + 1 })}>Increment
            
        );
    }
}

Lifecycle Methods

Lifecycle methods are special methods that are invoked at different stages of a component's lifecycle. They allow you to perform actions such as initialization, updates, and cleanup.

class App extends React.Component {
    componentDidMount() {
        // invoked after the component is mounted
    }

    componentDidUpdate(prevProps, prevState) {
        // invoked after the component updates
    }

    componentWillUnmount() {
        // invoked before the component is unmounted
    }

    render() {
        return 
Hello, world!
;
    }
}