שלום אורח התחבר

תבנית לשילוב פקדי ריאקט ביישום Angular.JS

נושאים:יומיפיתוח צד-לקוח

הספריה ngReact מאפשרת להוסיף פקדי ריאקט יחסית בקלות ליישום Angular.JS (כן אנגולר1, הישן...) שלכם. התבנית הבאה יכולה לתת נקודת התחלה טובה לשימוש בה.

1מה נצטרך

הספריה ngReact יודעת להפוך כל React Component ל Angular Directive, לכן שיטת העבודה שלנו תהיה לטעון את ה React Component שאנחנו רוצים לשלב, להפוך אותו ל Angular Directive ואז לקרוא לו מתוך קוד ה HTML.

בשביל לשלב פקדי ריאקט ביישום אנגולר אנחנו:

  1. נצטרך להתקין Webpack ולהגדיר אותו כך שימיר את קבצי ה JSX לקבצי JS רגילים.

  2. לא כל קוד האנגולר צריך לעבור דרך Webpack, אבל כן נצטרך לפחות קובץ אחד מאנגולר שיישלח גם ל Webpack שבעצם "יטען" את כל ה React Components ויהפוך אותם ל Angular Directives.

  3. נצטרך לטעון את הספריה ngReact מקובץ ה HTML שלנו.

2הגדרות והתקנות

נתחיל עם ההתקנות. צרו קובץ package.json עם התוכן הבא:

{
  "name": "ngreact",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "react": "^16.8.0",
    "react-dom": "^16.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "expose-loader": "^0.7.5",
    "react-hot-loader": "^4.3.11",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

לאחר מכן הפעילו:

$ npm install

וזה יתקין את כל החבילות שאנחנו צריכים כדי להתחיל לעבוד.

אנחנו עדיין צריכים קובץ הגדרות בשביל Webpack. צרו קובץ בשם webpack.config.js ובו כתבו את התוכן הבא:

const webpack = require('webpack');

module.exports = {
  entry: './js/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            'presets': [
              '@babel/preset-env',
              '@babel/preset-react'
            ]
          }
        }        
      },
      {
        test: require.resolve('react'),
        use: [{
          loader: 'expose-loader',
          options: 'React'
        }]
      },      
      {
        test: require.resolve('react-dom'),
        use: [{
          loader: 'expose-loader',
          options: 'ReactDOM'
        }]
      }      
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
};

3שינויים בקוד

בקוד התוכנית אנחנו רוצים קודם כל ליצור את ה React Component בו נשתמש ביישום שלנו. אני הלכתי על יישום של מונה לחיצות שמציג כמה פעמים משתמש לחץ על כפתור. פקד ה React שאני רוצה לשלב פשוט מציג את מספר הלחיצות ונראה כך:

// file: js/indicator.js
import React from 'react';

export default function Indicator(props) {
  return (
    <p>You clicked {props.clicked} times</p>
  )
}

שמרתי אותו בתיקייה בשם js וקראתי לו indicator.js.

קובץ ה Controller הראשי של אנגולר שמור אצלי באותה תיקייה. לקובץ זה הוספתי את התלות בספריה ngReact:

var app = angular.module('myapp', ['react']);

וגם הוספתי שורה שהופכת את ה Indicator שלי ל Angular Directive:

app.directive('indicator', function(reactDirective) {
  return reactDirective(Indicator);
});

סך הכל הקובץ index.js נראה כך:

import Indicator from './indicator';
import ReactDOM from 'react-dom';

var app = angular.module('myapp', ['react']);
app.controller('main', MainCtrl);

app.directive('indicator', function(reactDirective) {
  return reactDirective(Indicator);
});

function MainCtrl() {
  var vm = this;
  vm.text = 'Hello Angular';

  vm.clicks = 0;

  vm.clicked = function() {
    vm.clicks++;
  };
}

הקובץ האחרון הוא index.html שטוען את כל קבצי ה JS וגם כולל את התבניות. הוא נראה כך:

<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8">
    <title>A Pen by  Ynon Perek</title>
  </head>

  <body>
    <div ng-app="myapp">
      <div ng-controller="main as vm">
        <h1 ng-bind="vm.text"></h1>
        <p>
        You clicked <span ng-bind="vm.clicks"></span> times
        </p>
        <button ng-click="vm.clicked()">Click Me</button>
        <indicator clicked="vm.clicks" />
      </div>
    </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js'></script>

    <script src="dist/bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngreact/0.5.2/ngReact.min.js"></script>
  </body>
</html>

השימוש ב React Component הוא שקוף לגמרי - הדבר הזה נראה בדיוק כמו Angular Directive רגיל. בזכות ngReact באופן אוטומטי כל פעם שיהיה שינוי בערך של vm.clicks באופן אוטומטי השינוי הזה יעבור ל React Component ונקבל render מחדש.

מעדיפים לקרוא מהטלגרם? בקרו אותנו ב:@tocodeil

או הזינו את כתובת המייל וקבלו את הפוסט היומי בכל בוקר אליכם לתיבה:


נהניתם מהפוסט? מוזמנים לשתף ולהגיב