[Serie de códigos fuente de React] 1 - Configuración y operación
La razón por la que se agrega esta parte de la configuración es porque actualmente (2022.03.19) no se puede compilar el proyecto React oficial... Después de modificar algunas configuraciones, entran en conflicto con el resumen y la compilación falla.
Además, aún quedan algunos preparativos por completar. Los pasos específicos se Contributing > How to Contributepueden explicar en la documentación oficial. La dirección de documentación oficial: https://reactjs.org/docs/how-to-contribute.html .
Requisitos de configuración
De la documentación oficial:
- Tiene Node instalado en v8.0.0+ e Yarn en v1.2.0+. ✔
- Tienes JDK instalado. ❓
- Tiene gcc instalado o se siente cómodo instalando un compilador si es necesario. Algunas de nuestras dependencias pueden requerir un paso de compilación. En OS X, las herramientas de línea de comandos de Xcode cubrirán esto. En Ubuntu, apt-get install build-essential instalará los paquetes necesarios. Comandos similares deberían funcionar en otras distribuciones de Linux. Windows requerirá algunos pasos adicionales, consulte las instrucciones de instalación de node-gyp para obtener más información. ❌
- Estás familiarizado con Git. ❓
Node es definitivamente imprescindible, no tengo GCC instalado localmente, al menos para ejecutar React, no se requiere la plataforma Windows.
Java no está confirmado, he instalado Java (tanto 8 como 11, la última versión no está confirmada), por lo que esta no es forma de confirmar.
Bifurque, cree y ejecute proyectos de React
No sé cuándo se solucionará este problema. En la actualidad, un equipo/miembro ha revertido un compromiso enviado hace unos días, y luego el proyecto se puede compilar correctamente. La dirección de la bifurcación es: https://github .com/jeongwoopark0514/react/tree/fixBuild .
Después de que Fort termine el proyecto a local, cambie la rama para fixBuildusar yarno npm installdescargue todas las dependencias.
Utilice o para compilar el proyecto yarn builddespués de descargar las dependencias .npm run build
Solo build React y ReactDOM pueden usar este comando: yarn build react/index,react-dom/index --type=UMD.
Si encuentra el siguiente error:
Nueve de cada diez veces, no hay un parche oficial y ha descargado directamente el código fuente de React de FB.
La página después de ejecutarse con éxito es probablemente la siguiente:
...omitir algunos...
Hay bastantes proyectos que se han construido, de todos modos, no puedo ver el final de un vistazo...
yarn build react/index,react-dom/index --type=UMDSolía saber
Proyecto abierto
Una captura de pantalla de la estructura de nivel superior es la siguiente:
De hecho, lo que es más importante son fixtureslos packagesdirectorios y dos, fixturesque contienen algunos casos en ejecución, y packagesel código fuente real de React se divide en forma de módulos:
Los más familiares son react, react-dom, react-reconciler (el concepto de reconciliador ya ha sido entrevistado y está a punto de ser aplastado) y algunas dependencias usadas y no usadas.
fixturesEl siguiente proyecto de aprendizaje es: fixtures/packaging/babel-standalone/dev.html, este también es el proyecto recomendado para la operación de prueba en la documentación de React. La documentación oficial menciona que usa react.development.js, que monitoreará los cambios realizados.
dev.htmlEl contenido del archivo es el siguiente:
<html>
<body>
<script src="../../../build/node_modules/react/umd/react.development.js"></script>
<script src="../../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<div id="container"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementById("container")
);
</script>
</body>
</html>
Entonces, la página renderizada también es muy simple. Después de grabar el perfil, la página es la siguiente:
La parte naranja es el motor de renderizado del navegador en funcionamiento, el código verde es la ejecución de babel y la parte rosa es el código relacionado con React.
Tenga en cuenta runesta parte:
function run(transformFn, script) {
var scriptEl = document.createElement("script");
scriptEl.text = transformCode(transformFn, script);
headEl.appendChild(scriptEl);
}
runEste código comienza a ejecutar append en react-dom:
Es decir, la entrada de ejecución para todo el código de React.
La versión actual se avanzó a la v18, por lo que la llamada a la función será diferente de la v17 y aparecerá la siguiente advertencia en la consola:
Esto es un poco molesto... así que el siguiente paso debería ser...
¿Probemos la API de v18 directamente?
Después de todo, v18 pasó de alfa a beta. Aunque no sé cuándo se lanzará la versión estable, siempre se siente como este año... Después de todo, han pasado dos años.