Crear tutorial de la aplicación React

La aplicación Create React es una gran herramienta para ponerlo en funcionamiento con React.js muy rápidamente. El desarrollo front-end es complicado con tantas herramientas de construcción que su cabeza girará. La aplicación Create React toma toda esa complejidad y la hace simple. Todo lo que necesita hacer es instalar el paquete usando npm y luego ejecutar algunos comandos simples para crear y ejecutar un nuevo proyecto. La aplicación Create React utiliza Webpack, Babel, ESLint y otros proyectos fantásticos para impulsar su nueva aplicación. Si alguna vez quiere jugar con la configuración detallada, puede "expulsar" de la aplicación Create React y editar sus archivos de configuración directamente. Echemos un vistazo a la configuración de la aplicación Create React y Visual Studio Code para divertirse en la codificación.

Configuración de Visual Studio Code para React Development

En primer lugar, dado que usaremos Visual Studio Code en esta ronda de tutoriales sobre React, instalemos y configuremos algunas extensiones para facilitar las cosas. La primera extensión para instalar es Prettier .
Formateador más bonito para Visual Studio Code

Prettier reformateará su código para que esté bien, Prettier. ¿Y quién no quiere un código bonito? Bonificación: esta extensión puede formatear el marcado JSX que usamos con React. A continuación, podemos instalar la extensión Simple React Snippets que nos brinda algunos atajos increíbles para configurar rápidamente componentes de clase o función en React.
Fragmentos de reacción simple

Aquí están los atajos y lo que hacen por nosotros.

Retazo	Renders
imr	Importar Reaccionar
imrc	Importar React / Componente
impt	Importar PropTypes
impc	Importar reaccionar / componente puro
cc	Componente de clase
ccc	Componente de clase con constructor
sfc	Componente de función sin estado
cdm	componentDidMount
cwm	componentWillMount
cwrp	componentWillReceiveProps
gds	getDerivedStateFromProps
scu	shouldComponentUpdate
cwu	componentWillUpdate
cdu	componentDidUpdate
cwu	componentWillUpdate
Centros para el Control y la Prevención de Enfermedades	componentDidCatch
gsbu	getSnapshotBeforeUpdate
ss	setState
ssf	SetState funcional
ren	hacer
rprop	Render Prop
hoc	Componente de orden superior

Crear una aplicación React

En la introducción a React , utilizamos la herramienta Crear aplicación React para crear rápidamente una aplicación React. Vamos a usar esa herramienta nuevamente ahora mismo para crear una nueva aplicación nuevamente.

reaccionar $ create-react-app reactable
Crear una nueva aplicación React en C: \ node \ react \ reactable.

Instalación de paquetes. Esto puede tomar un par de minutos.
Instalación de react, react-dom y react-scripts ...

Si todo va bien, debería ver algo como esto una vez que se complete la instalación.
npm create-react-app

Ok, con eso fuera del camino, comencemos la aplicación.

reaccionar $ cd reactable
inicio de $ npm reactable

A medida que el servidor se inicia, iniciará automáticamente una ventana del navegador para usted y cargará http: // localhost: 3000 / que debería mostrar la página de bienvenida de bienvenida para la aplicación React.
React_App _-_ Google_Chrome

Ahora, podemos abrir la carpeta que contiene la aplicación reaccionar. En nuestro caso, lo llamamos reactable, por lo que abrimos esa carpeta.
reaccionar estructura de carpetas de aplicaciones

Hay varios archivos y carpetas en la raíz de la aplicación reaccionar. Algunos de ellos son los siguientes:

node_modules Contiene la biblioteca React y cualquier otra biblioteca de terceros necesaria.
public Contiene los activos públicos de la aplicación. Aquí es donde vive el archivo index.html , que es donde React montará la aplicación de forma predeterminada en el elemento <div id = ”root”> </div>.
src Contiene los archivos App.css, App.js, App.test.js, index.css, index.js, logo.svg y serviceWorker.js. El archivo App.js es responsable de mostrar la pantalla de bienvenida predeterminada en React.
package-lock.json Se genera automáticamente para cualquier operación en la que npm modifique el árbol node_modules o package.json.
package.json Contiene varios metadatos relevantes para el proyecto. Este archivo se utiliza para proporcionar información a npm que le permite identificar el proyecto y manejar las dependencias del proyecto.
README.md Deberá leerlo para averiguarlo.

Introducción a JSX

