반응 설치


React는 직접 다운로드하여 사용할 수 있으며, 다운로드 패키지에서도 많은 학습 예제가 제공됩니다.

이 튜토리얼은 React 버전 0.14.7을 사용합니다. 공식 웹사이트 http://facebook.github.io/react/에서 최신 버전을 다운로드할 수 있습니다.

PHP 중국어 웹사이트의 React CDN 라이브러리를 직접 사용할 수도 있습니다. 주소는 다음과 같습니다. 

<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>

사용 예

다음 예는 Hello, world!

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

예제를 실행합니다. »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

예제 분석:

예제에서는 세 개의 라이브러리(react.min.js, React-dom.min.js 및 browser.min.js)를 소개했습니다.

  • react.min.js - React The 코어 라이브러리

  • react-dom.min.js - DOM 관련 기능 제공

  • browser.min.js - JSX 구문을 JavaScript 구문으로 변환하는 데 사용됨 

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

위의 코드 삽입 id="example" 노드에 h1 제목을 추가합니다.

참고:

JSX를 사용해야 하는 경우 <script> 태그의 유형 속성을 text/babel로 설정해야 합니다.

npm을 통해 React 사용

시스템이 아직 Node.js 및 NPM을 지원하지 않는 경우 Node.js 튜토리얼을 참조하세요.

React에서는 browserify나 webpack과 같은 CommonJS 모듈 시스템을 사용하는 것이 좋습니다.

첫 번째 단계에서는 전역 패키지를 설치합니다. 

$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g

두 번째 단계에서는 루트 디렉터리를 만듭니다.

디렉토리 이름이 ReactApp인 루트 디렉터리를 만든 다음 npm init를 사용하여 초기화하여 package.json 파일을 생성합니다. 

$ mkdir reactApp
$ cd reactApp/
$ npm init
name: (reactApp) php-react-test
version: (1.0.0) 
description: php中文网 react 测试
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/tianqixin/www/reactApp/package.json:

{
  "name": "php-react-test",
  "version": "1.0.0",
  "description": "php中文网 react 测试",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

세 번째 단계, 종속 패키지 및 플러그인 추가

React를 사용하려면 먼저 React를 설치해야 합니다. --save 명령은 package.json 파일에 패키지를 추가하는 데 사용됩니다. 

$ npm install react --save
$ npm install react-dom --save

동시에 babel 플러그인

$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015

도 설치해야 합니다. 4단계. 파일 생성

다음으로 필요한 파일을 생성합니다.

$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js

5단계. 컴파일러, 서버, 로더 설정

webpack.config.js 파일을 열고 다음 코드를 추가합니다. 

 var config = {
   entry: './main.js',
	
   output: {
      path:'./',
      filename: 'index.js',
   },
	
   devServer: {
      inline: true,
      port: 7777
   },
	
   module: {
      loaders: [ {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel',
			
         query: {
            presets: ['es2015', 'react']
         }
      }]
   }
	
}

module.exports = config;

  • 항목: 패키징 항목 파일 main.js을 지정합니다.

  • 출력: 패키징 결과를 구성하고, 경로는 출력 폴더를 정의하며, 파일 이름은 패키징 결과 파일의 이름을 정의합니다.

  • devServer: 서버 포트 번호를 7777으로 설정하세요. 포트 뒤에 직접 설정할 수 있습니다.

  • 모듈: 모듈의 처리 논리를 정의합니다. 여기에서 로더를 사용하여 일부 일반 규칙뿐만 아니라 일련의 로더를 정의할 수 있습니다. 로드할 파일이 테스트의 일반 패턴과 일치하면 후속 로더가 호출되어 파일을 처리합니다. 이것이 바로 webpack이 강력한 이유입니다.

이제 package.json 파일을 열고 "scripts"에서 "test" "echo "Error: no test selected" &&exit 1"를 찾아 다음 코드로 바꿉니다. 

"start": "webpack-dev-server --hot"

package.json 파일의 내용은 다음과 같습니다. 

$ cat package.json 
{
  "name": "php-react-test",
  "version": "1.0.0",
  "description": "php中文网 react 测试",
  "main": "index.js",
  "scripts": {
	"start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  }
}

이제 npm start 명령을 사용하여 서비스를 시작할 수 있습니다. --hot 명령은 파일이 변경된 후 다시 로드하므로 변경 사항을 확인하기 위해 코드를 수정한 후 브라우저를 새로 고칠 필요가 없습니다.

6단계, index.html

div id = "app"을 애플리케이션의 루트 요소로 설정하고 index.js 스크립트 파일을 도입합니다. 

<!DOCTYPE html>
<html>

   <head>
      <meta charset = "UTF-8">
      <title>React App - php中文网(php.cn)</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

7단계, App.jsx 및 main.js

첫 번째 반응 구성 요소입니다. 다음 장에서 React 구성요소를 자세히 소개하겠습니다. 이 구성 요소는 Hello World!!!를 출력합니다.

App.jsx 파일 코드 

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!<br />
            欢迎来到php中文网学习！！！
         </div>
      );
   }
}

export default App;

구성 요소를 가져와 루트 요소인 App에 렌더링해야 브라우저에서 볼 수 있습니다.

main.js 파일 코드

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'))

참고:

구성 요소를 어떤 애플리케이션에서나 사용하려면 생성 후 export를 사용하여 내보내고 파일에서 import를 사용해야 합니다. 컴포넌트를 사용하여 가져옵니다.

8단계, 서비스 실행

위 구성을 완료한 후 서비스를 실행할 수 있습니다. 

$ npm start

브라우저를 통해 액세스 http://localhost:7777/, 출력 결과는 다음과 같습니다.

QQ截图20161019101041.png

전체 예제 다운로드

위 테스트 예제의 각 파일 코드 다운로드 주소: http://static.php.cn/download/reactApp.zip.