Transformando HTML y CSS en componentes de React

Ya lo había dejado antes pero aquí les dejo de nuevo esta increíble extensión para convertir HTML a JSX
Resultado:

Para reemplazar todos los class tambien pueden hacer ctrl + f y escribir class en el find y className en repleace, luego apretan la opcion en rojo y listo!

Que genial lo de presionar “.” en github. No lo sabía!

escribiendo rafce con la extesion indicada te crea todo el codigo mecesario a mi me aparece asi:

<code> import React from 'react'

const Login = () => {
    return (
        <div>
            
        </div>
    )
}

export default Login
</code>

Para los que presionan “.” en Github y no les abre, deben estar logeados para que se active la herramienta de VSC

slr [Stateless Component Return]
me funciono instalando con este plugin
https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux

Componentes y Contenedores

1. Inspeccionemos el proyecto anterior. En este caso, se nos facilitará transformar el proyecto del curso práctico de frontend a react pues en cada archivo html tenemos una sección
2. Abrimos el archivo de la clase1.html y copiamos el html principal.
3. Estructuremos nuestro proyecto en react. Para ello, creamos una carpeta llamada containers (dentro de src), dónde tendremos estos mismos módulos de cada archivo html, pero transformado en react. Seamos precavidos en cerrar todas las etiquetas html pues nos pueden dar error.

Diferenciemos componente de “contenedor” en react. Los contenedores o módulos son partes más grandes. En este caso puede ser todo el login. Sin embargo, un componente puede ser un input o un form. Los componentes deben mantenerse pequeños y responder a uno sola necesidad, si no, perdemos funcionalidad.

1. Código en React

import React from 'react';

const Login = () => {
    return (
        <div className="login">
            <div className="form-container">
                <img src="./logos/logo_yard_sale.svg" alt="logo" className="logo" />

                <h1 className="title">Create a new password</h1>
                <p className="subtitle">Enter a new passwrd for yue account</p>

                <form action="/" classNameName="form">
                    <label for="password" classNameName="label">Password</label>
                    <input type="password" id="password" placeholder="*********" classNameName="input input-password" />

                    <label for="new-password" className="label">Password</label>
                    <input type="password" id="new-password" placeholder="*********" className="input input-password" />

                    <input type="submit" value="Confirm" className="primary-button login-button" />
                </form>
            </div>
        </div>
    );
}

export default Login;

Advertencia => la explicación puede contener errores, pues estaba viendo que los contenedores son más complejos.

En el formulario deben también cambiar el atributo ‘for’ por ‘htmlFor’ para que no tengan errores con el DOM y desaparecer así los warnings en la consola.

Les comparto mi código:

import React from "react";
import "../styles/Login.scss";

const Login = () => {
  return (
    <div className="login">
      <div className="form-container">
        <img src="./logos/logo_yard_sale.svg" alt="logo" className="logo" />
        <h1 className="title">Create a new password</h1>
        <p className="subtitle">Enter a new passwrd htmlFor yue account</p>
        <form action="/" className="form" />
        <label htmlFor="password" className="label">
          Password
        </label>
        <input
          type="password"
          id="password"
          placeholder="*********"
          className="input input-password"
        />
        <label htmlFor="new-password" className="label">
          Password
        </label>
        <input
          type="password"
          id="new-password"
          placeholder="*********"
          className="input input-password"
        />
        <input
          type="submit"
          value="Confirm"
          className="primary-button login-button"
        />
        <form />
      </div>
    </div>
  );
};

export default Login;

Personalmente me tarder mas en arreglar la estructura de las clases de css de todo el proyecto que en terminar este curso 😖…

En la parte de rules, donde llamamos el test de js y jsx, agregas la parte de presets y así no tienes que agregar el import react from react en todos los archivos de este tipo (js y jsx)

{
	test: /\.(js|jsx)$/,
	exclude: /node_modules/,
	use: {
		loader: 'babel-loader',
		options: {
			presets: [
				'@babel/preset-env',
				[
					'@babel/preset-react',
					{
						runtime: 'automatic',
					}
				],
			]
		}
	}
},

Con el profe Oscar siempre trabajamos con muchas particularidades

Para los que no cuentan con el codigo del curso practico de frontend developer les dejo el link del repo en git. enlace al repositorio

Yo coloco " rafce" y me construye el componente completo

import React from ‘react’

const login = () => {
return (
<div>

    </div>
)

}

export default login

Vamos a empezar a pasar un proyecto de html y css a React
https://github.com/platzi/curso-frontend-developer-practico

creamos una carpeta containers para agregar nuestro componentes

Truco para tener en cuenta. En la pagina de github cuando vas a un proyecto en cualquier parte de la pantall puedes apretar la tecla “.” y se abrirá un editor online de visual estudio

algunos plugin utiles para React
slr [Stateless Component Return]
https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux

Recordemos que “class” es una palabra reservada en js por lo tanto tenemos que reemplazarla por “className” en el codigo de React con un atajo (ctrl+D) podemos seleccionar todas nuestras “class”. Por utimo tenemos q cerrar todas nuestras etiquetas debido a que en React se usa de esa manera.

Tambien podemos reemplazar el codigo de nuestro html y pasarlo directamente a jsx con click derecho y seleccionar la opcion correspondiente. Lo unico que tenemos que tener instalado es este plugin:
https://marketplace.visualstudio.com/items?itemName=riazxrazor.html-to-jsx

