Building React Components Using AI

Related learning

Skill path
AI-Assisted Front-End Development
Learn front-end development with AI tools. This course teaches you to build React applications using AI coding agents to speed up workflows.
Includes 2 Courses
With Certificate
Intermediate.
6 hours

JSX Syntax and JavaScript

JSX is a syntax extension of JavaScript. It’s used to create DOM elements which are then rendered in the React DOM.

A JavaScript file containing JSX will have to be compiled before it reaches a web browser. The code block shows some example JavaScript code that will need to be compiled.

import React from 'react';
import { createRoot } from 'react-dom/client';
 
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<h1>Render me!</h1>);

The Virtual Dom

React uses Virtual DOM, which can be thought of as a blueprint of the DOM. When any changes are made to React elements, the Virtual DOM is updated. The Virtual DOM finds the differences between it and the DOM and re-renders only the elements in the DOM that changed. This makes the Virtual DOM faster and more efficient than updating the entire DOM.

React Components

A React component is a reusable piece of code used to define the appearance, behavior, and state of a portion of a web app’s interface. Components are defined as functions. Using the component as a factory, an infinite number of component instances can be created.

import React from 'react';

function MyFunctionComponent() {
  return <h1>Hello from a function component!</h1>;
}

JSX Capitalization

React requires that the first letter of components be capitalized. JSX will use this capitalization to tell the difference between an HTML tag and a component instance. If the first letter of a name is capitalized, then JSX knows it’s a component instance; if not, then it’s an HTML element.

// This is considered a component by React.
<ThisComponent />
  
// This is considered a JSX HTML tag. 
<div>

ReactDOM JavaScript library

The JavaScript library react-dom/client contains the createRoot() method, which is used to create a React root at the HTML element used as an argument. The React root renders JSX elements to the DOM by taking a JSX expression, creating a corresponding tree of DOM nodes, and adding that tree to the DOM.

The code example begins by creating a React root at the HTML element with the id app and storing it in root. Then, using root‘s render() method, the JSX used as an argument is rendered.

import React from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = createRoot(container);

root.render(<h1>This is an example.</h1>);

JSX attributes

The syntax of JSX attributes closely resembles that of HTML attributes. In the block of code, inside of the opening tag of the <h1> JSX element, we see an id attribute with the value "example".

const example = <h1 id="example">JSX Attributes</h1>;

JSX syntax and HTML

In the block of code we see the similarities between JSX syntax and HTML: they both use the angle bracket opening and closing tags (<h1> and </h1>).

When used in a React component, JSX will be rendered as HTML in the browser.

const title = <h1>Welcome all!</h1>

React Style Objects

In React, you can style components by passing an object with CSS properties and their values using the style attribute. This approach provides a way to programmatically style components, making your app more dynamic.

const buttonStyle = {
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  border: 'none',
  borderRadius: '5px'
};

function StyledButton() {
  return <button style={buttonStyle}>Click Me!</button>;
}

Function Component Base

React function components follow regular JavaScript class syntax in declaration and returns JSX elements.

This example shows a simple React function component.

function MyComponent() {
  return <h1>Hello world!</h1>;
}

React CSS Styles

React supports inline CSS styles for elements. Styles are supplied as a style prop with a JavaScript object.

// Passing the styles as an object
const color = {
  color: 'blue',
  background: 'sky'
};
<h1 style={color}>Hello</h1>

// Passing the styles with an inline object, as a shorthand
<h1 style={{ color: 'red' }}>I am red!</h1>

React Function Component

In React, a function component must return JSX to display UI elements. You are free to incorporate any JavaScript logic before returning. For example, you can define variables or execute functions to prepare data used in your JSX.

function CustomComponent() {
  const message = "Hello World";
  const number = 5;
  const updatedValue = number * 2;

  return (
    <div>
      <h1>{message}</h1>
      <p>The updated value is: {updatedValue}</p>
    </div>
  );
}

Nested JSX Elements

In React, you can nest JSX elements to build complex UIs, with each JSX expression wrapped in a single outermost parent element or fragment. When returning or assigning multiline JSX, wrap it in parentheses for readability and to avoid parsing issues.

function MyComponent() {
  return (
    <div>
      <header>
        <h1>Welcome to My Site</h1>
      </header>
      <main>
        <p>This is a paragraph inside a nested JSX element.</p>
      </main>
    </div>
  );
}

JSX and HTML

JSX in React has some unique syntax compared to HTML. Self-closing tags, such as images or inputs, must include a trailing / (for example, <br />). Also, instead of class, JSX uses className to define CSS classes.

const element = (
  <div className="container">
    <img src="image.jpg" alt="Description"/>
    <br />
  </div>
);

JSX Expressions

In JSX, you can embed JavaScript expressions using curly braces {}. This helps integrate dynamic data into your markup seamlessly. For example, {userName} will render the JavaScript variable userName inside JSX. This syntax is especially useful when looping through data or conditional rendering.

const userName = 'Alice';
const greeting = <h1>Hello, {userName}!</h1>;

// Here `userName` is a JavaScript variable embedded in JSX.

Learn more on Codecademy

Skill path
AI-Assisted Front-End Development
Learn front-end development with AI tools. This course teaches you to build React applications using AI coding agents to speed up workflows.
Includes 2 Courses
With Certificate
Intermediate.
6 hours