Te pasaré los archivos de mi sitio web con react por partes, no opines, solo afirma que lo recibiste:
Part 1
## File: api/autenticar.php
```php
<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');

require 'conexion.php';

$data = json_decode(file_get_contents('php://input'), true);

$nombre_usuario = trim($data['nombre_usuario']);
$contrasena = $data['contrasena'];

// Consulta preparada para obtener el usuario
$stmt = $conn->prepare("SELECT id, nombre_usuario, contrasena, email FROM usuarios WHERE nombre_usuario = ? OR email = ?");
$stmt->bind_param("ss", $nombre_usuario, $nombre_usuario);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
    $usuario = $result->fetch_assoc();
    if (password_verify($contrasena, $usuario['contrasena'])) {
        // Contraseña correcta
        echo json_encode([
            'success' => true,
            'usuario' => [
                'id' => $usuario['id'],
                'nombre_usuario' => $usuario['nombre_usuario'],
                'email' => $usuario['email'],
            ]
        ]);
    } else {
        echo json_encode(['success' => false, 'message' => 'Contraseña incorrecta.']);
    }
} else {
    echo json_encode(['success' => false, 'message' => 'Usuario no encontrado.']);
}

$stmt->close();
$conn->close();
?>
```

## File: api/conexion.php
```php
<?php
// Datos de conexión a la base de datos
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "tus_noticias";

// Crear conexión
$conn = new mysqli($servername, $username, $password, $dbname);

// Establecer el conjunto de caracteres a UTF-8
$conn->set_charset("utf8");

// Verificar la conexión
if ($conn->connect_error) {
    die("Conexión fallida: " . $conn->connect_error);
}
?>
```

## File: api/obtener_articulos.php
```php
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

require 'conexion.php';

$sql = "SELECT id, titulo, contenido FROM articulos ORDER BY fecha_publicacion DESC";
$result = $conn->query($sql);

$articulos = array();

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $articulos[] = $row;
    }
}

echo json_encode($articulos);
?>
```

## File: api/procesar_comentario.php
```php
<?php
session_start();
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); // Habilitar CORS (ajustar en producción)

require 'conexion.php';

if (!isset($_SESSION['usuario_id'])) {
    echo json_encode(['success' => false, 'message' => 'Usuario no autenticado.']);
    exit();
}

require 'conexion.php';

// Obtener datos del formulario
$articulo_id = isset($_POST['articulo_id']) ? intval($_POST['articulo_id']) : 0;
$usuario_id = $_SESSION['usuario_id'];
$comentario = isset($_POST['comentario']) ? trim($_POST['comentario']) : '';
$parent_comment_id = isset($_POST['parent_comment_id']) ? intval($_POST['parent_comment_id']) : null;

if ($articulo_id <= 0 || $comentario === '') {
    echo json_encode(['success' => false, 'message' => 'Datos inválidos.']);
    exit();
}

// Validar el parent_comment_id
if ($parent_comment_id !== null) {
    // Verificar si el comentario padre existe y pertenece al mismo artículo
    $stmt = $conn->prepare("SELECT id FROM comentarios WHERE id = ? AND articulo_id = ?");
    $stmt->bind_param("ii", $parent_comment_id, $articulo_id);
    $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows == 0) {
        echo json_encode(['success' => false, 'message' => 'El comentario al que intentas responder no existe.']);
        exit();
    }
    $stmt->close();
}

// Sanitizar el comentario para evitar ataques XSS
$comentario = htmlspecialchars($comentario, ENT_QUOTES, 'UTF-8');

// Insertar el comentario en la base de datos
$stmt = $conn->prepare("INSERT INTO comentarios (articulo_id, usuario_id, contenido, parent_comment_id) VALUES (?, ?, ?, ?)");
$stmt->bind_param("iisi", $articulo_id, $usuario_id, $comentario, $parent_comment_id);

if ($stmt->execute()) {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false, 'message' => 'Error al guardar el comentario: ' . $stmt->error]);
}

$stmt->close();
$conn->close();
?>
```

