<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: von CARAMEL</title>
    <description>The latest articles on DEV Community by von CARAMEL (@von_caramel).</description>
    <link>https://dev.to/von_caramel</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3964714%2F0cd7242a-234c-4a8b-b3a0-9420f652ec69.png</url>
      <title>DEV Community: von CARAMEL</title>
      <link>https://dev.to/von_caramel</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/von_caramel"/>
    <language>en</language>
    <item>
      <title>Building a API in PHP</title>
      <dc:creator>von CARAMEL</dc:creator>
      <pubDate>Wed, 03 Jun 2026 18:48:39 +0000</pubDate>
      <link>https://dev.to/von_caramel/building-a-api-in-php-2mkj</link>
      <guid>https://dev.to/von_caramel/building-a-api-in-php-2mkj</guid>
      <description>&lt;p&gt;Books API Structure&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Create folders&lt;br&gt;
app/&lt;br&gt;
app/controllers/&lt;br&gt;
app/core/&lt;br&gt;
app/models/&lt;br&gt;
app/models/DAOs/&lt;br&gt;
app/models/DTOs/&lt;br&gt;
app/models/entities/&lt;br&gt;
app/utils/&lt;br&gt;
config/&lt;br&gt;
public/&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;api/composer.json&lt;br&gt;
Configure Composer and the PSR-4 autoload so that classes with the namespace App\ are searched inside the app/ folder.&lt;br&gt;
Key content:&lt;br&gt;
{&lt;br&gt;
"name": "user/api",&lt;br&gt;
"autoload": {&lt;br&gt;
"psr-4": {&lt;br&gt;
  "App\": "app/"&lt;br&gt;
}&lt;br&gt;
}&lt;br&gt;
}&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;After creating it, run this command inside the api folder:&lt;br&gt;
composer dump-autoload&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;api/config/config.php
Defines the base URL of the project. The router removes it from REQUEST_URI to keep only routes such as /books/get.
&amp;lt;?php&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;define('BASE_URL', '/proyect/api/public');&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;api/config/dbconf.json&lt;br&gt;
MySQL DB connection:&lt;br&gt;
{&lt;br&gt;
"host": "localhost",&lt;br&gt;
"user": "root",&lt;br&gt;
"password": "",&lt;br&gt;
"db_name": "books_db"&lt;br&gt;
}&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;api/public/.htaccess&lt;br&gt;
RewriteEngine On&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;RewriteCond %{REQUEST_FILENAME} !-f&lt;br&gt;
RewriteCond %{REQUEST_FILENAME} !-d&lt;/p&gt;

&lt;p&gt;RewriteRule ^ index.php [QSA,L]&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;api/public/index.php
This is the entry point. It loads Composer, loads the configuration and calls the router.
&amp;lt;?php&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;use App\Core\Router;&lt;/p&gt;

&lt;p&gt;require_once &lt;strong&gt;DIR&lt;/strong&gt; . '/../vendor/autoload.php';&lt;br&gt;
require_once &lt;strong&gt;DIR&lt;/strong&gt; . '/../config/config.php';&lt;/p&gt;

&lt;p&gt;(new Router())-&amp;gt;dispatch($_SERVER['REQUEST_URI']);&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;api/app/core/Router.php
&amp;lt;?php&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;namespace App\Core;&lt;/p&gt;

