Tools: Understanding JSX & How a React App Starts (Beginner-Friendly Guide)

Prerequisite: Node.js ## Understanding the Basic Structure of a React App ## 1. index.html ## 2. main.jsx — The Entry Point ## Important: JSX is NOT HTML ## JavaScript Expressions Inside JSX ## JSX Rule: className Instead of class ## What Is a React Component? ## Why Components Matter? ## Watch the Full Explanation If you’re just starting with React, you might be wondering: Where does a React app actually start, and what is JSX really doing behind the scenes? In this article, I’ll break it down step by step, using a simple Vite-based React app—exactly the way I explain it in my latest YouTube video. 👉 Watch the full video here: https://youtu.be/31W0nJ2yXg8 Before running any React project Node.js must be installed on your system. You can quickly check by running: If both commands show version numbers, you’re good to go 👍 Let’s start by understanding how a React app actually runs. Open the index.html file and notice two important things: A <div id="root"></div> The main.jsx file linked at the bottom This root div is where your entire React app gets rendered. Now open src/main.jsx. You’ll see React’s createRoot function: What’s happening here? React creates a root node It takes the root element from index.html It renders the App component inside it This is the starting point of every React app. Now let’s talk about the most important concept in React: JSX. What is JSX? Normally, when using JavaScript, creating HTML requires: But React simplifies all of this using JSX. Browsers do not understand JSX. During the build process a transpiler like Babel converts JSX into plain JavaScript Behind the scenes, JSX becomes: React then uses this to create actual DOM elements. One of JSX’s most powerful features is the ability to write JavaScript expressions inside {}. You can also render variables dynamically: This is what makes React UI dynamic and powerful. Why? Because class is a reserved keyword in JavaScript. A React component is simply a JavaScript function. You can reuse the same component multiple times across your app. YouTube Video: https://youtu.be/31W0nJ2yXg8 If this helped you: 👍 Like the video 🔔 Subscribe to Project Station 💬 Leave a comment with your questions Thanks for reading — happy coding. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: node -v npm -v Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: node -v npm -v CODE_BLOCK: node -v npm -v CODE_BLOCK: createRoot(document.getElementById('root')).render( <StrictMode> <App /> </StrictMode> ); Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: createRoot(document.getElementById('root')).render( <StrictMode> <App /> </StrictMode> ); CODE_BLOCK: createRoot(document.getElementById('root')).render( <StrictMode> <App /> </StrictMode> ); CODE_BLOCK: const element = <h1>I love JSX!!!</h1>; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: const element = <h1>I love JSX!!!</h1>; CODE_BLOCK: const element = <h1>I love JSX!!!</h1>; CODE_BLOCK: React.createElement('h1', {}, 'I love JSX!!!'); Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: React.createElement('h1', {}, 'I love JSX!!!'); CODE_BLOCK: React.createElement('h1', {}, 'I love JSX!!!'); CODE_BLOCK: const age = 25; <p>Age next year: {age + 1}</p> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: const age = 25; <p>Age next year: {age + 1}</p> CODE_BLOCK: const age = 25; <p>Age next year: {age + 1}</p> CODE_BLOCK: Age next year: 26 Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: Age next year: 26 CODE_BLOCK: Age next year: 26 CODE_BLOCK: const title = "Daily Improvements"; <h1>{title}</h1> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: const title = "Daily Improvements"; <h1>{title}</h1> CODE_BLOCK: const title = "Daily Improvements"; <h1>{title}</h1> CODE_BLOCK: class="text-red" Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: class="text-red" CODE_BLOCK: class="text-red" CODE_BLOCK: className="text-red" Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: className="text-red" CODE_BLOCK: className="text-red" CODE_BLOCK: function Header() { return <h1>Hello React</h1>; } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: function Header() { return <h1>Hello React</h1>; } CODE_BLOCK: function Header() { return <h1>Hello React</h1>; } - Visit nodejs.org - Download the LTS version - Install it (just keep clicking Next) - npm gets installed automatically with Node - createElement - appendChild - The function name must start with a capital letter - It must return something renderable (usually JSX) - Reusability - Easy maintenance