## File: api/procesar_like.php
```php
<?php
session_start();
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); // Habilitar CORS (ajustar en producción)

require 'conexion.php';
// Verificar si el usuario ha iniciado sesión
if (!isset($_SESSION['usuario_id'])) {
    echo json_encode(['success' => false, 'message' => 'Usuario no autenticado']);
    exit();
}

// Incluir la conexión a la base de datos
require 'conexion.php';

$articulo_id = intval($_POST['articulo_id']);
$usuario_id = $_SESSION['usuario_id'];

// Verificar si el usuario ya dio "Me Gusta" al artículo
$stmt = $conn->prepare("SELECT id FROM likes WHERE articulo_id = ? AND usuario_id = ?");
$stmt->bind_param("ii", $articulo_id, $usuario_id);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
    // Si ya dio "Me Gusta", eliminar el registro (quitar el "Me Gusta")
    $stmt = $conn->prepare("DELETE FROM likes WHERE articulo_id = ? AND usuario_id = ?");
    $stmt->bind_param("ii", $articulo_id, $usuario_id);
    $stmt->execute();
    $liked = false;
} else {
    // Si no ha dado "Me Gusta", insertarlo
    $stmt = $conn->prepare("INSERT INTO likes (articulo_id, usuario_id) VALUES (?, ?)");
    $stmt->bind_param("ii", $articulo_id, $usuario_id);
    $stmt->execute();
    $liked = true;
}

$stmt->close();
$conn->close();

echo json_encode(['success' => true, 'liked' => $liked]);
?>
```

## File: api/procesar_registro.php
```php
<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');

require 'conexion.php';

$data = json_decode(file_get_contents('php://input'), true);

$nombre_usuario = trim($data['nombre_usuario']);
$email = trim($data['email']);
$contrasena = $data['contrasena'];
$confirmar_contrasena = $data['confirmar_contrasena'];

if ($contrasena !== $confirmar_contrasena) {
    echo json_encode(['success' => false, 'message' => 'Las contraseñas no coinciden.']);
    exit();
}

$stmt = $conn->prepare("SELECT id FROM usuarios WHERE nombre_usuario = ? OR email = ?");
$stmt->bind_param("ss", $nombre_usuario, $email);
$stmt->execute();
$stmt->store_result();

if ($stmt->num_rows > 0) {
    echo json_encode(['success' => false, 'message' => 'El nombre de usuario o correo electrónico ya están registrados.']);
    $stmt->close();
    exit();
}
$stmt->close();

$contrasena_hasheada = password_hash($contrasena, PASSWORD_DEFAULT);

$stmt = $conn->prepare("INSERT INTO usuarios (nombre_usuario, email, contrasena) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $nombre_usuario, $email, $contrasena_hasheada);

if ($stmt->execute()) {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false, 'message' => 'Error al registrar el usuario.']);
}

$stmt->close();
$conn->close();
?>
```

## File: api/prueba.php
```php
<?php
echo 'Hola, este es un archivo de prueba.';
?>
```

## File: api/verificar_like.php
```php
<?php
session_start();
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); // Habilitar CORS (ajustar en producción)

require 'conexion.php';

// Verificar si el usuario ha iniciado sesión
if (!isset($_SESSION['usuario_id'])) {
    echo json_encode(['success' => false, 'message' => 'Usuario no autenticado']);
    exit();
}

// Incluir la conexión a la base de datos
require 'conexion.php';

$articulo_id = intval($_GET['articulo_id']);
$usuario_id = $_SESSION['usuario_id'];

// Verificar si el usuario ya dio "Me Gusta" al artículo
$stmt = $conn->prepare("SELECT id FROM likes WHERE articulo_id = ? AND usuario_id = ?");
$stmt->bind_param("ii", $articulo_id, $usuario_id);
$stmt->execute();
$result = $stmt->get_result();

$liked = ($result->num_rows > 0);

$stmt->close();
$conn->close();

echo json_encode(['success' => true, 'liked' => $liked]);
?>
```

## File: frontend/react-app/public/index.html
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- public/index.html -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

```

## File: frontend/react-app/src/components/Comentarios.js
```javascript
// src/components/Comentarios.js
import React, { useEffect, useState, useContext } from 'react';
import axios from 'axios';
import { AuthContext } from '../context/AuthContext';
import { Textarea, Button } from 'flowbite-react';

function Comentarios({ articuloId }) {
  const [comentarios, setComentarios] = useState([]);
  const [nuevoComentario, setNuevoComentario] = useState('');
  const { authData } = useContext(AuthContext);

  useEffect(() => {
    axios
      .get(`/obtener_comentarios.php?articulo_id=${articuloId}`)
      .then(response => {
        setComentarios(response.data);
      })
      .catch(error => {
        console.error('Error al obtener comentarios:', error);
      });
  }, [articuloId]);

  const handleSubmit = e => {
    e.preventDefault();
    if (!authData) {
      alert('Debes iniciar sesión para comentar.');
      return;
    }
    axios
      .post(
        '/procesar_comentario.php',
        {
          articulo_id: articuloId,
          comentario: nuevoComentario,
        },
        { withCredentials: true }
      )
      .then(response => {
        if (response.data.success) {
          setComentarios([...comentarios, response.data.comentario]);
          setNuevoComentario('');
        } else {
          alert(response.data.message);
        }
      })
      .catch(error => {
        console.error('Error al enviar el comentario:', error);
      });
  };

  return (
    <div className="mt-10">
      <h2 className="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-100">
        Comentarios
      </h2>

      {comentarios.length > 0 ? (
        <div className="space-y-6">
          {comentarios.map(comentario => (
            <div key={comentario.id} className="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
              <p className="text-sm text-gray-600 dark:text-gray-400">
                <span className="font-semibold">{comentario.nombre_usuario}</span> - {comentario.fecha}
              </p>
              <p className="mt-2 text-gray-800 dark:text-gray-200">
                {comentario.contenido}
              </p>
            </div>
          ))}
        </div>
      ) : (
        <p className="text-gray-600 dark:text-gray-400">No hay comentarios aún. ¡Sé el primero en comentar!</p>
      )}

      {authData ? (
        <form onSubmit={handleSubmit} className="mt-8">
          <Textarea
            value={nuevoComentario}
            onChange={e => setNuevoComentario(e.target.value)}
            placeholder="Escribe tu comentario..."
            required
            rows={4}
            className="mb-4"
          />
          <Button type="submit">Enviar</Button>
        </form>
      ) : (
        <p className="mt-6 text-gray-600 dark:text-gray-400">
          <a href="/login" className="text-blue-500 hover:underline">
            Inicia sesión
          </a>{' '}
          para comentar.
        </p>
      )}
    </div>
  );
}

export default Comentarios;
```

## File: frontend/react-app/src/components/DarkModeToggle.js
```javascript
// src/components/DarkModeToggle.js
import React, { useEffect, useState } from 'react';
import { MdDarkMode, MdLightMode } from 'react-icons/md';

export function DarkModeToggle() {
  const [darkMode, setDarkMode] = useState(
    () => localStorage.getItem('theme') === 'dark'
  );

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    }
  }, [darkMode]);

  return (
    <button
      onClick={() => setDarkMode(!darkMode)}
      className="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 p-2 rounded-lg"
      aria-label="Toggle Dark Mode"
    >
      {darkMode ? (
        <MdLightMode size={24} />
      ) : (
        <MdDarkMode size={24} />
      )}
    </button>
  );
}
```

## File: frontend/react-app/src/components/LikeButton.js
```javascript
// src/components/LikeButton.js
import React, { useState, useEffect, useContext } from 'react';
import axios from 'axios';
import { AuthContext } from '../context/AuthContext';
import { FiHeart } from 'react-icons/fi';
import { Button } from 'flowbite-react';

function LikeButton({ articuloId }) {
  const { authData } = useContext(AuthContext);
  const [liked, setLiked] = useState(false);
  const [totalLikes, setTotalLikes] = useState(0);

  useEffect(() => {
    // Verificar si el usuario ha dado "Me Gusta"
    axios
      .get(`/verificar_like.php?articulo_id=${articuloId}`, { withCredentials: true })
      .then(response => {
        if (response.data.success) {
          setLiked(response.data.liked);
        }
      })
      .catch(error => {
        console.error('Error al verificar el like:', error);
      });

    // Obtener el total de likes
    axios
      .get(`/obtener_total_likes.php?articulo_id=${articuloId}`)
      .then(response => {
        setTotalLikes(response.data.totalLikes);
      })
      .catch(error => {
        console.error('Error al obtener el total de likes:', error);
      });
  }, [articuloId]);

  const handleLike = () => {
    if (!authData) {
      alert('Debes iniciar sesión para dar "Me Gusta".');
      return;
    }
    axios
      .post(
        '/procesar_like.php',
        { articulo_id: articuloId },
        { withCredentials: true }
      )
      .then(response => {
        if (response.data.success) {
          setLiked(response.data.liked);
          setTotalLikes(prev => (response.data.liked ? prev + 1 : prev - 1));
        } else {
          alert(response.data.message);
        }
      })
      .catch(error => {
        console.error('Error al procesar el like:', error);
      });
  };

  return (
    <div className="flex items-center mt-6">
      <Button onClick={handleLike} color={liked ? 'pink' : 'gray'} className="flex items-center">
        <FiHeart className="mr-2" />
        {liked ? 'Te Gusta' : 'Me Gusta'}
      </Button>
      <span className="ml-4 text-gray-600 dark:text-gray-400">
        {totalLikes} {totalLikes === 1 ? 'Me Gusta' : 'Me Gustas'}
      </span>
    </div>
  );
}

export default LikeButton;
```

## File: frontend/react-app/src/components/Navbar.js
```javascript
// src/components/Navbar.js
import React, { useContext } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { Link as ScrollLink } from 'react-scroll';
import { Navbar, Dropdown } from 'flowbite-react';
import { AuthContext } from '../context/AuthContext';
import { DarkModeToggle } from './DarkModeToggle'; // Importa el componente del botón de modo oscuro

function NavigationBar() {
  const { authData } = useContext(AuthContext);

  return (
    <Navbar fluid={true} rounded={true} className="bg-white dark:bg-gray-800 fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600">
      <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto px-4">
      <Navbar.Brand as={RouterLink} to="/" className="flex items-center pl-2 md:pl-4">
      <img
        src="/logo.svg"
        className="mr-3 h-6 sm:h-9"
        alt="Logo"
      />
      <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
        Yisus Price
      </span>
    </Navbar.Brand>
        <div className="flex md:order-2 items-center">
          {/* Botón de modo oscuro */}
          <DarkModeToggle />
          <Navbar.Toggle />
        </div>
        <Navbar.Collapse>
          <Navbar.Link as={RouterLink} to="/" active={window.location.pathname === '/'}>
            Inicio
          </Navbar.Link>
          <Navbar.Link as={RouterLink} to="/noticias" active={window.location.pathname === '/noticias'}>
            Noticias
          </Navbar.Link>
          <Navbar.Link>
            <ScrollLink
              to="youtube"
              smooth={true}
              duration={500}
              offset={-80}
              className="cursor-pointer"
              activeClass="text-blue-500"
            >
              YouTube
            </ScrollLink>
          </Navbar.Link>
          <Navbar.Link>
            <ScrollLink
              to="videos"
              smooth={true}
              duration={500}
              offset={-80}
              className="cursor-pointer"
              activeClass="text-blue-500"
            >
              Videos
            </ScrollLink>
          </Navbar.Link>
          <Navbar.Link>
            <ScrollLink
              to="sobre-mi"
              smooth={true}
              duration={500}
              offset={-80}
              className="cursor-pointer"
              activeClass="text-blue-500"
            >
              Sobre Mí
            </ScrollLink>
          </Navbar.Link>
          <Navbar.Link>
            <ScrollLink
              to="contacto"
              smooth={true}
              duration={500}
              offset={-80}
              className="cursor-pointer"
              activeClass="text-blue-500"
            >
              Contacto
            </ScrollLink>
          </Navbar.Link>
          {/* Opciones de autenticación */}
          {authData ? (
            <Navbar.Link as={RouterLink} to="/perfil">
              Perfil
            </Navbar.Link>
          ) : (
            <Navbar.Link as={RouterLink} to="/login">
              Iniciar Sesión
            </Navbar.Link>
          )}
        </Navbar.Collapse>
      </div>
    </Navbar>
  );
}

export default NavigationBar; 
```

## File: frontend/react-app/src/components/VideoCarousel.js
```javascript
// src/components/VideoCarousel.js
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

function VideoCarousel() {
  const videos = [
    {
      url: 'https://www.youtube.com/embed/ID_DE_VIDEO_1',
      titulo: 'Video 1',
    },
    {
      url: 'https://www.youtube.com/embed/ID_DE_VIDEO_2',
      titulo: 'Video 2',
    },
    {
      url: 'https://www.youtube.com/embed/ID_DE_VIDEO_3',
      titulo: 'Video 3',
    },
    // Agrega más videos si lo deseas
  ];

  return (
    <Swiper
      spaceBetween={20}
      slidesPerView={1}
      breakpoints={{
        640: { slidesPerView: 1 },
        768: { slidesPerView: 2 },
        1024: { slidesPerView: 3 },
      }}
    >
      {videos.map((video, index) => (
        <SwiperSlide key={index}>
          <div className="relative pb-56.25"> {/* 16:9 Aspect Ratio */}
            <iframe
              src={video.url}
              title={video.titulo}
              frameBorder="0"
              allowFullScreen
              className="absolute top-0 left-0 w-full h-full"
            ></iframe>
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
}

export default VideoCarousel;
```

## File: frontend/react-app/src/context/AuthContext.js
```javascript
// src/context/AuthContext.js
import React, { createContext, useState } from 'react';

export const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [authData, setAuthData] = useState(
    JSON.parse(localStorage.getItem('authData')) || null
  );

  const login = (data) => {
    setAuthData(data);
    localStorage.setItem('authData', JSON.stringify(data));
  };

  const logout = () => {
    setAuthData(null);
    localStorage.removeItem('authData');
  };

  return (
    <AuthContext.Provider value={{ authData, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}
```