DEV Community: isaiah2k

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

isaiah2k — Fri, 04 Apr 2025 01:55:29 +0000

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 <div> elements, you can use Fragments instead.

Example Using Fragments:

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

Using <></> instead of <div> 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 Me</button>
    </>
  )
}

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 <p> 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 <Greeting name="John" />, 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.

Resources

String Interpolation in JavaScript.

isaiah2k — Tue, 15 Oct 2024 07:42:45 +0000

Introduction to Template Literals.

String manipulation is a very common task in programming, especially when building interactive web applications. If you've ever spent time working with JavaScript, then you've likely had to put some variables into strings.
In older versions of JavaScript, this meant using the + operator to join strings together through a process called string concatenation. However, with the introduction of template literals in the JavaScript ES6(2015) update. We now have a cleaner way to insert variables into strings, called string interpolation.

What are Template Literals?

Template literals allow us to manipulate strings easier. They are enclosed in backticks (`) rather than (') or ("), and they support string interpolation by using the (${}) syntax to place variables, or function calls directly into a string.

Here’s an example of how template literals simplify string interpolation.

const name = "John"
const age = 24

// Old method using concatenation
const greeting = "Hello, " + name + "! You are " + age + " years old."

// New method using template literals
const greetingWithTemplateLiteral = `Hello, ${name}! You are ${age} years old.`

console.log(greetingWithTemplateLiteral) // Outputs: Hello, John! You are 24 years old.

Benefits of Using Template Literals

1. Improved Readability

When using string concatenation, it was easy to get lost in a bunch of + signs, especially when working with longer strings. Template literals avoid this by letting you write strings in a way that is easier to follow.

const product = "laptop"
const price = 1400

console.log(`The price of the ${product} is $${price}`)
// Outputs: The price of the laptop is $1400

2. Multi-line Strings

Before template literals, you had to use escape characters like \n to make multi-line strings. Now you can write them inside backticks(`).

// Old method
const multiLineString1 = "This is the first line" + "\n" + "This is the second line" + "\n" + "This is the third line"

// New method
const multiLineString2 = `This is the first line
This is the second line
This is the third line`

console.log(multiLineString1)
console.log(multiLineString2)
/* Both output:
This is the first line
This is the second line
This is the third line
*/

3. Expression Evaluation

You can also perform calculations, call functions, or manipulate data inside strings.

const a = 1
const b = 10

console.log(`The sum of a and b is ${a + b}`) 
// Outputs: The sum of a and b is 11

const upperCaseName = (name) => name.toUpperCase()
console.log(`Your name in uppercase is ${upperCaseName("John")}`)
// Outputs: Your name in uppercase is JOHN

Common Use Cases in JavaScript

1. HTML Generation

Instead of building HTML strings with concatenation, you can put variables directly into the string with interpolation.

const name = "John"
const htmlContent = `
  <h1>Hello, ${name}!</h1>
  <p>Welcome to the site.</p>
`

2. Logging Messages

You can also insert variables directly into log messages without the need for concatenation.

const user = "John"
const action = "logged in"

console.log(`User ${user} just ${action}`)
// Outputs: User John just logged in

3. Creating URLs

Template literals make it easier to construct URLs as well.

const userId = 123
const apiUrl = `https://api.example.com/user/${userId}/details`

console.log(apiUrl)
// Outputs: https://api.example.com/user/123/details

4. Conditional Logic

Another great use case is Conditional logic. With template literals you can give strings simple conditions using the ternary operator (? :), which is a shorthand for an if-else condition.
Logical operators like && (and) or || (or) can also be used to add conditional parts to a string. This removes the need for extra if-else statements or the need for concatenation.

const isMember = true
console.log(`User is ${isMember ? 'a member' : 'not a member'}`) 
// Outputs: User is a member

You can also add more complex expressions inside template literals.

/* In this example, the condition age >= 18 is evaluated
the result is either “an adult” or “a minor” based on the value of age*/
const age = 24

const message = `You are ${age >= 18 ? 'an adult' : 'a minor'}`

console.log(message) 
// Outputs: You are an adult

/*In this, if isLoggedIn is true and username exists
username is displayed or else, it defaults to “Guest” */
const isLoggedIn = true
const username = "John"

const greeting = `Welcome ${isLoggedIn && username ? username : 'Guest'}`

console.log(greeting)
// Outputs: Welcome John

Conclusion

Template literals in JavaScript offer a cleaner, and more efficient way to handle string interpolation. Between building web content, logging messages, or creating more readable code, this method provides the flexibility you need.

Next time your juggling with variables and strings, try using template literals. You'll quickly see why it's my go-to method for working with JavaScript.

Resources

MDN Web Docs - Template Literals
GitHub - Phase 1 Review Strings Lab
W3 Schools - JavaScript Template Strings