¿Por qué necesita importar React en componentes funcionales?

React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Es ‘V’ en MVC. ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación.

El navegador no entiende React, solo entiende HTML, CSS y JavaScript. Entonces, para convertir React en JavaScript válido, usamos un paquete web llamado Babel. Se usa para convertir JSX en objetos y luego devolver ese objeto. Babel ya está incluido en el modelo generado por create-react-app.

Entendamos con la ayuda del ejemplo.

Paso 1: Creación de la aplicación React

npx create-react-app reactapp

Paso 2: después de crear la carpeta de su proyecto ieloops, muévase a ella usando el siguiente comando:

cd reactapp

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Paso 3: Escribe el siguiente código en App.js. A continuación se muestra una sintaxis JSX. Entonces, cada vez que lo use, necesitará React importado.

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() { 
  return <h1>Hello, World!</h1>
}
  
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

El JSX anterior se convierte a este por Babel internamente

Object
$$typeof: Symbol(react.element)
key: null
props: {children: 'Hello, World!'}
ref: null
type: "h1"
_owner: null
_store: {validated: false}
_self: null
_source: {fileName: '/src/index.js', lineNumber: 5, columnNumber: 10}
[[Prototype]]: Object

Explicación: 

1. tipo: en este ejemplo, nuestro componente es el objeto que representa el elemento raíz, que es el elemento h1. type es la propiedad que corresponde al elemento HTML.
2. props: esta propiedad contiene todos los elementos secundarios y, en nuestro caso, es ¡Hola, mundo!
3. clave: es posible que sepa que pasamos la clave como accesorio mientras mapeamos en React, que en nuestro caso es nulo. Se utiliza para identificar de forma única un elemento en el DOM virtual.
4. ref: cuando necesita modificar imperativamente un niño fuera del flujo de datos típico, necesitamos ref.
5. $$typeof: esta propiedad identifica el objeto como un elemento React

Lo que ve el navegador después de compilar el código es el siguiente código.

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() { 
  return React.createElemet("h1",null,"Hello World") ;
}
  
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

Puede verlo usted mismo iniciando sesión en la consola.

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() { 
  return <h1>Hello, World!</h1>
}
  
const rootElement = document.getElementById('root')
console.log(App())
ReactDOM.render(<App />, rootElement)

Explicaciones: el JSX ingresa internamente en muchas llamadas a la función React.createElement() y cada una de ellas devuelve un objeto como se muestra arriba. Ahora, debido a esto, necesitamos importar React desde «react» ya que internamente cada JSX está creando un componente React usando el transformador JSX.

Entonces, para usar la función createElement necesitamos importar React y si no lo importamos

entonces la función React.createElement no estará definida.

Nota: desde la versión 17 de React, ni siquiera necesita importar React desde «react» para proyectos más pequeños, pero las versiones anteriores de los proyectos de React necesitan importarlo. El transformador JSX internamente se encarga de convertir un JSX en elementos React, pero es posible que aún deba importarlo para usar ganchos como useState y useEffect. No necesitamos importar React en archivos como acciones, reductores, etc. porque no tenemos JSX allí.

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Producción: