# Babylonjs and React in Javascript

**URL:** <https://forum.babylonjs.com/t/babylonjs-and-react-in-javascript/5550>\
**Category:** Questions\
**Created:** [September 10, 2019, 8:19am UTC](https://forum.babylonjs.com/t/babylonjs-and-react-in-javascript/5550 "2019-09-10T08:19:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kai\_Jessen](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kai_jessen/32/4340_2.png) [@Kai\_Jessen](https://forum.babylonjs.com/u/Kai_Jessen)\
**Post date:** [September 10, 2019, 8:19am UTC](https://forum.babylonjs.com/t/babylonjs-and-react-in-javascript/5550/1 "2019-09-10T08:19:01Z")

</div>

Greetings,

I recently started using Babylonjs and wanted to combine it with React.  
I found this setup for it: [How to use Babylon.js with ReactJS - Babylon.js Documentation](https://doc.babylonjs.com/resources/babylonjs_and_reactjs)

My problem is, that I don’t want to use TypeScript and “This is a TypeScript example, so for JavaScript just remove the data types.” isn’t very helpful for a beginner like me…

Does someone have the JavaScrip version and could write it to me? (+add it to the tutorial in case someone runs into the same problem as me)

Would really appreciate any help.

---

<div class="post-metadata">

**Author:** ![Kai\_Jessen](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kai_jessen/32/4340_2.png) [@Kai\_Jessen](https://forum.babylonjs.com/u/Kai_Jessen)\
**Post date:** [September 10, 2019, 8:28am UTC](https://forum.babylonjs.com/t/babylonjs-and-react-in-javascript/5550/2 "2019-09-10T08:28:33Z")

</div>

Thats how I tried to make it work btw:

import \* as BABYLON from ‘babylonjs’;

export {  
engine,  
scene,  
canvas  
};

export {  
engineOptions,  
adaptToDeviceRatio,  
onSceneMount,  
width,  
height  
};

export default {

```
scene: BABYLON.Scene,
engine: BABYLON.Engine,
canvas: HTMLCanvasElement,

onResizeWindow() {
    if (this.engine) {
        this.engine.resize();
    }
},

componentDidMount() {
    this.engine = new BABYLON.Engine(
        this.canvas,
        true,
        this.props.engineOptions,
        this.props.adaptToDeviceRatio
    );

    let scene = new BABYLON.Scene(this.engine);
    this.scene = scene;

    if (typeof this.props.onSceneMount === 'function') {
        this.props.onSceneMount({
            scene,
            engine: this.engine,
            canvas: this.canvas
        });
    } else {
        console.error('onSceneMount function not available');
    }

    // Resize the babylon engine when the window is resized
    window.addEventListener('resize', this.onResizeWindow);
},

componentWillUnmount() {
    window.removeEventListener('resize', this.onResizeWindow);
},

onCanvasLoaded(c) {
    if (c !== null) {
        this.canvas = c;
    }
},

render() {
    // 'rest' can contain additional properties that you can flow through to canvas:
    // (id, className, etc.)
    let { width, height, rest } = this.props;

    let opts;

    if (width !== undefined && height !== undefined) {
        opts.width = width;
        opts.height = height;
    }

    return (
        <canvas
            {...opts}
            ref={this.onCanvasLoaded}
        />
    );
}

```

}

And:

import \* as React from ‘react’;  
import \* as BABYLON from ‘babylonjs’;  
import BabylonScene from ‘./babylon.js’; // import the component above linking to file we just created.

class PageWithScene extends React.Component{  
onSceneMount(e) {  
const { canvas, scene, engine } = e;

```
    // This creates and positions a free camera (non-mesh)
    let camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    let light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

    // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
    let sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

    // Move the sphere upward 1/2 its height
    sphere.position.y = 1;

    // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
    let ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);

    engine.runRenderLoop(() => {
        if (scene) {
            scene.render();
        }
    });
}

render() {               
    return (
        <div>
            <BabylonScene onSceneMount={this.onSceneMount} />
        </div>
    );
}

```

}

---

<div class="post-metadata">

**Author:** ![wulf11](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wulf11/32/2196_2.png) [@wulf11](https://forum.babylonjs.com/u/wulf11)\
**Post date:** [September 10, 2019, 9:07am UTC](https://forum.babylonjs.com/t/babylonjs-and-react-in-javascript/5550/3 "2019-09-10T09:07:34Z")

</div>

Hi @Kai_Jessen and welcome to the forum!🙂

DataTypes in TypeScript are declared like this:  
`var myText: string = "bla";`

While JavaScipt ist just:

`var myText = "bla";`

You may take a look at the PlayGround on the TypeScript website -\> [TypeScript playground](https://www.typescriptlang.org/play/index.html) in which you can convert Ts into Js.

---

<div class="post-metadata">

**Author:** ![Kai\_Jessen](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kai_jessen/32/4340_2.png) [@Kai\_Jessen](https://forum.babylonjs.com/u/Kai_Jessen)\
**Post date:** [September 10, 2019, 9:18am UTC](https://forum.babylonjs.com/t/babylonjs-and-react-in-javascript/5550/4 "2019-09-10T09:18:53Z")

</div>

Hello @wulf11,

My compiler (Visual Studio Code) still complains about unreachable code and unexpected tokens, but I can perhaps use some of the converted code to help me out.  
I will try to build on that.

Not a solution (would have been too nice to be resolved in one go, wouldn’t it?), but still thank you for the fast answer ^^

---

<div class="post-metadata">

**Author:** ![wulf11](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wulf11/32/2196_2.png) [@wulf11](https://forum.babylonjs.com/u/wulf11)\
**Post date:** [September 10, 2019, 10:04am UTC](https://forum.babylonjs.com/t/babylonjs-and-react-in-javascript/5550/5 "2019-09-10T10:04:55Z")

</div>

@Kai_Jessen sorry for the “short” answere, can’t provide any code now because I just have lunch break at work 😅

just another short hint: did you checkout the github example? I think it’s compiled in Js

> **[blurymind/babylon-react-electron-app](https://github.com/blurymind/babylon-react-electron-app)**
>
> boilerplate to create react+babylonjs apps that can also run inside electron - blurymind/babylon-react-electron-app

---

<div class="post-metadata">

**Author:** ![Kai\_Jessen](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kai_jessen/32/4340_2.png) [@Kai\_Jessen](https://forum.babylonjs.com/u/Kai_Jessen)\
**Post date:** [September 10, 2019, 10:13am UTC](https://forum.babylonjs.com/t/babylonjs-and-react-in-javascript/5550/6 "2019-09-10T10:13:43Z")

</div>

@wulf11 Oh, thx again!

Sry to have bothered you -.-  
A senior of mine just helped me and this code is working for me (there may still be things missing, but it works):

import React from ‘react’;  
import PropTypes from ‘prop-types’;  
import \* as BABYLON from ‘babylonjs’;

class Scene extends React.Component {

```
componentDidMount() {
    this.engine = new BABYLON.Engine(
        this.canvas,
        true,
        this.props.engineOptions,
        this.props.adaptToDeviceRatio
    );

    let scene = new BABYLON.Scene(this.engine);
    this.scene = scene;

    if (typeof this.props.onSceneMount === 'function') {
        this.props.onSceneMount({
            scene,
            engine: this.engine,
            canvas: this.canvas
        });
    } else {
        console.error('onSceneMount function not available');
    }

    // Resize the babylon engine when the window is resized
    window.addEventListener('resize', this.onResizeWindow.bind(this));
}

componentWillUnmount() {
    window.removeEventListener('resize', this.onResizeWindow.bind(this));
}

onResizeWindow() {
    if (this.engine) {
        this.engine.resize();
    }
}

onCanvasLoaded(c) {
    if (c !== null) {
        this.canvas = c;
    }
}

render() {
    // 'rest' can contain additional properties that you can flow through to canvas:
    // (id, className, etc.)
    let { width, height } = this.props;

    let opts = {};

    if (width !== undefined && height !== undefined) {
        opts.width = width;
        opts.height = height;
    }

    return (
        <canvas
            {...opts}
            ref={this.onCanvasLoaded.bind(this)} />
    );
}

```

}

Scene.propTypes = {  
width: PropTypes.number,  
height: PropTypes.number,  
onSceneMount: PropTypes.func,  
engineOptions: PropTypes.object,  
adaptToDeviceRatio: PropTypes.bool  
};

export default Scene;

import React from ‘react’;  
import PropTypes from ‘prop-types’;  
import \* as BABYLON from ‘babylonjs’;

class Scene extends React.Component {

```
componentDidMount() {
    this.engine = new BABYLON.Engine(
        this.canvas,
        true,
        this.props.engineOptions,
        this.props.adaptToDeviceRatio
    );

    let scene = new BABYLON.Scene(this.engine);
    this.scene = scene;

    if (typeof this.props.onSceneMount === 'function') {
        this.props.onSceneMount({
            scene,
            engine: this.engine,
            canvas: this.canvas
        });
    } else {
        console.error('onSceneMount function not available');
    }

    // Resize the babylon engine when the window is resized
    window.addEventListener('resize', this.onResizeWindow.bind(this));
}

componentWillUnmount() {
    window.removeEventListener('resize', this.onResizeWindow.bind(this));
}

onResizeWindow() {
    if (this.engine) {
        this.engine.resize();
    }
}

onCanvasLoaded(c) {
    if (c !== null) {
        this.canvas = c;
    }
}

render() {
    // 'rest' can contain additional properties that you can flow through to canvas:
    // (id, className, etc.)
    let { width, height } = this.props;

    let opts = {};

    if (width !== undefined && height !== undefined) {
        opts.width = width;
        opts.height = height;
    }

    return (
        <canvas
            {...opts}
            ref={this.onCanvasLoaded.bind(this)} />
    );
}

```

}

Scene.propTypes = {  
width: PropTypes.number,  
height: PropTypes.number,  
onSceneMount: PropTypes.func,  
engineOptions: PropTypes.object,  
adaptToDeviceRatio: PropTypes.bool  
};

export default Scene;

---

<div class="post-metadata">

**Author:** ![frastlin](https://avatars.discourse-cdn.com/v4/letter/f/a8b319/32.png) [@frastlin](https://forum.babylonjs.com/u/frastlin)\
**Post date:** [September 11, 2019, 9:44pm UTC](https://forum.babylonjs.com/t/babylonjs-and-react-in-javascript/5550/7 "2019-09-11T21:44:36Z")

</div>

It would really help if this code was put into the using react with Babylon page!