# React Basics React is a JavaScript library for building user interfaces, particularly suited for single-page applications. Here are the basics you need to understand to get started with React: ## Components In React, you create reusable pieces of your UI using components. A component is a JavaScript class or function that optionally accepts inputs called "props" (short for properties) and returns a React element describing how a section of the UI should appear. **Functional Component:** ```jsx function Greeting(props) { return

Hello, {props.name}!

; } ``` **Class Component:** ```jsx class Greeting extends React.Component { render() { return

Hello, {this.props.name}!

; } } ``` ## JSX JSX is a syntax extension for JavaScript that allows you to write HTML-like structures in your React code. It gets compiled to `React.createElement()` calls. ```jsx const element =

Hello, world!

; ``` ## State State is used to manage data that may change over time in a component. It's often used to update the UI based on user interactions. ```jsx class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } incrementCount = () => { this.setState({ count: this.state.count + 1 }); } render() { return (

Count: {this.state.count}

); } } ``` ## Props vs State - **Props** (short for properties) are passed down from parent components to child components and are read-only. - **State** is managed within a component and can be updated using `this.setState()`. ## Component Lifecycle Methods React components have several lifecycle methods that you can use to run code at different stages of a component's life, such as mounting, updating, and unmounting. ```jsx class Example extends React.Component { componentDidMount() { console.log('Component did mount'); } componentDidUpdate(prevProps, prevState) { console.log('Component did update'); } componentWillUnmount() { console.log('Component will unmount'); } render() { return

Hello, world!

; } } ```