El componente y el import se pueden generar facilmente con el shortcut “rafce” usando esta extensión que es la más popular actualmente en VSCODE

El truco de “.” no me lo sabía 🤯🤯🤯

JSX tiene un par de reglas mas, que corregirlas manualmente puede ser un poquito ineficiente.
Si no quieren instalar ninguna extension, pueden simplemente buscar en Google un compilador online de HTML a JSX, hay varios la verdad, usen el que mas les guste.
.
En mi caso encontré este.

Esas mismas extensiones de VSCode tiene varios shortcuts bastantes útiles (para cuando estés trabajando) como lo son:
rafc = crea un component tipo flecha
rafcp = crea un componente tipo flecha con proptyes
rcc = crea un componente tipo clase
rccp = lo mismo pero con proptypes
rafcr = crea un componente conectado con redux
y asi sucesivamente…

Les dejo el Link de la extension para instalar en Visual Studio Code EQuimper.

https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux

saludos
DaltonCode

Otro shorcut de vscode para seleccionar todas las concidencias (en lugar de darle Ctrl + D por cada una) es Ctrl + Shift + L

Creo que fue muy bueno saber de donde viene todo en create-react-app, creo que era la idea con el curso hasta la clase previa, webpack me parece complejo, no lo he usado mucho y creo que va a seguir asi

Yo cuando vi el shortcode de GitHub para abrir un editor de código haciendo uso de la tecla “.” después de estar abriendo los archivos uno por uno durante mucho tiempo…

Si seleccionas la palabra class después
ctrl + shift + L
seleccionará todas las coincidencias de una sola vez.

JSX sigue siendo JavaScript y no HTML, por lo que al existir palabras reservadas como class, JSX la entiende como la creación de una clase, por eso se utiliza className para no confundirlo y sea eficiente. Existen otras palabras que se debe cambiar, por ejemplo el atributo for de la etiqueta label, que lo confunde por el bucle for, en su lugar se utiliza htmlFor.

Para no te tengas que preocupar mucho por estos errores te dejo este convertidor de html a jsx, que además tienes otras funcionalidades.
➡ https://transform.tools/html-to-jsx

para crear esta estructura completa:

import React from 'react';

const register = () => {
    return (
        <div>
            
        </div>
    );
};

export default register;

con la misma extension : "Reactjs code snippets"
deben escribir lo siguiente:

rsc

yo les recomiendo esta extension para convertir el html en jsx:

https://marketplace.visualstudio.com/items?itemName=riazxrazor.html-to-jsx

Pueden cpolocar esto el las configuraciones de babel para no tener que importar react en todos los archivos de jsx/js:
presets: [
’@babel/preset-env’,
[
’@babel/preset-react’,
{
runtime: ‘automatic’,
}
]

Ya no es necesario importar React en cada archivo que se use JSX! Esta documentación te explica cómo configurar Babel para que lo importe por ti https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux

Este es el momento en el que me arrepiento de haber montado todo lo del curso práctico de frontend developer en css aparte…

Me encanto el tema del punto, que buena!!, No lo sabia.

ya no es necesario usar

import React from 'react';

Si tuviera un peso por cada vez que Oscar menciona “las particularidades que son clave para este proyecto”, tendría…

Me encanto que haga referencia al curso que lleve de la profe TeffCode… ¡¡¡Platziverso confirmado!! 🕸

Me acabo de enamorar de react + intellij Idea, si usan intellij, sabe a lo que me refiero 😮

yo utilicé ctrl + f, agregué class, luego abajo escribí className, después le dí click a todo, y por último, taaraaaan!

No sabía eso de GitHub, buen dato.

Para seleccionar todas las ocurrencias de una palabra en especial en VSC, simplemente le das clic encima a la palabra y presionas Ctrl + F2, de esta forma podemos editar todas las ocurrencias al mismo tiempo.

También les comparto a continuación los atajos de teclado de VSC dependiendo del sistema operativo que tengan en su PC:

• Windows
• Linux
• MacOS

Entonces, recuerden que cada ‘sección’ que tenemos en nuestro HTML podemos considerarlo con un componente, cuando copiemos un bloque de HTML hay que cambiar el ‘class’ por ‘className’ y también cerrar aquellas etiquetas abiertas con “/”. Recuerden que estamos trabajando como si fuera un XML.

Para que funcione el atajo de “.” de github hay que estar logeado.

Si no les abre el Visual Studio Code con el comando del punto “.” en Github deben tener estas extensiones instaladas previamente.

• GitHub Repositories

• Remote Repositories

git clone https://github.com/platzi/react-practico.git

Todavía no puedo creer lo del punto . 😶

No sabia lo de GitHub, genial!!!

Command + D en macOS

En mac el comando en vscode para hacer busqueda y reemplazar es command + option + f

tecla de . dentro de github para abrir un vcode en la nube

extension para slr

ext install EQuimper.react-native-react-redux

Ufff ahora lo entiendo todo xd, la buena practica de cerrar las etiquetas en HTML

JSX no es HTML dentro de JavaScript. JSX es azucar sintetico de react para escribir createElement de una manera mas ordenada.

Lo del punto en GitHub muy interesante 😮