作り方reactjsは、私は、外部ファイルからこのコンポーネントを実行するように反応するアプリを作りたい外部ファイル

Question

からコンポーネントを呼び出すと、私はWebPACKのか、などのように私のアプリで任意のバンドルを使用していない...とも

が反応します/app.js

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import BounceCircle from './canvas'; 

class App extends Component { 

    render() { 
    return (
     <div className="App"> 
     <Header/> 
     <Content/> 
     <Footer/> 
     <BounceCircle/> 
     </div> 
    ); 
    } 
} 

class Header extends Component { 
    render() { 
    return (
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h1>Hello World</h1> 
      <h4>hello to egypt</h4> 
      <h3>Welcome to React</h3> 
      <h4>hi</h4> 
     </div> 

    ); 
    } 
} 

class Content extends Component { 
    render() { 
    return (

      <p className="App-intro"> 
       To get started, edit <code>src/App.js</code> and save to reload. 
       </p> 

    ); 
    } 
} 

class Footer extends Component { 
    render() { 
    return ( 
      <h3>this the Footer</h3> 

    ); 
    } 
} 






export default App; 

、ここに私はそれを輸入することとで仕事をしたいアプリを反応させるコンポーネントのコードは、基本的に私はそれがで実行させようHTML5のキャンバスでは、アプリ

キャンバスを反応させます。 js

外部ファイルがあるから

import BounceCircle from './canvas' 

をそしてあなたが他のコンポーネントと同じように使用することができます<BounceCircle />

インポート：

class BounceCircle extends Component { 
    render() { 
    return (
      //this var = canvas is to call the canvas tag from html file using querySelector 
      canvas=document.querySelector('canvas'); 
      //this makes the width of the canvas the full width the screen 
      canvas.width = window.innerWidth; 
      //this makes the height of the canvas the full height the screen 
      canvas.height=window.innerHeight; 
      // this var = c is to call var canvas to start to work on it 
      var c=canvas.getContext("2d"); 


      var mouse = { 
       x:undefined, 
       y:undefined 
      } 

      var maxRadius = 40; 
      var colorArray=[ 
       '#FF595E', 
       '#33032F', 
       '#313E50', 
       '#0E7C7B', 
       '#87BCDE', 
      ]; 
      window.addEventListener('mousemove', 
       function(event){ 
        mouse.x=event.x; 
        mouse.y=event.y; 
      }) 

      window.addEventListener('resize',function() 
      { 
       //this makes the width of the canvas the full width the screen 
       canvas.width = window.innerWidth; 
      //this makes the height of the canvas the full height the screen 
       canvas.height=window.innerHeight; 

       init(); 
      }) 
      function Circle(x,y,dx,dy,radius){ 
       this.x = x; 
       this.y = y; 
       this.dx= dx; 
       this.dy= dy; 
       this.radius=radius; 
       this.minRadius=radius; 
       this.color=colorArray[Math.floor(Math.random()*colorArray.length)]; 
       this.draw = function() 
       { 

        c.beginPath(); 
        c.arc(this.x,this.y,this.radius,0,Math.PI * 2,false); 
        c.fillStyle=this.color; 
        c.strokeStyle=this.color; 
        c.fill(); 
       } 
       this.update = function(){ 
        if (this.x + this.radius> innerWidth || this.x-this.radius < 0) { 
       this.dx = -this.dx ; 
      } 

      if (this.y + this.radius> innerHeight || this.y-this.radius < 0) { 
       this.dy = -this.dy ; 
      } 
       this.x += this.dx; 
       this.y += this.dy; 

       //interactivity 
       if (mouse.x - this.x <50 && mouse.x-this.x>-50 && mouse.y - this.y <50 && mouse.y-this.y>-50) { 
        if (this.radius<maxRadius) { 
         this.radius+= 1; 
        } 

       } else if (this.radius>this.minRadius) { 
        this.radius-= 1; 
       } 
       this.draw(); 
       } 
      } 


      var circleArray=[]; 
       for (var i = 0; i < 500; i++) 
      { 
       var radius=Math.random() * 3 + 1; 
       var x =Math.random()*innerWidth; 
       var y = Math.random()*innerHeight; 
       var dx= (Math.random() - 0.5)*16; 
       var dy= (Math.random() - 0.5)*16; 


       circleArray.push(new Circle(x,y,dx,dy,radius)); 

      } 

      function init() 
      { 
      circleArray=[]; 

      } 


      function animate(){ 
       requestAnimationFrame(animate); 
       c.clearRect(0,0,innerWidth,innerHeight); 

      for (var i = 0; i < circleArray.length; i++) 
      { 
       circleArray[i].update(); 
      } 

      } 

      animate(); 



    ); 
    } 
} 

export default BounceCircle; 

両方のファイルが同じフォルダにapp.jsあなたが言うことができるで

Answer 1

ですnode_modulesからのインポートのようなものです。ちょうど正しいディレクトリを指してください。

ファイルには、default exportがあります。 app.jsに好きなようにdefault exportsという名前を付けることができます。だから、これらすべてが動作します、と同じこと（BounceCircle）を返します：よう

import Cheese from './canvas'; 
import Canvas from './canvas'; 
import MyThingy from './canvas'; 

その他の輸出：

`myCode.js` 

export class Pies extends Component { /* code */ } 

class Cake extends Component { /* code */ } 

default export Cake; 

は、今、私たちはPiesのデフォルトの輸出を持っているが、我々はまた、持っていますexport class（デフォルトではない）

ものではないデフォルトがカーリーを使用してインポートすることができます。

import { Pies } from './myCode' 

curliesの値は、インポートされたファイルの名前と常に一致する必要があります。

しかし、それはまだ同じことにつながるおり、このことは可能であろう：

import Cake, { Pies } from './myCode' 
import ICanUseEverythingHere, { Pies } from './myCode'