¿Qué es Reaccionar?
React es una biblioteca de JavaScript creada por Facebook
React es una biblioteca de interfaz de usuario (UI)
React es una herramienta para construir componentes de interfaz de usuario
Tutorial de inicio rápido de React
Este es un tutorial de inicio rápido.
Antes de comenzar, debe tener una comprensión básica de:
Para un tutorial completo:
Comenzar el tutorial de reacción ❯Agregar React a una página HTML
Este tutorial de inicio rápido agregará React a una página como esta:
Ejemplo
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
¿Qué es Babel?
Babel es un compilador de JavaScript que puede traducir lenguajes de marcado o de programación a JavaScript.
Con Babel, puede utilizar las funciones más recientes de JavaScript (ES6 - ECMAScript 2015).
Babel está disponible para diferentes conversiones. React usa Babel para convertir JSX en JavaScript.
Tenga en cuenta que se necesita <script type="text/babel"> para usar Babel.
¿Qué es JSX?
JSX significa J ava Script X ML.
JSX es una extensión similar a XML/HTML para JavaScript.
Ejemplo
const element = <h1>Hello World!</h1>
Como puede ver arriba, JSX no es JavaScript ni HTML.
JSX es una extensión de sintaxis XML para JavaScript que también viene con toda la potencia de ES6 (ECMAScript 2015).
Al igual que HTML, las etiquetas JSX pueden tener nombres de etiqueta, atributos e hijos. Si un atributo está entre llaves, el valor es una expresión de JavaScript.
Tenga en cuenta que JSX no usa comillas alrededor de la cadena de texto HTML.
Reaccionar renderizado DOM
El método ReactDom.render() se usa para representar (mostrar) elementos HTML:
Ejemplo
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
Expresiones JSX
Las expresiones se pueden usar en JSX envolviéndolas entre llaves {} .
Ejemplo
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
Reaccionar Elementos
Las aplicaciones de React generalmente se construyen alrededor de un solo elemento HTML .
Los desarrolladores de React a menudo llaman a esto el nodo raíz (elemento raíz):
<div id="root"></div>
Los elementos de reacción se ven así:
const element = <h1>Hello React!</h1>
Los elementos se renderizan (muestran) con el método ReactDOM.render():
ReactDOM.render(element, document.getElementById('root'));
Los elementos de reacción son inmutables . No se pueden cambiar.
La única forma de cambiar un elemento React es renderizar un elemento nuevo cada vez:
Ejemplo
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Reaccionar componentes
Los componentes de React son funciones de JavaScript.
Este ejemplo crea un componente React llamado "Bienvenido":
Ejemplo
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React también puede usar clases ES6 para crear componentes.
Este ejemplo crea un componente de React llamado Welcome con un método de renderizado :
Ejemplo
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
Propiedades del componente de reacción
Este ejemplo crea un componente React llamado "Bienvenido" con argumentos de propiedad:
Ejemplo
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React también puede usar clases ES6 para crear componentes.
Este ejemplo también crea un componente React llamado "Bienvenido" con argumentos de propiedad:
Ejemplo
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
Compilador JSX
Los ejemplos en esta página compilan JSX en el navegador.
Para el código de producción, la compilación debe hacerse por separado.
Crear aplicación de reacción
Facebook ha creado una aplicación Create React con todo lo que necesita para crear una aplicación React.
Es un servidor de desarrollo que utiliza Webpack para compilar archivos CSS de prefijo automático React, JSX y ES6.
La aplicación Create React usa ESLint para probar y advertir sobre errores en el código.
Para crear una aplicación Create React, ejecute el siguiente código en su terminal:
Ejemplo
npx create-react-app react-tutorial
Asegúrese de tener Node.js 5.2 o superior. De lo contrario, debe instalar npx:
Ejemplo
npm i npx
Inicie una carpeta desde donde desea que permanezca su aplicación:
Ejemplo
C:\Users\myUser>npx create-react-app react-tutorial
Resultado de éxito:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start