Intro to React: Components, fragments, state, and props.

What is React Created by Facebook in 2013, React is a library used for web and native user interfaces. It allows developers to build UI's out of individual pieces of code called components (which are written in JavaScript). React also uses a virtual DOM, which updates only the parts of a UI that change instead of re-rendering an entire page. Whether you are building a small or large-scale web application. React provides a structured way to manage updates, user inputs, and state management. What Are Components? Components are the building blocks of a React application. Instead of writing one long HTML file, React breaks the UI into smaller, reusable pieces. Where each component is responsible for rendering a specific part of a UI. Types of Components: Functional Components – These are simple JavaScript functions that return JSX (which looks like HTML but is actually JavaScript) and are the preferred way to write React components today. Class Components – These use JavaScript ES6 classes and were more common before React introduced Hooks (which are special functions built into React). They are used a lot less now, but still exist in some older codebases. Example of a Functional Component: function Greeting() { return Hello, world! } In this example, Greeting is a functional component that returns JSX. What Are Fragments? React requires multiple elements to be wrapped inside a single parent element. If you don’t want to add unnecessary elements, you can use Fragments instead. Example Using Fragments: function Info() { return ( About React React is a JavaScript library for building UIs. ) } Using instead of avoids extra elements in the DOM while keeping JSX valid. What Is State? In React, state is a built-in object used to track dynamic data within a component. Unlike props (which are passed in), state is managed within the component and can be updated over time, mostly in response to user interactions. React then re-renders the component automatically when the state changes. Example of State with useState import { useState } from 'react' function Counter() { const [count, setCount] = useState(0) function handleClick() { setCount(count + 1) } return ( You clicked {count} times. Click Me ) } What This Does: useState(0) sets up a state variable. count holds the current count (starting at 0). setCount updates that count. handleClick function: Runs when the button is clicked, and increases count by 1 using setCount(count + 1). return: Displays the current count inside a tag, and shows a button that, when clicked, runs handleClick. What It Looks Like on Screen: //txt You clicked 0 times. [Click Me]

Apr 4, 2025 - 03:21

Intro to React: Components, fragments, state, and props.

What is React

Created by Facebook in 2013, React is a library used for web and native user interfaces. It allows developers to build UI's out of individual pieces of code called components (which are written in JavaScript). React also uses a virtual DOM, which updates only the parts of a UI that change instead of re-rendering an entire page. Whether you are building a small or large-scale web application. React provides a structured way to manage updates, user inputs, and state management.

What Are Components?

Components are the building blocks of a React application. Instead of writing one long HTML file, React breaks the UI into smaller, reusable pieces. Where each component is responsible for rendering a specific part of a UI.

Types of Components:

Functional Components – These are simple JavaScript functions that return JSX (which looks like HTML but is actually JavaScript) and are the preferred way to write React components today.
Class Components – These use JavaScript ES6 classes and were more common before React introduced Hooks (which are special functions built into React). They are used a lot less now, but still exist in some older codebases.

Example of a Functional Component:

function Greeting() {
  return <h1>Hello, world!h1>
}

In this example, Greeting is a functional component that returns JSX.

What Are Fragments?

React requires multiple elements to be wrapped inside a single parent element. If you don’t want to add unnecessary

elements, you can use Fragments instead.

Example Using Fragments:

function Info() {
  return (
    <>
      <h2>About Reacth2>
      <p>React is a JavaScript library for building UIs.p>
    
  )
}

Using <> instead of

avoids extra elements in the DOM while keeping JSX valid.

What Is State?

In React, state is a built-in object used to track dynamic data within a component. Unlike props (which are passed in), state is managed within the component and can be updated over time, mostly in response to user interactions.

React then re-renders the component automatically when the state changes.

Example of State with useState

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  function handleClick() {
    setCount(count + 1)
  }

  return (
    <>
      <p>You clicked {count} times.p>
      <button onClick={handleClick}>Click Mebutton>
    
  )
}

What This Does:

useState(0) sets up a state variable.
count holds the current count (starting at 0).
setCount updates that count.
handleClick function: Runs when the button is clicked, and increases count by 1 using setCount(count + 1).
return: Displays the current count inside a
tag, and shows a button that, when clicked, runs handleClick.

What It Looks Like on Screen:

//txt
You clicked 0 times.
[Click Me]<- //Button

Clicking the button updates the count each time:

//txt
You clicked 1 times.
You clicked 2 times.
[Click Me]<- //Button

What Are Props?

Props (short for "properties") are objects passed to components as parameters, allowing them to receive data from their parent components.

Example of Using Props:

function Greeting(props) {
  return <h1>Hello, {props.name}!h1>
}

function App() {
  return <Greeting name="John" />
}

In this example, the Greeting component takes a name prop and displays it. If we change name in , the text updates accordingly.

Destructuring Props for Cleaner Code:

Instead of writing props.name, since props are objects we can destructure them directly inside the function parameter.

function Greeting({ name }) {
  return <h1>Hello, {name}!h1>
}

This avoids unnecessary prop references.

The Big 4

Learning components, fragments, state and props is crucial for understanding React.

Components let you break your UI into reusable pieces.
Fragments help keep the DOM clean by avoiding unnecessary elements.
State allows components to track and update dynamic data over time.
Props enable data sharing between components.

These concepts form the foundation of React and help make applications modular and more organized. Practice these fundamentals, and you will be able to work in React with confidence.