&lt;p&gt;class Router&lt;br&gt;
{&lt;br&gt;
    protected array $routes = [&lt;br&gt;
        '/' =&amp;gt; 'HomeController@index',&lt;br&gt;
        '/books' =&amp;gt; 'BookController@index',&lt;br&gt;
        '/books/get' =&amp;gt; 'BookController@getAll',&lt;br&gt;
        '/books/getById' =&amp;gt; 'BookController@getById',&lt;br&gt;
        '/books/create' =&amp;gt; 'BookController@create',&lt;br&gt;
        '/books/update' =&amp;gt; 'BookController@update',&lt;br&gt;
        '/books/delete' =&amp;gt; 'BookController@delete',&lt;br&gt;
    ];&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public function add($route, $params): void
{
    $this-&amp;gt;routes[$route] = $params;
}


public function dispatch($uri): void
{
    $uri = parse_url(str_replace(BASE_URL, '', $uri), PHP_URL_PATH);


    if (!isset($this-&amp;gt;routes[$uri])) {
        $this-&amp;gt;sendNotFound();
        return;
    }


    [$controller, $method] = explode('@', $this-&amp;gt;routes[$uri]);
    $controller = 'App\\Controllers\\' . $controller;


    if (!class_exists($controller) || !method_exists($controller, $method)) {
        $this-&amp;gt;sendNotFound();
        return;
    }


    (new $controller())-&amp;gt;$method();
}


private function sendNotFound(): void
{
    http_response_code(404);
    echo '404 Not Found';
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;}&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;api/app/core/DatabaseSingleton.php
Creates a single PDO connection to MySQL and reuses it.
&amp;lt;?php&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;namespace App\Core;&lt;/p&gt;

&lt;p&gt;use PDO;&lt;/p&gt;

&lt;p&gt;class DatabaseSingleton&lt;br&gt;
{&lt;br&gt;
    private static ?DatabaseSingleton $instance = null;&lt;br&gt;
    private PDO $connection;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;private function __construct()
{
    $config = json_decode(
        file_get_contents(__DIR__ . '/../../config/dbconf.json'),
        true
    );


    $this-&amp;gt;connection = new PDO(
        "mysql:host={$config['host']};dbname={$config['db_name']}",
        $config['user'],
        $config['password']
    );
}


public static function getInstance(): DatabaseSingleton
{
    if (self::$instance === null) {
        self::$instance = new self();
    }


    return self::$instance;
}


public function getConnection(): PDO
{
    return $this-&amp;gt;connection;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;}&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;api/app/utils/ApiResponse.php
Centralizes the JSON response format.
&amp;lt;?php&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;namespace App\Utils;&lt;/p&gt;

&lt;p&gt;class ApiResponse&lt;br&gt;
{&lt;br&gt;
    private array $response;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public function __construct($status, int $code, string $message, $data = null)
{
    $this-&amp;gt;response = [
        'status' =&amp;gt; $status,
        'code' =&amp;gt; $code,
        'message' =&amp;gt; $message,
        'data' =&amp;gt; $data
    ];
}


public function getCode(): int
{
    return $this-&amp;gt;response['code'];
}


public function toJSON(): string
{
    return json_encode($this-&amp;gt;response);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;}&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;api/app/models/entities/BookEntity.php
Represents a real row from the books table.
&amp;lt;?php&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;namespace App\Models\Entities;&lt;/p&gt;

&lt;p&gt;class BookEntity&lt;br&gt;
{&lt;br&gt;
    public function __construct(&lt;br&gt;
        private $id,&lt;br&gt;
        private $author,&lt;br&gt;
        private $date,&lt;br&gt;
        private $title,&lt;br&gt;
        private $description&lt;br&gt;
    ) {&lt;br&gt;
    }&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public function getId(): mixed
{
    return $this-&amp;gt;id;
}


public function getAuthor(): mixed
{
    return $this-&amp;gt;author;
}


public function getDate(): mixed
{
    return $this-&amp;gt;date;
}


public function getTitle(): mixed
{
    return $this-&amp;gt;title;
}


public function getDescription(): mixed
{
    return $this-&amp;gt;description;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;}&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;api/app/models/DTOs/BookDTO.php
Represents the data returned to the client in JSON.
&amp;lt;?php&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;namespace App\Models\DTOs;&lt;/p&gt;

&lt;p&gt;use JsonSerializable;&lt;/p&gt;

&lt;p&gt;class BookDTO implements JsonSerializable&lt;br&gt;
{&lt;br&gt;
    public function __construct(&lt;br&gt;
        private $author,&lt;br&gt;
        private $date,&lt;br&gt;
        private $title,&lt;br&gt;
        private $description&lt;br&gt;
    ) {&lt;br&gt;
    }&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public function jsonSerialize(): mixed
{
    return get_object_vars($this);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;}&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;api/app/models/DAOs/BookDAO.php
Contains the SQL queries for the books table.
&amp;lt;?php&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;namespace App\Models\DAOs;&lt;/p&gt;

&lt;p&gt;use App\Core\DatabaseSingleton;&lt;br&gt;
use App\Models\Entities\BookEntity;&lt;br&gt;
use PDO;&lt;br&gt;
use PDOException;&lt;/p&gt;

&lt;p&gt;class BookDAO&lt;br&gt;
{&lt;br&gt;
    private PDO $connection;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public function __construct()
{
    $this-&amp;gt;connection = DatabaseSingleton::getInstance()-&amp;gt;getConnection();
}


public function getAll(): array|false
{
    try {
        $stmt = $this-&amp;gt;connection-&amp;gt;query(
            "SELECT id, author, date, title, description FROM books"
        );


        $books = [];


        foreach ($stmt-&amp;gt;fetchAll(PDO::FETCH_ASSOC) as $row) {
            $books[] = $this-&amp;gt;rowToEntity($row);
        }


        return $books;
    } catch (PDOException $e) {
        return false;
    }
}


public function getById($id): BookEntity|false
{
    try {
        $stmt = $this-&amp;gt;connection-&amp;gt;prepare(
            "SELECT id, author, date, title, description FROM books WHERE id = :id"
        );


        $stmt-&amp;gt;execute(['id' =&amp;gt; $id]);
        $row = $stmt-&amp;gt;fetch(PDO::FETCH_ASSOC);


        return $row ? $this-&amp;gt;rowToEntity($row) : false;
    } catch (PDOException $e) {
        return false;
    }
}


public function save(BookEntity $book): bool
{
    try {
        $stmt = $this-&amp;gt;connection-&amp;gt;prepare(
            "INSERT INTO books (author, date, title, description)
            VALUES (:author, :date, :title, :description)"
        );


        return $stmt-&amp;gt;execute($this-&amp;gt;bookParams($book, false));
    } catch (PDOException $e) {
        return false;
    }
}


public function update(BookEntity $book): bool
{
    try {
        $stmt = $this-&amp;gt;connection-&amp;gt;prepare(
            "UPDATE books
            SET author = :author, date = :date, title = :title, description = :description
            WHERE id = :id"
        );


        $stmt-&amp;gt;execute($this-&amp;gt;bookParams($book));


        return $stmt-&amp;gt;rowCount() &amp;gt; 0;
    } catch (PDOException $e) {
        return false;
    }
}


public function delete($id): bool
{
    try {
        $stmt = $this-&amp;gt;connection-&amp;gt;prepare(
            "DELETE FROM books WHERE id = :id"
        );


        $stmt-&amp;gt;execute(['id' =&amp;gt; $id]);


        return $stmt-&amp;gt;rowCount() &amp;gt; 0;
    } catch (PDOException $e) {
        return false;
    }
}


private function rowToEntity(array $row): BookEntity
{
    return new BookEntity(
        $row['id'],
        $row['author'],
        $row['date'],
        $row['title'],
        $row['description']
    );
}


private function bookParams(BookEntity $book, bool $withId = true): array
{
    $params = [
        'author' =&amp;gt; $book-&amp;gt;getAuthor(),
        'date' =&amp;gt; $book-&amp;gt;getDate(),
        'title' =&amp;gt; $book-&amp;gt;getTitle(),
        'description' =&amp;gt; $book-&amp;gt;getDescription()
    ];


    if ($withId) {
        $params['id'] = $book-&amp;gt;getId();
    }


    return $params;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;}&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;api/app/controllers/BookController.php
Receives book requests, calls the DAO and returns JSON.
&amp;lt;?php&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;namespace App\Controllers;&lt;/p&gt;

&lt;p&gt;use App\Models\DAOs\BookDAO;&lt;br&gt;
use App\Models\DTOs\BookDTO;&lt;br&gt;
use App\Models\Entities\BookEntity;&lt;br&gt;
use App\Utils\ApiResponse;&lt;/p&gt;

&lt;p&gt;class BookController&lt;br&gt;
{&lt;br&gt;
    private ?BookDAO $bookDAO = null;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public function index(): void
{
    echo 'Hello from BookController';
}


public function getAll(): void
{
    $books = $this-&amp;gt;dao()-&amp;gt;getAll();


    if ($books === false) {
        $this-&amp;gt;json('not success', 500, 'Error getting data.');
        return;
    }


    $this-&amp;gt;json('success', 200, 'Data obtained successfully.', array_map(
        fn ($book) =&amp;gt; $this-&amp;gt;toDTO($book),
        $books
    ));
}


public function getById(): void
{
    $id = $_GET['id'] ?? null;


    if (!$id) {
        $this-&amp;gt;json('not success', 400, 'Book id is missing.');
        return;
    }


    $book = $this-&amp;gt;dao()-&amp;gt;getById($id);


    if ($book === false) {
        $this-&amp;gt;json('not success', 404, 'Book not found.');
        return;
    }


    $this-&amp;gt;json('success', 200, 'Data obtained successfully.', $this-&amp;gt;toDTO($book));
}


public function create(): void
{
    $book = $this-&amp;gt;dataToEntity($this-&amp;gt;getJsonData());


    if ($this-&amp;gt;dao()-&amp;gt;save($book)) {
        $this-&amp;gt;json('success', 201, 'Data written successfully.', $this-&amp;gt;toDTO($book));
        return;
    }


    $this-&amp;gt;json('not success', 500, 'Error writing data.', $book);
}


public function update(): void
{
    $book = $this-&amp;gt;dataToEntity($this-&amp;gt;getJsonData());


    if ($this-&amp;gt;dao()-&amp;gt;update($book)) {
        $this-&amp;gt;json('success', 200, 'Data updated successfully.', $this-&amp;gt;toDTO($book));
        return;
    }


    $this-&amp;gt;json('not success', 404, 'Error updating data or book not found.', $book);
}


public function delete(): void
{
    $data = $this-&amp;gt;getJsonData();
    $id = $data['id'] ?? $_GET['id'] ?? null;


    if (!$id) {
        $this-&amp;gt;json('not success', 400, 'Book id is missing.');
        return;
    }


    if ($this-&amp;gt;dao()-&amp;gt;delete($id)) {
        $this-&amp;gt;json('success', 200, 'Data deleted successfully.');
        return;
    }


    $this-&amp;gt;json('not success', 404, 'Error deleting data or book not found.');
}


private function getJsonData(): array
{
    return json_decode(file_get_contents('php://input'), true) ?? [];
}


private function dao(): BookDAO
{
    if ($this-&amp;gt;bookDAO === null) {
        $this-&amp;gt;bookDAO = new BookDAO();
    }


    return $this-&amp;gt;bookDAO;
}


private function dataToEntity(array $data): BookEntity
{
    return new BookEntity(
        $data['id'] ?? null,
        $data['author'] ?? '',
        $data['date'] ?? '',
        $data['title'] ?? '',
        $data['description'] ?? ''
    );
}


private function toDTO(BookEntity $book): BookDTO
{
    return new BookDTO(
        $book-&amp;gt;getAuthor(),
        $book-&amp;gt;getDate(),
        $book-&amp;gt;getTitle(),
        $book-&amp;gt;getDescription()
    );
}


private function json($status, int $code, string $message, $data = null): void
{
    $response = new ApiResponse($status, $code, $message, $data);


    header('Content-Type: application/json');
    http_response_code($response-&amp;gt;getCode());
    echo $response-&amp;gt;toJSON();
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;}&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create the database
Database:
CREATE DATABASE books_db;
USE books_db;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Table:&lt;br&gt;
CREATE TABLE books (&lt;br&gt;
    id INT AUTO_INCREMENT PRIMARY KEY,&lt;br&gt;
    author VARCHAR(255) NOT NULL,&lt;br&gt;
    date DATE NOT NULL,&lt;br&gt;
    title VARCHAR(255) NOT NULL,&lt;br&gt;
    description TEXT NOT NULL&lt;br&gt;
);&lt;/p&gt;

&lt;p&gt;Example insert:&lt;br&gt;
INSERT INTO books (author, date, title, description)&lt;br&gt;
VALUES&lt;br&gt;
('J. R. R. Tolkien', '1954-07-29', 'The Fellowship of the Ring', 'First book of The Lord of the Rings.'),&lt;br&gt;
('George Orwell', '1949-06-08', '1984', 'Dystopian novel about surveillance and totalitarianism.');&lt;/p&gt;

&lt;p&gt;&lt;a href="http://localhost/Native/public/books/create" rel="noopener noreferrer"&gt;http://localhost/Native/public/books/create&lt;/a&gt;&lt;/p&gt;

</description>
      <category>api</category>
      <category>backend</category>
      <category>php</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>React Introduction</title>
      <dc:creator>von CARAMEL</dc:creator>
      <pubDate>Tue, 02 Jun 2026 13:15:24 +0000</pubDate>
      <link>https://dev.to/von_caramel/react-introduction-2c26</link>
      <guid>https://dev.to/von_caramel/react-introduction-2c26</guid>
      <description>&lt;p&gt;Creating a Component&lt;br&gt;
function Greeting() {&lt;br&gt;
  return &lt;/p&gt;
&lt;h1&gt;Hello World&lt;/h1&gt;;&lt;br&gt;
}

&lt;p&gt;export default Greeting;&lt;br&gt;
Using a Component&lt;br&gt;
import Greeting from './Greeting';&lt;/p&gt;

&lt;p&gt;function App() {&lt;br&gt;
  return (&lt;br&gt;
    &lt;/p&gt;
&lt;br&gt;
      &lt;br&gt;
    &lt;br&gt;
  );&lt;br&gt;
}

&lt;p&gt;export default App;&lt;br&gt;
Props&lt;/p&gt;

&lt;p&gt;Props allow you to pass data from one component to another.&lt;/p&gt;

&lt;p&gt;function Greeting(props) {&lt;br&gt;
  return &lt;/p&gt;
&lt;h1&gt;Hello {props.name}&lt;/h1&gt;;&lt;br&gt;
}

&lt;p&gt;Usage:&lt;/p&gt;



&lt;p&gt;Output:&lt;/p&gt;

&lt;p&gt;Hello John&lt;br&gt;
useState&lt;/p&gt;

&lt;p&gt;useState lets you store and update data inside a component.&lt;/p&gt;

&lt;p&gt;import { useState } from 'react';&lt;/p&gt;

&lt;p&gt;function Counter() {&lt;/p&gt;

&lt;p&gt;const [count, setCount] = useState(0);&lt;/p&gt;

&lt;p&gt;return (&lt;br&gt;
    &amp;lt;&amp;gt;&lt;br&gt;
      &lt;/p&gt;
&lt;p&gt;{count}&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  &amp;lt;button
    onClick={() =&amp;gt; setCount(count + 1)}
  &amp;gt;
    +
  &amp;lt;/button&amp;gt;
&amp;lt;/&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;);&lt;br&gt;
}&lt;br&gt;
useEffect&lt;/p&gt;

&lt;p&gt;useEffect runs code when the component loads or when dependencies change.&lt;/p&gt;

&lt;p&gt;import { useEffect } from 'react';&lt;/p&gt;

&lt;p&gt;useEffect(() =&amp;gt; {&lt;br&gt;
  console.log("Component loaded");&lt;br&gt;
}, []);&lt;/p&gt;

&lt;p&gt;The empty array:&lt;/p&gt;

&lt;p&gt;[]&lt;/p&gt;

&lt;p&gt;means:&lt;/p&gt;

&lt;p&gt;Run only once when the component is mounted.&lt;/p&gt;

&lt;p&gt;Conditional Rendering&lt;br&gt;
function User({ loggedIn }) {&lt;/p&gt;


&lt;p&gt;return (&lt;br&gt;&lt;br&gt;
    &amp;lt;&amp;gt;&lt;br&gt;&lt;br&gt;
      {loggedIn&lt;br&gt;&lt;br&gt;
        ? &lt;/p&gt;
&lt;h1&gt;Welcome&lt;/h1&gt;
&lt;br&gt;&lt;br&gt;
        : &lt;h1&gt;Please log in&lt;/h1&gt;
&lt;br&gt;&lt;br&gt;
      }&lt;br&gt;&lt;br&gt;
    &amp;lt;/&amp;gt;&lt;br&gt;&lt;br&gt;
  );&lt;br&gt;&lt;br&gt;
}&lt;br&gt;&lt;br&gt;
Rendering Lists&lt;br&gt;&lt;br&gt;
const users = [&lt;br&gt;&lt;br&gt;
  "Alice",&lt;br&gt;&lt;br&gt;
  "Bob",&lt;br&gt;&lt;br&gt;
  "John"&lt;br&gt;&lt;br&gt;
];


&lt;p&gt;return (&lt;br&gt;&lt;br&gt;
  &lt;/p&gt;
&lt;ul&gt;


    {users.map((user, index) =&amp;gt; (
      &lt;li&gt;{user}&lt;/li&gt;


    ))}
  &lt;/ul&gt;
&lt;br&gt;&lt;br&gt;
);

</description>
    </item>
    <item>
      <title>React Basics: Everything You Need to Get Started</title>
      <dc:creator>von CARAMEL</dc:creator>
      <pubDate>Tue, 02 Jun 2026 13:14:47 +0000</pubDate>
      <link>https://dev.to/von_caramel/react-basics-everything-you-need-to-get-started-4c5p</link>
      <guid>https://dev.to/von_caramel/react-basics-everything-you-need-to-get-started-4c5p</guid>
      <description>&lt;p&gt;Creating a Component&lt;br&gt;
function Greeting() {&lt;br&gt;
  return &lt;/p&gt;
&lt;h1&gt;Hello World&lt;/h1&gt;;&lt;br&gt;
}

&lt;p&gt;export default Greeting;&lt;br&gt;
Using a Component&lt;br&gt;
import Greeting from './Greeting';&lt;/p&gt;

&lt;p&gt;function App() {&lt;br&gt;
  return (&lt;br&gt;
    &lt;/p&gt;
&lt;br&gt;
      &lt;br&gt;
    &lt;br&gt;
  );&lt;br&gt;
}

&lt;p&gt;export default App;&lt;br&gt;
Props&lt;/p&gt;

&lt;p&gt;Props allow you to pass data from one component to another.&lt;/p&gt;

&lt;p&gt;function Greeting(props) {&lt;br&gt;
  return &lt;/p&gt;
&lt;h1&gt;Hello {props.name}&lt;/h1&gt;;&lt;br&gt;
}

&lt;p&gt;Usage:&lt;/p&gt;



&lt;p&gt;Output:&lt;/p&gt;

&lt;p&gt;Hello John&lt;br&gt;
useState&lt;/p&gt;

&lt;p&gt;useState lets you store and update data inside a component.&lt;/p&gt;

&lt;p&gt;import { useState } from 'react';&lt;/p&gt;

&lt;p&gt;function Counter() {&lt;/p&gt;

&lt;p&gt;const [count, setCount] = useState(0);&lt;/p&gt;

&lt;p&gt;return (&lt;br&gt;
    &amp;lt;&amp;gt;&lt;br&gt;
      &lt;/p&gt;
&lt;p&gt;{count}&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  &amp;lt;button
    onClick={() =&amp;gt; setCount(count + 1)}
  &amp;gt;
    +
  &amp;lt;/button&amp;gt;
&amp;lt;/&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;);&lt;br&gt;
}&lt;br&gt;
useEffect&lt;/p&gt;

&lt;p&gt;useEffect runs code when the component loads or when dependencies change.&lt;/p&gt;

&lt;p&gt;import { useEffect } from 'react';&lt;/p&gt;

&lt;p&gt;useEffect(() =&amp;gt; {&lt;br&gt;
  console.log("Component loaded");&lt;br&gt;
}, []);&lt;/p&gt;

&lt;p&gt;The empty array:&lt;/p&gt;

&lt;p&gt;[]&lt;/p&gt;

&lt;p&gt;means:&lt;/p&gt;

&lt;p&gt;Run only once when the component is mounted.&lt;/p&gt;

&lt;p&gt;Conditional Rendering&lt;br&gt;
function User({ loggedIn }) {&lt;/p&gt;


&lt;p&gt;return (&lt;br&gt;&lt;br&gt;
    &amp;lt;&amp;gt;&lt;br&gt;&lt;br&gt;
      {loggedIn&lt;br&gt;&lt;br&gt;
        ? &lt;/p&gt;
&lt;h1&gt;Welcome&lt;/h1&gt;
&lt;br&gt;&lt;br&gt;
        : &lt;h1&gt;Please log in&lt;/h1&gt;
&lt;br&gt;&lt;br&gt;
      }&lt;br&gt;&lt;br&gt;
    &amp;lt;/&amp;gt;&lt;br&gt;&lt;br&gt;
  );&lt;br&gt;&lt;br&gt;
}&lt;br&gt;&lt;br&gt;
Rendering Lists&lt;br&gt;&lt;br&gt;
const users = [&lt;br&gt;&lt;br&gt;
  "Alice",&lt;br&gt;&lt;br&gt;
  "Bob",&lt;br&gt;&lt;br&gt;
  "John"&lt;br&gt;&lt;br&gt;
];


&lt;p&gt;return (&lt;br&gt;&lt;br&gt;
  &lt;/p&gt;
&lt;ul&gt;


    {users.map((user, index) =&amp;gt; (
      &lt;li&gt;{user}&lt;/li&gt;


    ))}
  &lt;/ul&gt;
&lt;br&gt;&lt;br&gt;
);

</description>
    </item>
  </channel>
</rss>
