CURSO DE REACT JS web: https://www.skill-code.

com
SKILL-CODE facebook: SKILL CODE
youtube: SkillCode
Lo hacemos, te enseñamos Instagram: skill_code

Crear aplicación React

Para crear aplicaciones en React asegúrese de tener Node> = 8.10 y npm> = 5.6 en su
máquina.

Para crear un proyecto, abra la carpeta en Visual Studio Code, seguidamente habrá la
terminal y ejecute el siguiente código:

npx create-react-app my-app

cd my-app
npm start

Luego de crear tu proyecto React, se crearan las siguientes carpetas y archivos:

 node_modules
 public
 src
 .gitignore
 package.json
 package-look.json
 README.md

Dentro de mi carpeta ‘src’ encontraras los siguientes archivos:

 App.css
 App.js
 App.test.js
 index.css
 index.js
 logo.svg
 serviceWorker.js
 setupText.js

Hola Mundo
Nota: Para empezar este curso en React JS, es necesario que usted conozca JavaScript.

Nuestro comienzo en React empezara realizando el hola mundo, para ello ejecute el
siguiente código.

En la carpeta src y index.js ejecute el siguiente código:

1
 CURSO DE REACT JS web: https://www.skill-code.com
SKILL-CODE facebook: SKILL CODE
youtube: SkillCode
Lo hacemos, te enseñamos Instagram: skill_code

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

ReactDom.render(x;y)
Recibe dos parámetros, el primero(x) es que vas a insertar y el segundo(y) es donde lo
vas a insertar.

Presentando JSX
Considere esta declaración de variable:

const element = <h1>Hola, mundo!</h1>;

Esta sintaxis de etiqueta no es una cadena ni HTML.

Se llama JSX y es una extensión de sintaxis de JavaScript. Recomendamos usarlo con
React para describir cómo debería verse la interfaz de usuario.

Incrustar expresiones en JSX

En el siguiente ejemplo, declaramos una variable llamada nombre y luego la usamos
dentro de JSX envolviéndola entre llaves:

const nombre = 'Skill-Code';

const titulo = <h1>{nombre}, ReactJS</h1>;
ReactDOM.render(
titulo,
document.getElementById('root')
);

Puede poner cualquier expresión JavaScript válida dentro de las llaves en JSX.

En el siguiente ejemplo, crearemos una función que devuelva el nombre completo, para
ello creamos un objeto con propiedades de nombre y apellido, y los valores usted puede
ir probándolos, seguidamente creamos un título donde insertemos la función que me
devuelve el nombre completo.

2
 CURSO DE REACT JS web: https://www.skill-code.com
SKILL-CODE facebook: SKILL CODE
youtube: SkillCode
Lo hacemos, te enseñamos Instagram: skill_code

import React from 'react';

import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';

function completo(persona) {
return persona.nombre+persona.apellido;
}
let persona = {
nombre : 'Luis',
apellido : 'Pozo'
}

const autor = <h1>{completo(persona)}</h1>;

ReactDOM.render(
autor,
document.getElementById('root')
)
serviceWorker.unregister();

JSX también es una expresión

Después de la compilación, las expresiones JSX se convierten en llamadas de función
JavaScript regulares y se evalúan en objetos JavaScript.
Esto significa que puede usar JSX dentro de if declaraciones y for bucles, asignarlo a
variables, aceptarlo como argumentos y devolverlo desde funciones:

