반응 소스 코드를 보는 방법

React 소스 코드를 보는 방법: 1. React 공식 웹사이트에 접속합니다. 2. 패키지 파일을 로컬로 다운로드합니다. 3. React 소스 코드의 항목 파일인 index.js 파일을 엽니다. 바벨을 통해 리액트 소스 코드를 변환할 수도 있습니다.

이 튜토리얼의 운영 환경: windows10 시스템, React16 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

(학습 영상 공유: react 영상 튜토리얼)

구체적인 방법은 다음과 같습니다.

1. 공식 홈페이지에 들어가세요

https://github.com/facebook/react

2. 소스 코드는 패키지 파일

https://github.com/facebook/react/tree/master/packages

3에 있습니다. 파일을 로컬에 다운로드하면 더 편리할 것입니다

4. 그런 다음 pageages/react/index.js 파일을 입력하세요. 이 파일은 반응 소스 코드의 입구입니다

5. babel

https://react.docschina.org/

로 변환된 코드로 반응 코드예:

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"));

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'));

관련 권장 사항: js 튜토리얼

위 내용은 반응 소스 코드를 보는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!