Create React Elements

๐Ÿ‘จโ€๐Ÿ’ผ Let's convert this to use React! But don't worry, we won't be doing any JSX just yet... You're going to use raw React APIs here.
In modern applications, you typically get React and React DOM files from a "package registry", like npm where packages we use are (react and react-dom).
A package registry is a centralized repository where developers can publish and share reusable code packages.
To keep things simple for these exercises, we'll import React from slightly different locations:
  • public/react.js (accessed at /react.js)
  • public/react-dom/client.js (accessed at /react-dom/client.js)
These files use a service called esm.sh to provide the React packages.
Don't worry too much about esm.sh for now - it's just helping us load React easily in these exercises.
Here's a simple example of how to use the React createElement API:
import { createElement } from '/react.js'
import { createRoot } from '/react-dom/client.js'

const elementProps = { id: 'element-id', children: 'Hello world!' }
const elementType = 'h1'
const reactElement = createElement(elementType, elementProps)

const root = createRoot(rootElement)
root.render(reactElement)
๐Ÿฆ‰ As a reminder, in a typical application, your import will be something like
import { createRoot } from 'react-dom/client'
With that, a build tool or importmap will handle resolving that to the correct path.
The "props" in elementProps above is short for "properties". Props are a key concept in React - they're the way we pass data into our elements. You can think of the element type as a blueprint for the kind of React component to create, and the props are the inputs that customize that element.
children is a special prop in React. It represents the content inside an element. You have a few ways to specify children:
  1. As a prop (like in the first example above)
  2. As multiple arguments to createElement
  3. As an array
Here's an example showing the last two methods:
const elementProps = { id: 'element-id' }
const elementType = 'h1'

// Method 2: Multiple arguments
const reactElement1 = createElement(
	elementType,
	elementProps,
	'Hello',
	' ',
	'world!',
)

// Method 3: Array of children
const children = ['Hello', ' ', 'world!']
const reactElement2 = createElement(elementType, elementProps, children)

createRoot(rootElement).render(reactElement1) // or reactElement2
Alright! Let's put this into practice!
๐Ÿ’ฐ Tip: Use console.log(reactElement) to see what your created element looks like. You might find the structure interesting!

Please set the playground first

Loading "Create React Elements"
Loading "Create React Elements"
Login to get access to the exclusive discord channel.
  • ๐ŸŽฃHooks
    General
    Terminal error when setting playground
    Natiq ๐Ÿš€:
    Every time I click on the "SET TO PLAYGROUND", the app stops with the following error. How can I fix...
    1 ยท 7 days ago
  • โš›๏ธFundamentals
    Playground + live reload?
    Jonas ๐Ÿš€:
    I'm just starting the epic react course, and I'm struggling with how to use the playground. I've wat...
    • โœ…1
    2 ยท 15 days ago
  • General
    Welcome to EpicReact.dev! Say Hello ๐Ÿ‘‹
    Kent C. Dodds โ—† ๐Ÿš€๐Ÿ†๐ŸŒŒ:
    Welcome to the first of many posts in the EpicReact.dev channel! Take a moment to introduce yourself...
    • ๐Ÿš€6
    59 ยท 9 days ago
  • โš›๏ธFundamentals
    Raw API - CORS policy error
    a:
    Hello there! I have this strange error in the console in my Raw API exercices and nothing is displa...
    • โœ…2
    3 ยท 7 months ago
  • General
    error when installing the MCP server
    DBattou ๐Ÿš€:
    I tried to install the mcp server by following the instructions on the blog post here -> https://www...
    • ๐Ÿ‘1
    • โœ…1
    8 ยท 2 months ago
  • โš›๏ธFundamentals
    02. Raw API / 01. Create React Elements
    Tolu:
    When I set the playground in this lesson there's no 'react.js' and '/react-dom/client.js' files add...
    • โœ…1
    3 ยท 2 months ago
  • General
    Interviews with Experts -> Start Watching CTA gives regional restricted license error
    .shreyasvaidya ๐Ÿš€:
    I have purchased my course from India with the regional pricing method, and I am trying to watch the...
    • โœ…1
    4 ยท 4 months ago
  • General
    You are offline - warning
    marianavinyolas ๐ŸŒŒ ๐Ÿš€:
    Hi there! Today I want to start with the Advanced Patterns workshop, but after clone and run the rep...
    • โœ…1
    3 ยท 4 months ago
  • General
    โš›๏ธFundamentals
    Clicking on index.html when start opens in Terminal and not on the editor.
    Waddle ๐Ÿš€:
    Hello, just starting out with this and noticed that when I click on the 'index.html' file as display...
    • โœ…2
    1 ยท 4 months ago
  • โš›๏ธFundamentals
    04. Custom components / 02. Raw API
    mpirrocco ๐Ÿš€:
    Am getting an error with this code which I believe is exactly like the solution, so I can't figure o...
    • โœ…1
    5 ยท 4 months ago
  • General
    Am I following the course in the proper way?
    bauti ๐Ÿš€ ๐ŸŒŒ:
    The way im doing things in epic-react is: Clone the repo for the module i want to do (for example a...
    • โœ…1
    3 ยท 4 months ago
  • ๐ŸŽฃHooks
    General
    VSCode imports from wrong source
    mathemaat ๐Ÿš€:
    I encountered something silly that threw me off for a minute or two. I was working on the Tic Tac To...
    • โœ…1
    1 ยท 5 months ago
  • General
    Terminal Errors When Running Workshop App
    Giovanni ๐Ÿš€:
    Hello guys, I am facing an issue with the Workshop App, that basically I get this message over and...
    • โœ…1
    3 ยท 5 months ago
  • General
    Launch editor error: spawn code ENOENT
    Andrew Elans ๐ŸŒŒ ๐Ÿš€:
    Clicking index.html gives this error in VS Code. Both from Chrome and Safari. Anyone?
    • โœ…2
    6 ยท 10 months ago
  • โš›๏ธFundamentals
    Fundamentals 9.1 - 9.3 Error Boundary tests need update
    mathemaat ๐Ÿš€:
    In the video on Error Boundaries (Fundamentals 9.2), the error being caught is `Cannot read properti...
    • โœ…1
    5 ยท 5 months ago
  • โš›๏ธFundamentals
    ReferenceError: File is not defined
    Tom_K ๐Ÿš€ ๐ŸŒŒ:
    i get this error trying to access the mock server (/onboarding) ReferenceError: File is not define...
    • โœ…1
    8 ยท 6 months ago
  • General
    Cannot connect workshop app
    Philipp ๐Ÿš€:
    I try to connect with my Company MacBook and get the following error ๐Ÿ˜ฆ There was an error: unable t...
    • โœ…1
    5 ยท 6 months ago
  • โš›๏ธFundamentals
    TypeScript 05. Reduce Duplication
    Elliott ๐Ÿš€ ๐ŸŒŒ:
    Hi everyone, hoping you have all had a good Christmas, and happy new year to you. Apologies if this ...
    • โœ…1
    1 ยท 6 months ago
  • General
    Problem generating the diff
    mikeyjmcc ๐Ÿš€:
    I am not sure what has changed but I am now receiving errors that the diff cannot be generated. This...
    • โœ…2
    1 ยท 6 months ago
  • General
    Problem with playground
    Xrayoptions ๐Ÿš€:
    Problem section doesn't show <@105755735731781632> how to fix it ?
    • โœ…1
    9 ยท 6 months ago
  • โš›๏ธFundamentals
    4. Custom Components / 02. Raw API
    Jakub ๐Ÿš€ ๐ŸŒŒ:
    Hey I noticed something weird in content test in Custom Components / Raw API: > Proper elements are ...
    • โœ…1
    4 ยท 7 months ago
  • General
    How to run tests in IDE?
    anonymousBlack10:
    Is it possible to run the tests from the IDE or are they setup to be run just from the browser? Some...
    • โœ…1
    1 ยท 7 months ago
  • General
    Launch editor error: Could not open 'index.html' from:'playground' in the editor.
    Japhet ๐Ÿš€ ๐Ÿ† ๐ŸŒŒ:
    I'm encountering an issue when trying to open a link from the file list. The error message I receive...
    • โœ…1
    15 ยท 9 months ago
  • โš›๏ธFundamentals
    Blocked on /02/01 , 404 on /react.js
    <Alterion.Dev> ๐Ÿš€:
    I'm currently on <http://localhost:5639/exercise/02/01/problem> , I did in fact properly link the pl...
    • โœ…2
    9 ยท 8 months ago
  • โšกPerformance
    โš›๏ธFundamentals
    Clarification on Calling Components as Interpolated Function Calls
    sethwbarton ๐Ÿš€:
    TL;DR: Is there any reason to prefer the JSX syntax over the interpolation syntax? Is one more perfo...
    • โœ…1
    8 ยท 9 months ago
  • General
    AI Assistant?
    John ๐Ÿš€:
    Kent has mentioned an AI assistant that he's using in VSCode. Is there any detail on what that is an...
    • โœ…2
    2 ยท 9 months ago
  • General
    Script to save playground folder
    larissapissurno ๐Ÿš€:
    Hi all, I personally like to take notes on the playground files, so in order to not lose this notes ...
    • โœ…1
    2 ยท 9 months ago
  • General
    Runninng Learning app on iPad?
    marcus_polonus ๐Ÿš€ ๐ŸŒŒ:
    Hi all, Did anyone managed to setup learning app on iPad? I tried to use codesandbox, but when I am...
    • โœ…1
    1 ยท 9 months ago
  • General
    โš›๏ธFundamentals
    Error boundary good practice
    Lloren ๐Ÿš€:
    I have always wondered if the error boundary is there a limit of error boundary that you can impleme...
    • โœ…1
    1 ยท 9 months ago
  • โš›๏ธFundamentals
    Error on loading deployed version - React Fundamentals
    Lucas Wargha ๐Ÿš€ ๐ŸŒŒ:
    On this link: https://www.epicreact.dev/get-started?module=react-fundamentals%7D if you click on ge...
    • โœ…1
    3 ยท 9 months ago