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

01/04/2019

יומי

פוסט זה כולל טיפ קצר בנושא פיתוח Front End. אם אתם רוצים ללמוד יותר לעומק על פיתוח Front End מהבסיס ועד הנושאים המתקדמים תשמחו לשמוע שבניתי קורס וידאו מקיף בנושא זה הכולל מעל 50 שיעורי וידאו והמון תרגול מעשי.
למידע נוסף והצטרפות לקורס בקרו בדף קורס Front End באתר.

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

1. מה נצטרך

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

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

נצטרך להתקין Webpack ולהגדיר אותו כך שימיר את קבצי ה JSX לקבצי JS רגילים.
לא כל קוד האנגולר צריך לעבור דרך Webpack, אבל כן נצטרך לפחות קובץ אחד מאנגולר שיישלח גם ל Webpack שבעצם "יטען" את כל ה React Components ויהפוך אותם ל Angular Directives.
נצטרך לטעון את הספריה 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 מחדש.