React: إعداد البيئة و JSX

npx create-react-app my-app

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

// ❌ Error：No root element
return (
  <h1>Title</h1>
  <p>Paragraph</p>
)

// ✅ Correct：Use one <div> Package
return (
  <div>
    <h1>Title</h1>
    <p>Paragraph</p>
  </div>
)

// ✅ You can also use React Fragment（<></>），Does not incur additional DOM
return (
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
)

const name = 'Alice'
const age = 28
const colors = ['red', 'green', 'blue']

// Variable
<h1>Hello, {name}!</h1>

// Expression Evaluation
<p>Next year {age + 1} years old</p>

// Ternary Operator
<span>{age >= 18 ? 'Adulthood' : 'Minor'}</span>

// Function Call
<p>Today's Date：{new Date().toLocaleDateString()}</p>

// Array Length
<p>Total {colors.length} A Color</p>

// ============================================
// Example：The Same Card，HTML vs JSX Comparison of Writing Styles
// ============================================

// ---- HTML Writing Style ----
<div class="card" style="background-color: #f0f0f0; padding: 20px;">
  <!-- TODO: replace with actual user avatar image -->
  <img src="https://i.pravatar.cc/80" alt="Avatar" class="avatar">
  <label for="name">Name：</label>
  <input type="text" id="name" disabled>
  <!-- This is a comment. -->
  <button onclick="handleClick()">Click</button>
</div>

// ---- JSX Writing Style ----
<div className="card" style={{ backgroundColor: '#f0f0f0', padding: '20px' }}>
  <!-- TODO: replace with actual user avatar image -->
  <img src="https://i.pravatar.cc/80" alt="Avatar" className="avatar" />
  <label htmlFor="name">Name：</label>
  <input type="text" id="name" disabled={true} />
  {/* This is a comment. */}
  <button onClick={handleClick}>Click</button>
</div>

# 1. Create a Project（react-ts = React + TypeScript Template）
npm create vite@latest my-react-app -- --template react-ts

# 2. Go to the project directory
cd my-react-app

# 3. Install Dependencies
npm install

# 4. Start the development server
npm run dev

  VITE v5.x  ready in 320ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.100:5173/

my-react-app/
├── index.html              # Entrance HTML Documents（Vite Parsing Entry Point）
├── package.json            # Project Configuration and Dependencies
├── vite.config.ts          # Vite Profile
├── tsconfig.json           # TypeScript Layout
├── tsconfig.app.json       # Applications TS Layout
├── tsconfig.node.json      # Node.js Environment TS Layout
├── public/                 # Static Resources（Will not be compiled）
│   └── vite.svg
└── src/                    # Source Code Directory
    ├── main.tsx            # App Entry Point（Render the root component）
    ├── App.tsx             # Root Component
    ├── App.css             # Root Component Styles
    ├── index.css           # Global Styles
    └── assets/             # Resource Files（will be compiled）
        └── react.svg

// ============================================
// Example：from  main.tsx The Complete Process for Navigating to the Page
// ============================================

// src/main.tsx —— App Entry Point
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
)

// src/App.tsx —— Root Component
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is my first one React Applications 🎉</p>
    </div>
  )
}

export default App

/* src/index.css —— Global Styles */
body {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 50px auto;
  text-align: center;
}

// in  DevTools You can view these components in real time here Props and  State
function App() {
  const [count, setCount] = React.useState(0)
  return (
    <div>
      <Header title="Counter" />
      <Counter count={count} onIncrement={() => setCount(c => c + 1)} />
      <Footer year={2026} />
    </div>
  )
}

// Components The panel will display：
// ├── App
// │   ├── Header (props: { title: "Counter" })
// │   ├── Counter (props: { count: 0, onIncrement: fn })
// │   └── Footer (props: { year: 2026 })

function ProductCatalog({ products, isLoading, error }) {
  if (isLoading) return <p style={{ textAlign: 'center', padding: 40 }}>Loading products...</p>
  if (error) return <p style={{ color: '#ff4d4f', textAlign: 'center' }}>Error: {error}</p>
  if (products.length === 0) return <p style={{ textAlign: 'center', color: '#999' }}>No products found</p>

  return (
    <div style={{ maxWidth: 600, margin: '0 auto' }}>
      <h2>Product Catalog ({products.length})</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 16 }}>
        {products.map(product => (
          <div key={product.id} style={{ border: '1px solid #eee', borderRadius: 8, padding: 12 }}>
            <h4 style={{ margin: '0 0 8px' }}>{product.name}</h4>
            <p style={{ color: '#ff4d4f', fontWeight: 'bold', margin: '0 0 4px' }}>${product.price}</p>
            {product.inStock ? (
              <span style={{ color: '#52c41a', fontSize: 12 }}>In Stock</span>
            ) : (
              <span style={{ color: '#999', fontSize: 12 }}>Out of Stock</span>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

function CatalogPage() {
  const sampleProducts = [
    { id: 1, name: 'Keyboard', price: 79, inStock: true },
    { id: 2, name: 'Mouse', price: 49, inStock: true },
    { id: 3, name: 'Monitor', price: 399, inStock: false },
  ]
  return <ProductCatalog products={sampleProducts} isLoading={false} error={null} />
}

// package.json Key Dependencies
// {
//   "dependencies": { "react": "^18.3", "react-dom": "^18.3" },
//   "devDependencies": { "vite": "^5.0", "@types/react": "^18.3", "@types/react-dom": "^18.3" }
// }

// src/main.jsx - App Entry Point
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

// src/App.jsx - Root Component
import { useState } from 'react'

function App() {
  const [currentPage, setCurrentPage] = useState('home')

  return (
    <div style={{ fontFamily: 'sans-serif', maxWidth: 800, margin: '0 auto', padding: 20 }}>
      <nav style={{ display: 'flex', gap: 16, marginBottom: 24, borderBottom: '2px solid #1890ff', paddingBottom: 12 }}>
        {['home', 'about', 'contact'].map(page => (
          <button key={page} onClick={() => setCurrentPage(page)}
            style={{
              padding: '8px 16px', border: 'none', borderRadius: 4, cursor: 'pointer',
              background: currentPage === page ? '#1890ff' : '#f0f0f0',
              color: currentPage === page ? 'white' : '#333',
            }}>
            {page.charAt(0).toUpperCase() + page.slice(1)}
          </button>
        ))}
      </nav>
      <main>
        {currentPage === 'home' && (
          <div>
            <h1>Welcome to React</h1>
            <p>This is a minimal React app with Vite. Edit src/App.jsx and save to reload.</p>
            <p>Current time: {new Date().toLocaleTimeString()}</p>
          </div>
        )}
        {currentPage === 'about' && (
          <div>
            <h2>About</h2>
            <p>Built with React 18 + Vite for fast development and HMR.</p>
          </div>
        )}
        {currentPage === 'contact' && (
          <div>
            <h2>Contact</h2>
            <p>Email us at hello@example.com</p>
          </div>
        )}
      </main>
      <footer style={{ marginTop: 40, paddingTop: 12, borderTop: '1px solid #eee', color: '#999', fontSize: 13 }}>
        © 2026 React Tutorial. Built with Vite + React 18.
      </footer>
    </div>
  )
}

export default App