how to make reactjs call Component from external file

Question

I want to make a react app to run this Component from external file and i am not using any bundle in my app like webpack or etc... and also

React/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;

and here it the Component code which i want it to be import and work in react app , basically is a html5 canvas i try to make it run in react app

canvas.js

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;

the both files is in the same folder

Answer 1

In your app.js you can say:

import BounceCircle from './canvas'

And then you can use it like any other component <BounceCircle />

Import from external files are like imports from node_modules. Just point to the right directory.

In the file you can see there's a default export. You can name default exports as you like in your app.js. So all these will work, and will return the same thing (BounceCircle):

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

Other exports like:

`myCode.js`

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

class Cake extends Component { /* code */ }

default export Cake;

Now we've got a default export for Pies, but we also have an export class (not a default)

Those not defaults can be imported by using curlies:

import { Pies } from './myCode'

The value in the curlies, should always match the name from the imported file.

But it would still be possible this, which result in the same thing:

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