how to Include createjs library into reactjs project - javascript

Hi I am creating an app on reactjs, which is canvas based, It require Createjs library, I am new for Reactjs I am not getting perfect idea how do this so I tried 2 ways one is using NPM install and other one is I kept my js into one folder and tries to import from there but nothing works for me, here my code
way 1 with npm install,
import createjs from 'createjs';
way 2 import downloaded js file,
import createjs from '../assets/js/createjsmin';
randomly I tried
import * as createjs from '../assets/js/createjsmin';
but nothing works for me

I add relative path to index.html and got Createjs library code into componentWillMount() using window.createjs, dn't know but I feel it can work to add all ramdom libraries in react.

So I made it work by installing this specific dependency
"#createjs/easeljs": "^2.0.0-beta.4",
And In my Component file I am importing them like this
import { Stage, Shape, TraceShape } from '#createjs/easeljs';

Related

Why is my installaton of ThreeJS inside of laravel not working?

First of all I know Laravel is a PHP framework and has nothing to do with the frontend(JavaScript) of my application. BUT laravel provides the possibility of using webpack which if I got things right is for node modules and other javascript stuff..
What I've done so far:
Installed ThreeJS with command:
npm install three
than executed
npm run dev
After that I included the Libary in my app.js file in the resources folder of Laravel like this:
var THREE = require('three');
(I tried including it whitout assinging it to a variable but that seemed not to work so I just did what some google research told me)
Again I ran npm run dev and the Libary was included inside my packed app.js in the public/js/ path of my project. Everything seems to be fine. I included the app.js file inside of my view and also set the script attribute type to module. But now when I try to import threejs via
import * as THREE from 'three';
inside my view it says that the module cannot be found. I know I could just copy the contents of ThreeJS inside the node_modules folder to my public path JS folder but I wanted to keep it as a node module. Any Advise?
I'm feeling like super stupid right now but adding a window.THREE instead of var three fixed the issue somehow.. Thanks for your help and time anyway!
Before you can instantiate Three.Js you have to import the library:
In your resources\js\app.js
import * as THREE from 'three';
const scene = new THREE.Scene();
However, it's recommended to create a instance in the component that actually requires it unless you need it globally.

Trying to add mark.js into the svelte

I am beginner with javascript's world and svelte. And I am trying to import an external library into the svelte app that can highlight words.
However, I am running out the ideas. For example, I am trying to utilize:
import { Mark } from './mark.js';
But it shows the following error:
'Mark' is not exported by src\routes\mark.js, imported by src\routes\page.svelte
In my react app import Mark from 'mark.js'; works fine after installing with yarn

React Native how to add index.android.js manually?

I am new to React Native, I'm following a video tutorial for beginners. I'm developing on windows 10 and using React Native version 0.49.1 . In the tutorial I'm following there are two index files: index.android.js & index.ios.js.
As I understand those file are untied now to index.js file,
I got it from this question that was asked.
Nevertheless, I still want to work with two separate index files, but I don't know how to do so - do I have to delete App.js file and index.js files?
And if so, what should be the content of index.android.js & ios files?
I would appreciate an explanation or a quick guide on how to do it.
Thanks in advance :)
For projects created with react-native init, an index.js file is still generated, and looks something like this initially:
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('YourProjectName', () => App);
Manually adding App.ios.js and App.android.js in the same directory will allow you to include unique code for each platform, as it follows the pattern for platform-specific extensions. However, it won't be enough to have either one or the other. You need to include both otherwise the code splitting won't take effect (and will default to whatever is present in App.js).
So to answer your question, yes you need to delete App.js and replace it with android.App.js and ios.App.js. Then restart the React Native packager terminal window for your simulator or device to detect the change.

How can I import gl-matrix in a ReactJS project?

I have just tried using ReactJS recently, and I came across and played with this project which import JS modules via syntax like this:
import Particle from './Particle'
I wished to port the project to use gl-matrix as a practice to get familiar myself with this framework, but now I'm unsure how I should proceed. Should I be able to require as suggested on this page, or there is some way to import gl-matrix?
I believe you can just require it like usual:
var glm = require('gl-matrix');
Of course, make sure you've run
npm install --save gl-matrix
or have gl-matrix as a dependency in your package.json. If that doesn't work, try just importing the script directly in your index.html:
<script src="gl-matrix-min.js"></script>
Then you should be good.

import poly fill in TypeScript

Working on my first TypeScript project and I am using the fetch api but I need to use a poly fill for the other browsers out there. I would like to use Whatwg-fetch from Github and I have installed the module with NPM and I have the typings file from Definitely Typed.
When the code in compiled fetch poly fill will not be included and I am not sure how to add it as any time I import Typescript errors.
I am using Grunt, Browserify, TypeScript and React.
I have tried to import with
import {fetch} from 'whatwg-fetch';
and
import fetch = require('whatwg-fetch');
The definitions are in my main tsd.d.ts file that is included on the page.
Thanks for any help or directions.

Categories

Resources