Introducción a HTML: HTML es un lenguaje de marcado de hipertexto, el lenguaje de marcado estándar para documentos diseñados para mostrarse y verse en la web en un navegador web.
Aquí hay un código para crear un formulario básico en HTML:
HTML
<!DOCTYPE html> <html> <body> <h2>HTML Form</h2> <form> <label for="firstname">First name:</label> <br> <input type="text" id="firstname" name="firstname" value="Shubh"> <br> <label for="lastname">Last name:</label><br> <input type="text" id="lastname" name="lastname" value="Barotha"> <br><br> <input type="submit" value="Submit"> </form> </body> </html>
Producción: 
Introducción a JSX : JSX (JavaScript + XML) es una extensión de JavaScript que le permite escribir HTML directamente dentro de JavaScript, que presenta algunos beneficios de hacer que su código sea más legible y ejercer el poder completo de JavaScript dentro de HTML. JSX es de alguna manera casi como HTML, sin embargo, acompaña ciertas diferencias notables que cubriremos en la siguiente sección. Dado que JSX no es un código JS legítimo, debe compilarse en JS con una herramienta como Babel o similar.
Un ejemplo simple de JSX:
const App = <h1>Bienvenido a GeeksforGeeks</h1>;
Aquí está el código para crear un ejemplo simple en JSX:
Cree una nueva aplicación en reactjs usando el comando:
npx create-react-app myapp
La estructura de su proyecto se verá así:
Vamos a escribir un jsx básico en código de reacción.
Para comenzar, abra App.js y realice los siguientes cambios:
import React from 'react';
import ReactDOM from 'react-dom';
const App=()=> {
return(
<div><h1>Welcome to GeeksforGeeks</h1></div>
)
}
export default App;
Guarde y cierre el archivo y ejecute el proyecto usando el comando desde el directorio de su proyecto:
npm start
Producción:
Si hace clic en el botón Enviar, la página se volverá a cargar. Dado que está creando una aplicación de una sola página, evitará este comportamiento estándar para un botón con un tipo = «enviar». En su lugar, manejará el evento de envío dentro del componente.
JSX frente a HTML:
Las diferencias básicas entre JSX y HTML son las siguientes:
| HTML | JSX |
| En HTML, se pueden devolver varios elementos. Por ejemplo: <ul> <li>lista desordenada <ol> <li>lista ordenada</li> <li>lista ordenada</li> <li>lista ordenada</li> </ol> </li> < li>lista desordenada</li> <li>lista desordenada</li> </ul> |
El JSX anidado debe devolver un elemento, que llamaremos elemento principal que envuelve todos los demás niveles de elementos anidados: <div> <p>rosa</p> <p>amarillo</p> <p>verde</p > </div> Sin el elemento contenedor, JSX no transpilará. En React, podemos renderizar JSX directamente en HTML DOM usando la API de renderizado de React, también conocida como ReactDOM . La fórmula para renderizar elementos de React es así: ReactDOM.render(componentToRender, targetNode) ReactDOM.render() debe llamarse después de las declaraciones de elementos JSX. |
|
Los elementos HTML tienen atributos. por ejemplo, maxlength en <input maxlength=”16″ /> |
Los elementos JSX tienen accesorios. por ejemplo, maxLength en <input maxLength=”16″ /> |
| No es necesario usar camelCase para atributos, ids y referencias de eventos. Es totalmente su decisión usar camelCase, minúsculas o guiones para nombrarlos. | Todos los atributos HTML y las referencias de eventos en JSX se convierten en camelCase, de esta manera, el evento onclick se convierte en onClick y onchange — onChange. |
| El atributo de clase se puede utilizar en cualquier elemento HTML. El nombre de clase puede ser utilizado por CSS y JavaScript para realizar ciertas tareas para elementos con el nombre de clase especificado. | No puede usar la palabra clase para definir clases HTML, ya que clase es una palabra reservada en JavaScript; en su lugar, use — className . |
| En HTML, casi todas las etiquetas tienen una etiqueta de apertura y otra de cierre, excepto probablemente algunas como <br/> | En JSX, sin embargo, cualquier elemento se puede escribir como una etiqueta de cierre automático, por ejemplo: <div/> Ejemplo: const string = <img src={user.avatarUrl} />; |
Dado que el componente JSX representa HTML, puede juntar varios componentes para crear una página HTML más compleja.
El hecho de que JSX se parezca a HTML no lo convierte en HTML; de hecho, aún puede escribir funciones normales sin pasar por la sintaxis similar a HTML.
La conclusión es que JSX no es HTML ni un motor de plantillas.
Publicación traducida automáticamente
Artículo escrito por kashish2008 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA