En esta clase haremos un ejemplo pequeño para entender como funciona React.

<aside> 💡 Si quieres probar algun framework rápidamente es recomendable usar CodeSandBox que te permite probar cualquier framework si la necesidad de descargarlo.

</aside>

Dependencias y package.json

{
	"name": "react", // nombre de proyecto
	"version": "1.0.0", // versión del proyecto
	"description": "React example", // descripción del proyecto
	"keywords": ["react", "starter"],
	"main": "src/index.js", // Archivo principal del proyecto
	"dependencies": { // dependencias fundamentales de react
		"react": "17.0.1",
		"react-dom": "17.0.1",
		"react-scripts": "4.0.0"
	},
	"scripts": { // scripts principales de react
		"start": "react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test--env=jsdom",
		"eject": "react-scripts eject"
	}
}

• react

  Una biblioteca de JavaScript para construir interfaces de usuario.

• react-dom

  Un paquete que proporciona métodos específicos del DOM para trabajar con React.

• react-scripts

  Un conjunto de scripts y archivos de configuración utilizados por Create React App.

Archivo principal (index.js)

Este es un fragmento de código de React que tiene como objetivo renderizar el componente App en el elemento con el id root.

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
	<StrictMode>
		<App />
	</StrictMode>,
	rootElement
)

<aside> 💡 Primero, se importan los módulos necesarios de react y react-dom. Luego, se importa el componente App desde su archivo correspondiente.

</aside>

<aside> 💡 A continuación, se define la constante rootElement que hace referencia al elemento HTML en el cual se va a renderizar el componente App. Finalmente, se utiliza el método ReactDOM.render() para renderizar el componente App dentro del elemento rootElement utilizando el modo estricto de React.

</aside>