Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

Using JSX in React: The Art of Creating Dynamic Elements

🚀 What Will You Learn in This Guide?​

In this guide, you will learn how to create dynamic user interfaces similar to HTML but with the power of JavaScript by using the JSX (JavaScript XML) structure in React applications.
We will cover variable usage, event handlers, dynamic lists (map), and conditional rendering (&&) step by step.

💻 Prerequisites​

Before you start, you need to have the following tools installed:

  • Node.js (active version)
  • Knowing how to create a project with Create React App
  • Basic knowledge of JavaScript, HTML and CSS

1️⃣ Project Setup and Cleaning​

Creating a New Project​
npx create-react-app genixnode-jsx-rehberi

This command creates a new React project.

Introduction and Launch of the Project​

cd genixnode-jsx-rehberi
npm start

The browser will automatically open http://localhost:3000/.

Clearing Default Codes​

Open the src/App.js file and change its content to the following:


import React from 'react';
import './App.css';

function App() {
  return null; // Şimdilik boş
}

export default App;

Then delete this file:


rm src/logo.svg

2️⃣ Establishing Basic Structure with JSX​

JSX allows you to add HTML-like markup within JavaScript. However, React forces you to return a single root element.

Example JSX:


function App() {
  return (
    <>
      <h1>Merhaba, GenixNode!</h1>
      <p>JSX öğreniyorum.</p>
    </>
  )
}
<>...</>

The fragment structure allows you to wrap multiple elements without adding extra <div>.

3️⃣ Adding CSS and Attributes to JSX​

Update CSS File src/App.css:


.ortala {
  display: flex;
  flex-direction: column;
  align-items: center;
}
className Usage​

function App() {
  return (
    <div className="ortala">
      <h1>Merhaba, GenixNode!</h1>
      <p>JSX öğreniyorum.</p>
    </div>
  )
}

In JSX, className is used instead of class, because class is a reserved word in JavaScript.

Assigning Attributes with Variables​

const baslikID = "ana-selamlama";
<h1 id=&#123;baslikID&#125;>Merhaba, GenixNode!</h1>

You can assign variables directly to JSX by using quotes instead.

4️⃣ Adding Event in JSX​

Creating a Function​

const emojiIsminiGoster = event => alert(event.target.id);
Using onClick​

<button onClick=&#123;emojiIsminiGoster&#125;>
  <span id="gulen-yuz">😀</span>
</button>

Event names are written with camelCase: onClick, onChange, onSubmit etc.

5️⃣ Creating Dynamic JSX Elements with Map​

Define Dataset​

const emojis = [
  { emoji: "😀", name: "gulen-yuz" },
  { emoji: "🎉", name: "parti-konfeti" },
  { emoji: "💃", name: "dans-eden-kadin" }
];
Render with Loop​

<ul>
  {emojis.map(e => (
    <li key={e.name}>
      <button onClick=&#123;emojiIsminiGoster&#125;>
        <span id={e.name}>{e.emoji}</span>
      </button>
    </li>
  ))}
</ul>

It is mandatory to add keys to each item. This lets React figure out which element to update.

6️⃣ Conditional Element Showing (Short-Circuiting)​

Example:


const aksiyonGoster = false;

{aksiyonGoster && <p>Bu metin yalnızca koşul doğruysa görünür!</p>}

With the && operator, if the condition is true, the element is rendered; If not, it is not added at all.

❓ Frequently Asked Questions (FAQ)​

  1. Is JSX standard HTML?

No. JSX is a special syntax that is similar to HTML but runs within JavaScript.

  1. Why use className and not class?

Because class is a keyword in JavaScript. className is used in React.

  1. Why is key mandatory?

React uses keys to keep track of DOM differences. It must be unique.

  1. How to write comments in JSX?

{/* Bu bir yorum satırıdır */}
  1. How to return multiple elements?

With ... (React Fragment) structure, without using extra <div>.

🧩 Result​

In this guide, you learned the basics of React components using JSX: HTML-like structure, variables, events, dynamic rendering with map and conditional display.

Now you can safely create your own components. Try your first JSX project on the GenixNode platform right now! 🚀