A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

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

7/29
Recursos

Aportes 35

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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>

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

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

Personalmente me tarder mas en arreglar la estructura de las clases de css de todo el proyecto que en terminar este curso 馃槚鈥

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;

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.

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

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.

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

Yo coloco " rafce" y me construye el componente completo

import React from 鈥榬eact鈥

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

    </div>
)

}

export default login

El truco de 鈥.鈥 no me lo sab铆a 馃く馃く馃く

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

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

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

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鈥,
}
]

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',
					}
				],
			]
		}
	}
},

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

Me encanto que haga referencia al curso que lleve de la profe TeffCode鈥 隆隆隆Platziverso confirmado!! 馃暩

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

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

extension para slr

ext install EQuimper.react-native-react-redux

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

Si tuviera un peso por cada vez que Oscar menciona 鈥渓as particularidades que son clave para este proyecto鈥, tendr铆a鈥

Ufff ahora lo entiendo todo xd, la buena practica de cerrar las etiquetas en 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鈥

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

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

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

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

Lo del punto en GitHub muy interesante 馃槷

ya no es necesario usar

import React from 'react';

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