En primer lugar, antes de aprender este marco, debe comprender el siguiente conocimiento:
1. Conceptos básicos de JS nativos
2. CSS básicos
3.NPM Conceptos básicos de gestión de paquetes
4. Webpack construir conceptos básicos del proyecto
5.Es6 Especificaciones
Los cinco puntos de conocimiento anteriores también son tareas previas que deben entenderse en el aprendizaje de otros marcos frontales.
No diré mucho sobre JS y CSS. NPM es la herramienta de gestión de paquetes más abogada y dominante en la actualidad. Puede considerarlo si todavía está usando Bower u otras herramientas. Como nueva generación de herramientas de embalaje, Webpack ya ha dominado las herramientas de embalaje frontal y tiene una gran ventaja en comparación con Browserify. En cuanto a la especificación ES6, aunque los navegadores convencionales no son compatibles ahora, se pueden convertir utilizando convertidores como Babel.
Combinando algunos otros marcos frontales convencionales, personalmente creo que hay tres cosas básicas para construir aplicaciones de una sola página: componentes, enrutamiento y gestión estatal . Luego presentaré a React en función de estos tres, por supuesto, habrá algunos puntos de conocimiento adicionales intercalados allí.
Componentes
La escritura y llamadas de componentes de React depende principalmente de la modularidad de ES6 y la sintaxis JSX. Aquí hay un ejemplo:
// main.jsimport React from 'react'import { render } from 'react-dom'import MyComponent from './component.js'import './main.css'// main component class MyDemo extends React.Component { render() { return ( <div className="box"> <MyComponent /> </div> ) }} render (((<mydemo/>), document.getElementById ('app')) // component.js // subcomponent import react de 'react'Export predeterminado class myComponent extiende react.component {render () {return (<div> <p> Este es un componente! </p> </iv>)} // 100%}En comparación con el marco Vue.js, personalmente creo que la forma en que React Components está escrita no es tan cómodo como Vue, y el estilo CSS del componente todavía está separado del exterior del componente, por lo que no es muy conveniente mantenerlo.
A partir de este ejemplo, podemos ver las características de Virtual DOM y JSX de React. En comparación con otros marcos, el DOM virtual de React no solo puede mejorar el rendimiento de la página, sino también evitar ataques XSS, etc. Los principios específicos del DOM virtual no se introducen aquí
En cuanto a la sintaxis JSX, es un tipo de azúcar de sintaxis de JS. Podemos implementar fácilmente algunas funciones a través de esta sintaxis de azúcar. Aquí, JSX convierte la sintaxis de XML en JavaScript puro, y los elementos XML, los atributos y los nodos infantiles se convierten en parámetros de React.CreateElement. Los azúcares de sintaxis JS similares incluyen TypeScript y otros tipos.
enrutamiento
El mecanismo de enrutamiento frontal es uno de los enlaces más importantes en la construcción de aplicaciones de una sola página (SPA). A través del enrutamiento frontal, podemos optimizar la experiencia del usuario sin obtener todos los datos del servidor cada vez, para presentar rápidamente la página al usuario.
El enrutamiento React depende del enrutador React . React Router mantiene la UI y la URL sincronizada. Tiene API simples y características potentes, como la carga de almacenamiento en búfer, la coincidencia de enrutamiento dinámico y el establecimiento de la transición de ubicación correcta.
Aquí hay un ejemplo de enrutamiento React:
import react, {componente} de 'react'import {render} de' react-dom'Import {enrutador, ruta, indexroute, link, browserhistory} de 'react-router'const activo = {color:' rojo '} La aplicación de clase extiende componente {render () {return (div> <hiv> <h1> my router </h1> to="/" activeStyle={ACTIVE}>Home</Link></li> <li><Link to="/users" activeStyle={ACTIVE}>User Page</Link></li> </ul> {this.props.children} </div> ) }}class Index extends React.Component { render() { return ( <div> <h2>Index!</h2> </div> )}} Los usuarios de la clase extienden react.component {render () {return (<div> <h2> usuarios </h2> </div>)}} reender ((<router history = {browserhistory}>> <ruta ruta = "/" componente = {app}> <indexroute component = {índice}/> <sute de ruta = "Usuarios" Usuarios " componente = {usuarios}> </ruta> </ruta> </router>), document.getElementById ('app')))Solo se enumera solo un método de enrutamiento para React. En comparación con otros marcos, la sintaxis del enrutamiento React es más fácil de entender.
Gestión de estado
La gestión estatal no es una aplicación necesaria de una página. El uso de TI puede ayudarnos a administrar los cambios en cada estado de manera unificada, lo que hace que todo el proceso del proyecto sea claro y mantenible. React Implementation State Management puede usar el Redux recomendado oficialmente.
Redux utiliza un flujo de datos unidireccional estricto. Todo el estado de aplicación se almacena en un árbol de objetos, y este árbol de objetos existe solo en la única tienda.
Ejemplo de proyecto
Aquí escribí un sitio web de una sola página usando React, y la página es la siguiente:
Buscar
Debido a que utilicé Fetch para la interacción AJAX en el ejemplo anterior, introduciré brevemente Fetch aquí.
Podemos usar Fetch como la próxima generación de tecnología AJAX, que utiliza el método de promesa popular actual.
Usando Fetch podemos escribir AJAX para interactuar con datos como este:
// Obtener método de datos fetchfn = () => {fetch ('../../ data.json') .then ((res) => {console.log (res.status); return res.json ()}) .then ((data) => {this.setState ({lists: data.listdata})}) .catch ((e) console.log (e.message)})}Resumir
Lo más importante de aprender un marco es no aprender su tecnología, sino aprender las ideas de resolución de problemas que trae. Al aprender el marco de React, puede descubrir una nueva mentalidad de sus nuevas características únicas. Solo cuando se expande el nivel de pensamiento, puede volar libremente en el océano en la parte delantera. Espero que este artículo sea útil para que todos aprendan React.