function prueba(usuario) {
if (usuario) {
return <h1>Hello, {usuario}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
ReactDOM.render(
prueba('LuisPozo'),
document.getElementById('root')
)

Especificar elementos secundarios con JSX

Si una etiqueta está vacía, puede cerrarla inmediatamente con />, como XML:
Crea un carpeta img dentro de src, añade tu imagen dentro, para este ejemplo
añadiremos una imagen llamada skillcode.png, recuerda tener la extensión .png.

Seguidamente colocas: import ‘nombre’ from ‘ruta’;

3
 CURSO DE REACT JS web: https://www.skill-code.com
SKILL-CODE facebook: SKILL CODE
youtube: SkillCode
Lo hacemos, te enseñamos Instagram: skill_code

import React from 'react';

import ReactDOM from 'react-dom';
import imagen from './img/skillcode.jpg';
import * as serviceWorker from './serviceWorker';

function prueba(usuario) {
if (usuario) {
return <div>
<img src={imagen}/>
<blockquote>{usuario}</blockquote>
</div>;
}
return <h1>Hello, Stranger.</h1>;
}
ReactDOM.render(
prueba('LuisPozo'),
document.getElementById('root')
)
serviceWorker.unregister();

Las etiquetas JSX pueden contener elementos secundarios:

JSX representa objetos

Babel compila JSX en React.createElement()llamadas.
Estos dos ejemplos son idénticos:
const element = (
<h1 className="titulo">
hola, mundo!
</h1>
);
const element = React.createElement(
'h1',
{className: 'titulo'},
'hola, mundo!'
);
React.createElement() realiza algunas verificaciones para ayudarlo a escribir código sin
errores, pero esencialmente crea un objeto como este:
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'titulo',
children: 'hola, mundo!'
}
};

4
 CURSO DE REACT JS web: https://www.skill-code.com
SKILL-CODE facebook: SKILL CODE
youtube: SkillCode
Lo hacemos, te enseñamos Instagram: skill_code

Colocar estilos CSS

En tu aplicación React las clases se colocan como ‘className’

Para eso añade en la parte de import lo siguiente:

import './index.css';

luego añades la clase a tu etiqueta html

<blockquote className="usuario">{usuario}</blockquote>

Por ultimo añades estilo a tu index.css:

.usuario{
color: blueviolet;
}

Elementos de renderizado
Para renderizar un elemento React en un nodo DOM raíz, pase ambos
a ReactDOM.render():

Actualización del elemento renderizado

Los elementos de React son inmutables . Una vez que crea un elemento, no puede
cambiar sus hijos o atributos. Un elemento es como un solo fotograma en una película:
representa la interfaz de usuario en un momento determinado.
Con nuestro conocimiento hasta ahora, la única forma de actualizar la interfaz de
usuario es crear un nuevo elemento y pasarlo a ReactDOM.render().
Considere este ejemplo de reloj que hace tictac:

function segundo() {
const element = (
<div>
<h1>Skill Code </h1>
<h2>Esto es {new Date().getSeconds()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}

setInterval(segundo, 1000);

5
 CURSO DE REACT JS web: https://www.skill-code.com
SKILL-CODE facebook: SKILL CODE
youtube: SkillCode
Lo hacemos, te enseñamos Instagram: skill_code

Componentes y accesorios
Los componentes le permiten dividir la interfaz de usuario en piezas independientes y
reutilizables, y pensar en cada pieza de forma aislada.

Conceptualmente, los componentes son como funciones de JavaScript. Aceptan

entradas arbitrarias (llamadas "props") y devuelven elementos React que describen lo
que debería aparecer en la pantalla.

Componentes de función
Diríjase en src a App.js, ahí comenzaremos a ejecutar código:
Digite lo siguiente.

import React from 'react';

import logo from './logo.svg';
import './App.css';

function App(props) {
return(
<h1>Somos {props.name}</h1>
);
}

export default App;

Entendiendo el código:

Creamos una función que devuelva un ‘h1’, adicionalmente añadimos como parámetro
unas ‘props’ que significa propiedades que devuelve un elemento react, ahora nos
dirigimos a index.js

ReactDOM.render(
<React.StrictMode>
<App name="skill-code"/>
</React.StrictMode>,
document.getElementById('root')
);

Tenemos en cuenta que la función App recibe propiedades, entonces en el renderizado

colocamos a la etiqueta App el name.

6
 CURSO DE REACT JS web: https://www.skill-code.com
SKILL-CODE facebook: SKILL CODE
youtube: SkillCode
Lo hacemos, te enseñamos Instagram: skill_code

Componentes de Clase
Diríjase en src a App.js, ahí comenzaremos a ejecutar código:
Que hace lo mismo que la función App hablado anteriormente.

class App extends React.Component{

render() {
return(
<h1>Somos ojo {this.props.name}</h1>
);
}
}

Los dos componentes anteriores son equivalentes desde el punto de vista de React.
Los componentes Function y Class tienen algunas características adicionales que
discutiremos en las siguientes secciones .