First Component & Render
Write your first component function, render it into the DOM with createRoot, and see hot reload in action.
First Component & Render is a free React Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Overview
Goal: Write your first React component, mount it with createRoot, and check hot reload.
Function components
A React component is just a function returning JSX. Example: function App() { return <h1>Hi</h1> }.
Mount with createRoot
Use ReactDOM.createRoot with document.getElementById("root"), then call root.render(<App/>).
Code demo
Your first render: mount App and click to see state updates.
<div id="root"></div>
Hot reload basics
Hot reload: Save a file; the dev server rebuilds and the UI updates without losing state.
Tips for first apps
Tips:
- Keep components small.
- Use clear names like App.
- Check the console for errors if render fails.
Root creation check
Recap
Recap: Define App(), mount with createRoot, and enjoy hot reload for instant feedback.
Frequently asked questions
Is the “First Component & Render” lesson free?
Yes — the full text of “First Component & Render” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “First Component & Render”?
Write your first component function, render it into the DOM with createRoot, and see hot reload in action. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “First Component & Render” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- React Kickoff: Concepts & Setup
- Project Setup: Vite, Layout & Dev Server
- First Component & Render