만드는 방법 reactjs 내가 외부 파일에서이 구성 요소를 실행하는 반응 응용 프로그램을 만들고 싶어 외부 파일

Question

에서 구성 요소를 호출하고 난 웹팩 나 등 같은 내 애플 리케이션에 어떤 번들을 사용하고 있지 않다 ... 또한

반작용 /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'; 

기타 수출 : 이제 우리는 Pies에 대한 기본 내보내기있어

`myCode.js` 

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

class Cake extends Component { /* code */ } 

default export Cake; 

, 그러나 우리는 또한이 export class (안 기본값)

기본값을 사용하여 중괄호로 가져올 수없는 경우 :

import { Pies } from './myCode' 

curlies의 값은 가져온 파일의 이름과 항상 일치해야합니다.

하지만 여전히 같은 일이 발생하는이 가능할 것 "./app.js"`에서

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