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!