ตอบสนองต่อการติดตั้ง
ตอบสนองสามารถดาวน์โหลดได้โดยตรงโดยใช้แพคเกจดาวน์โหลดยังมีตัวอย่างมากมายของการเรียนรู้
กวดวิชานี้จะใช้ตอบสนองรุ่น 0.14.7 คุณสามารถดูได้ที่เว็บไซต์อย่างเป็นทางการ http://facebook.github.io/react/ ดาวน์โหลดรุ่นล่าสุด
นอกจากนี้คุณยังสามารถใช้โดยตรงกวดวิชานี้ตอบสนองห้องสมุด CDN ที่อยู่ต่อไปนี้:
<script src="http://static.w3big.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.w3big.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.w3big.com/assets/react/browser.min.js"></script>
ตัวอย่าง
ตัวอย่างต่อไปนี้ของการส่งออกสวัสดีชาวโลก!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="http://static.w3big.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.w3big.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.w3big.com/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 ตอบสนอง-dom.min.js และ browser.min.js:
- react.min.js - ตอบสนองห้องสมุดหลัก
- ตอบสนอง-dom.min.js - ฟังก์ชั่นให้ DOM ที่เกี่ยวข้อง
- browser.min.js - สำหรับ JSX ไวยากรณ์เป็นไวยากรณ์ที่ใช้ JavaScript
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
รหัสข้างต้นหัวเรื่อง H1 ใส่ id = "เช่น" โหนด
หมายเหตุ:
ถ้าเราต้องการที่จะใช้ JSX ประเภทแอตทริบิวต์ <script> แท็กควรจะกำหนดให้ข้อความ / Babel
ตอบสนองโดยใช้ NPM
หากระบบของคุณไม่สนับสนุน Node.js และ NPM สามารถดูของเรา กวดวิชา Node.js
เราขอแนะนำให้ใช้ระบบ modular ใน CommonJS ตอบสนอง browserify หรือ webpack เช่นการกวดวิชานี้ใช้ webpack
ก่อนติดตั้งแพคเกจระดับโลก
$ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g
ถัดไปสร้างไดเรกทอรีราก
สร้างไดเรกทอรีรากไดเรกทอรีชื่อ: reactApp แล้วใช้ package.json NPM ไฟล์ init เริ่มต้นสร้าง:
$ mkdir reactApp $ cd reactApp/ $ npm init name: (reactApp) w3big-react-test version: (1.0.0) description: 本教程 react 测试 entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /Users/tianqixin/www/reactApp/package.json: { "name": "w3big-react-test", "version": "1.0.0", "description": "本教程 react 测试", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this ok? (yes)
ขั้นตอนที่สามคือการเพิ่มการอ้างอิงและปลั๊กอิน
เพราะเราต้องการที่จะใช้ตอบสนองดังนั้นเราจึงจำเป็นต้องติดตั้ง - บันทึกคำสั่งที่ใช้ในการเพิ่มแพคเกจให้ 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
ขั้นตอนที่สี่คือการสร้างไฟล์
ต่อไปเราจะสร้างไฟล์ที่จำเป็น:
$ touch index.html $ touch App.jsx $ touch main.js $ touch webpack.config.js
ขั้นตอนที่ห้าตั้งคอมไพเลอร์, เซิร์ฟเวอร์, รถ
เปิดไฟล์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 หา "สคริปต์"ในการทดสอบ "" "ก้อง \" ข้อผิดพลาด : ไม่มีการทดสอบระบุ \ "&& ทางออกที่ 1" เพื่อแทนที่ด้วยรหัสต่อไปนี้:
"start": "webpack-dev-server --hot"
เนื้อหาของแฟ้มPackage.json หลังจากการเปลี่ยนดังนี้
$ cat package.json { "name": "w3big-react-test", "version": "1.0.0", "description": "本教程 react 测试", "main": "index.js", "scripts": { "start": "webpack-dev-server --hot" }, "author": "", "license": "ISC", "dependencies": { "react": "^0.14.7", "react-dom": "^0.14.7" } }
ตอนนี้เราสามารถใช้คำสั่งเริ่มต้น NPM ที่จะเริ่มต้นการให้บริการคำสั่ง--hot จะโหลดไฟล์หลังจากที่การเปลี่ยนแปลงเพื่อให้เราไม่ต้องรีเฟรชเบราว์เซอร์ของคุณหลังจากการปรับเปลี่ยนรหัสจะสามารถที่จะเห็นการเปลี่ยนแปลง
ขั้นตอนที่หก, index.html
การตั้งค่าdiv id = "แอป" เป็นองค์ประกอบหลักของการใช้งานของเราและการแนะนำของไฟล์สคริปต์ index.js
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>React App - 本教程(w3big.com)</title> </head> <body> <div id = "app"></div> <script src = "index.js"></script> </body> </html>
ขั้นตอนที่เจ็ด App.jsx และ main.js
นี้เป็นองค์ประกอบแรกตอบสนอง บทต่อมาเราจะตอบสนองรายละเอียดส่วนประกอบ นี้จะส่งออกส่วนประกอบHello World !!!
รหัสไฟล์ App.jsx
import React from 'react'; class App extends React.Component { render() { return ( <div> Hello World!!!<br /> 欢迎来到本教程学习!!! </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'))
หมายเหตุ:
หากคุณต้องการองค์ประกอบที่สามารถนำมาใช้ในโปรแกรมใด ๆการส่งออกจะต้องมีการใช้งานของการส่งออกหลังจากที่มันถูกสร้างขึ้นโดยใช้ไฟล์องค์ประกอบโดยใช้การนำเข้าการนำเข้า
ขั้นตอนที่แปดบริการทำงาน
หลังจากเสร็จสิ้นการตั้งค่าข้างต้นเราสามารถเรียกใช้บริการ:
$ npm start
เบราว์เซอร์ที่http: // localhost: 7777 / ผลการส่งออกมีดังนี้
ดาวน์โหลดตัวอย่างที่สมบูรณ์
เพิ่มเติมกรณีทดสอบสำหรับแต่ละที่อยู่ไฟล์ดาวน์โหลด: http://static.w3big.com/download/reactApp.zip