No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

0D
10H
25M
58S
Curso Pr谩ctico de React.js

Curso Pr谩ctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Transformando HTML y CSS en componentes de React

8/30
Recursos

Aportes 51

Preguntas 11

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥榝or鈥 por 鈥榟tmlFor鈥 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 鈥榬eact鈥

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 鈥渃lass鈥 es una palabra reservada en js por lo tanto tenemos que reemplazarla por 鈥渃lassName鈥 en el codigo de React con un atajo (ctrl+D) podemos seleccionar todas nuestras 鈥渃lass鈥. 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 鈥渞afce鈥 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: 鈥榓utomatic鈥,
}
]

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

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 鈥渓as 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:

Entonces, recuerden que cada 鈥榮ecci贸n鈥 que tenemos en nuestro HTML podemos considerarlo con un componente, cuando copiemos un bloque de HTML hay que cambiar el 鈥榗lass鈥 por 鈥榗lassName鈥 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.

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 馃槷