Ahora podemos abrir ese archivo App.js y echar un vistazo a los contenidos en su interior.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a 
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}
 
export default App;

Entonces, hay algunas cosas que suceden en el código anterior. En primer lugar, podemos ver que se usa una clase ES6 para crear un componente. En esa clase hay un render()método. En ese método, devolvemos el marcado resaltado. Entonces esta parte se ve un poco cobarde. HTML dentro de JavaScript? Bueno, este marcado no es realmente JavaScript o HTML, sino un tipo especial de marcado conocido como JSX o JavaScript XML. Para que JSX haga lo suyo, debe pasar por un compilador conocido como Babel . Lo que hace Babel toma la sintaxis JSX y la convierte en código JavaScript simple que cualquier navegador entiende. Como ejemplo, tomamos manualmente el código resaltado arriba y lo ejecutamos a través de Babel, este es el código JavaScript resultante.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
("use strict");
 
React.createElement(
  "div",
  {
    className: "App"
  },
  React.createElement(
    "header",
    {
      className: "App-header"
    },
    React.createElement("img", {
      src: logo,
      className: "App-logo",
      alt: "logo"
    }),
    React.createElement(
      "p",
      null,
      "Edit ",
      React.createElement("code", null, "src/App.js"),
      " and save to reload."
    ),
    React.createElement(
      "a",
      {
        className: "App-link",
        href: "https://reactjs.org",
        target: "_blank",
        rel: "noopener noreferrer"
      },
      "Learn React"
    )
  )
);

Entonces puede ver que la forma en que se crean los elementos en React es mediante esa función React.createElement () . La mayoría de las personas prefieren escribir el marcado JSX en lugar del código JavaScript correspondiente. Usar JSX para describir cómo debería verse la IU es definitivamente más fácil que tener que escribir manualmente todas esas llamadas a React.createElement () .

También tenemos el archivo App.css que se importa al archivo App.js como podemos ver.
app-css para crear reaccionar aplicación

App.css utiliza este código CSS para diseñar el componente principal de la aplicación.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.App {
  text-align: center;
}
 
.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}
 
.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
 
.App-link {
  color: #61dafb;
}
 
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

App.test.js

Este archivo tiene algún código para comenzar a probar en React.

1
2
3
4
5
6
7
8
9
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

index.css

El archivo index.css se utiliza para el estilo global de CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

index.js

El archivo index.js es el punto de entrada para la aplicación React.

1
2
3
4
5
6
7
8
9
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
 
ReactDOM.render(<App />, document.getElementById('root'));
 
serviceWorker.unregister();

logo.svg

El archivo logo.svg tiene los gráficos SVG para el componente de la aplicación.

serviceWorker.js

Esto se utiliza para crear aplicaciones web progresivas .

Intentando reaccionar sin un paso de compilación

A pesar de que la aplicación Create React hace que comenzar a usar React sea bastante rápido y fácil, tal vez solo desee colocarlo en una página HTML y comenzar. Resulta que esto también es posible y puede simplemente descargar este archivo html , o copiar los contenidos enumerados a continuación y puede comenzar a reaccionar en un solo archivo html. Definitivamente vale la pena si solo quieres patear los neumáticos y aprender un poco sobre cómo funciona React.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));
    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
 
      Read this section for a production-ready setup with JSX:
      https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
 
      In a larger project, you can use an integrated toolchain that includes JSX instead:
      https://reactjs.org/docs/create-a-new-react-app.html
 
      You can also use React without JSX, in which case you can remove Babel:
      https://reactjs.org/docs/react-without-jsx.html
    -->
  </body>
</html>

Otras lecturas

Crear aplicación de reacción: configure una aplicación web moderna ejecutando un comando
Crear una nueva aplicación React - React
Crear tutorial de aplicación React para principiantes - AppDividend
Introducción a React: descripción general y tutorial
Introducción a React con la aplicación Create React
Crear y ejecutar proyectos de React con create-react-app

Resumen del tutorial Crear aplicación React

Con este tutorial, ahora estamos listos para comenzar a hackear algunas aplicaciones front-end usando react. Haremos exactamente eso en los próximos tutoriales.

Header Ads Widget

Crear tutorial de la aplicación React

Configuración de Visual Studio Code para React Development

Crear una aplicación React

Introducción a JSX

App.test.js

index.css

index.js

logo.svg

serviceWorker.js

Intentando reaccionar sin un paso de compilación

Otras lecturas

Resumen del tutorial Crear aplicación React

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget