ReactJS

React JS

Instalacion

Hay que tener instalado node previamente Para instalar ReactJS en Linux, sigue estos pasos:

1. Instala Node.js y npm]

   • Acceder al servidor como usuario sudo
   • Ejecuta el comando sudo apt install npm para instalar npm o zypper install npm
   • Verifica la versión de npm con npm --version y la de Node.js con node --version
   • Actualiza npm a la última versión con sudo npm install npm@latest -g

2. Instalar la herramienta Create React App

   • Create React App configura todas las herramientas necesarias para iniciar un proyecto React
   • Se instala con el comando sudo npm install -g create-react-app ( -g instala de forma global)
   • Verificar la versión instalada con create-react-app --version

3. **Crea una nueva aplicación React

   • Ejecuta create-react-app myProyect para generar un nuevo proyecto con npx create-react-app myProyect
   • Entra al directorio del proyecto con cd myProyect

Nota: npx es el ejecutor de paquete, asi como npm es el instalador de paquetes En el directorio de src para poder renderizarlo tendremos.

App.css App.js App.test.js index.css index.js logo.svg reportWebVitals.js setupTests.js

Donde index.js:

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();

• Iniciar el servidor de desarrollo con npm start
• La aplicación estará disponible en http://localhost:3000

4. **Configura Nginx si no se tiene instalada apache para la aplicación React

   • Instala Nginx con sudo apt install nginx o zypper install nginx
   • Crea un archivo de configuración de Nginx para la aplicación React
   • Reinicia Nginx con sudo systemctl restart nginx

5. Construye la aplicación para producción[4][5]

   • Ejecuta npm run build para generar los archivos optimizados para producción
   • Copia los archivos generados al directorio de Nginx con sudo cp -r build/* /var/www/html/react
   • Accede a la aplicación desde tu dominio, por ejemplo https://miapp.com

Estructura de React

App.js y publicc/index.html donde id sera root

Componentes y Propiedades

JSX:

<myComponent
    prop="Mi Valor"
/>

Nota: Las propiedades serian como los parametros de una funcion --> Component:

function myComponent {prop } ) {
   return <span>{prop}</span>;
}

--> Output

Mi valor

Es recomensable cambiar la extension del App.js a App.jsx

Eliminaremos todo lo contenido del Archivo App.js: Y dejamos

import logp from './logo.svg';
import ./App,css';

function App() {
return();
}
export default App;

Creamos una carpeta en srv llamada components y el archivo Article.jsx

const Article => () => { } export default Article

e introducimos nuestro codigo // Introducimos nuestro codigo entre los {}:

para luego crear un import en Appj.sx...

import Article from './components/Article'

Y en la Funcion App() en el return()....

const Article = () => {

return(
    <article id="post1" class="flex-item">
        <h2>Post 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at massa et est vulputate sollicitudin vitae at libero. Pellentesque iaculis neque diam, vulputate tempor est ullamcorper quis.
        <button>Me gusta</button>
    </article>
)
}
export default Article

const Article = ({id, article, content}) => 

<article id={id} className="flex-item">
<h2>{title}</h2>
<p>{content}<p>

<>
<Article />:
</>

.liked {
    background-color: blue;
    color: white;
}

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());

function handleClick() {
  setName('Taylor');
  setAge(a => a + 1);

const [isLiked, setIsLiked] = useState(false) // Que no se le ha dado Liked

<button classname={ isLiked ? 'liked': ''} onClick={handleLikeButtonClick}>Me gusta </button>

const handleLikeButtonClick = ()  => {
setIsLiked(!isLiked)
}