React

Last updated Jul 21, 2023 Edit Source

• Programming
• Frontend
• React

React es una libreria de JavaScript que ayuda a construir la interfaz de usuario utilizando un paradigma basado en Componentes.

Especificamente en React, los componentes son simplemente funciones de JavaScript que retornan HTML.

1
2
3
4
5

function MyButton() {
	return (
		<button>Hi button</button>
	);
}

Para hacer la llamada a un componente dentro de otro, basta con escribir dentro de su HTML su nombre (En React, el nombre de los componentes es el nombre de la funcion que retorna dicho HTML.

1
2
3
4
5
6
7
8

function MyApp() {
	return (
		<div>
			<h1>Welcome to my Page</h1>
			<MyButton />
		</div>	
	);
}

La diferencia clave para diferenciar etiquetas de HTML de componentes de React esque las etiquetas de los componentes de react siempre inician con una letra mayuscula.

Para agregar estilos a una etiqueta dentro de React, se utiliza el atributo className, este se comporta de la misma forma que el atributo class de HTML.

1
2
3
4
5

function MyTitle() {
	return (
		<h1 className="title">Titulo</h1>
	)
}

Posteriormente, para linkear la hoja de estilos de CSS, se realiza de forma diferente con cada bundler, framework, build tool, etc. Con lo que se necesita consultar su documentacion especifica