Maison > Article > interface Web > Comment afficher le code source de réaction
Comment afficher le code source de React : 1. Entrez sur le site officiel de React ; 2. Téléchargez le fichier des packages localement 3. Ouvrez le fichier index.js, qui est le fichier d'entrée du code source de React ; Nous pouvons également convertir le code source de React via Babel.
L'environnement d'exploitation de ce tutoriel : système Windows10, version React16 Cette méthode convient à toutes les marques d'ordinateurs.
(Partage de vidéos d'apprentissage : tutoriel vidéo React)
La méthode spécifique est la suivante :
1 Entrez sur le site officiel
https://github.com/facebook/react.
2. Les codes sources sont tous dans le fichier des packages
https://github.com/facebook/react/tree/master/packages
3. Vous pouvez télécharger le fichier localement, ce qui aura l'air plus pratique
4. Entrez ensuite les pages/react/ Fichier index.js, ce fichier C'est l'entrée du code source de réaction
5. Cette URL peut afficher le code de réaction comme le code converti par babel
https://react.docschina.org/
Exemple :
import React, { Component } from "react"; import ReactDOM from "react-dom"; import "./index.css"; function FuncCmp(props) { return <div>name: {props.name}</div>; } class ClassCmp extends Component { render() { return <div>name: {this.props.name}</div>; } } const jsx = ( <div> <p>我是内容</p> <FuncCmp name="我是function组件" /> <ClassCmp name="我是class组件" /> </div> ); ReactDOM.render(jsx, document.getElementById("root"));
Après compilé par babel :
function FuncCmp(props) { return React.createElement( "div", null, "name: ", props.name ); } class ClassCmp extends React.Component { render() { return React.createElement( "div", null, "name: ", this.props.name ); } } let jsx = React.createElement( "div", null, " ", React.createElement( "div", { className: "border" }, "我是内容" ), " ", React.createElement(FuncCmp, { name: "我是function组件" }), " ", React.createElement(ClassCmp, { name: "我是class组件" }), " " ); ReactDOM.render(jsx, document.getElementById('root'));
Recommandations associées : tutoriel js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!