رد فعل التثبيت

رد فعل يمكن تحميلها مباشرة باستخدام يوفر حزمة التنزيل أيضا أمثلة كثيرة للتعلم.

يستخدم هذا البرنامج التعليمي تتفاعل نسخة غير 0.14.7، يمكنك على الموقع الرسمي http://facebook.github.io/react/ تحميل أحدث إصدار.

يمكنك أيضا استخدام هذا البرنامج التعليمي المباشر يردون مكتبة كندي، على العنوان التالي:

<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 - توفير وظائف ذات الصلة دوم
browser.min.js - لJSX جملة إلى جملة جافا سكريبت

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

رمز أعلاه عنوان H1، إدراج معرف = "المثال" العقدة.

ملاحظة:
إذا نحن بحاجة إلى استخدام JSX، ونوع السمة <script> يجب تعيين كلمة دلالية لنص / بابل.

الرد باستخدام الآلية الوقائية الوطنية

إذا لا يدعم نظامك نود.جي إس وقائية وطنية يمكن الرجوع إلى البرنامج التعليمي نود.جي إس .

من المستحسن استخدام نظام وحدات في CommonJS رد فعل، مثل browserify أو webpack، يستخدم هذا البرنامج التعليمي webpack.

أولا، قم بتثبيت حزمة العالمية

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

بعد ذلك، إنشاء الدليل الجذر

إنشاء الدليل الجذر، الدليل اسمه: reactApp، ثم استخدم package.json الآلية الوقائية الوطنية ملف الحرف الأول التهيئة ولدت:

$ 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

وفي الوقت نفسه لدينا لتثبيت بعضالمكونات بابل

$ 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"
  }
}

الآن يمكننا استخدامالآلية الوقائية الوطنية الأمر startلبدء الخدمة. سوف قيادة--hot إعادة تحميل بعد التغييرات ملف، بحيث أننا لسنا بحاجة إلى تحديث المتصفح بعد تعديل ورمز يكون قادرا على رؤية تغيير.

الخطوة السادسة، index.html و

وضعشعبة معرف = "التطبيق" باعتبارها العنصر الجذر من طلباتنا، وإدخال الملف النصي 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

هذا هو العنصر الأول رد فعل. فصل لاحق سوف نقوم التفاصيل يردون المكونات. إرادة هذا عنصر الانتاجمرحبا العالم !!!.

كود ملف App.jsx

import React from 'react';

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

export default 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: // المضيف المحلي: 7777 /، نتائج الإخراج هي كما يلي:

تحميل المثال الكامل

حالات الاختبار عن كل ملف التحميل عنوان: http://static.w3big.com/download/reactApp.zip .

السابق: رد فعل تعليمي

المقبل: تتفاعل JSX

React مسار