Develop Reference

why my react native become .tsx instead .js

so after installing react native using npx react-native init MyProject the project is running and open in emulator but the app file is not app.js instead app.tsx,
file strcuture
The question is i am new to react native and many tutorial i see is havgin App.js file, and the code in app.js is different between js and tsx at least that's what i see, or is it just the same if i follow tutorial like folder structure, syntax and everything.

That's because of this
New projects created by the React Native CLI or popular templates like Ignite will use TypeScript by default.
Read Using JavaScript Instead of TypeScript
You can just rename your tsx to jsx

Well, I had the same concerrns earlier today while working on the current version 0.71. This version does not create a App.js file. What I did was- I created a file App.jsx and added this code:
import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
const hello = () => {
return (
<View>
<Text>App</Text>
</View>
)
}
export default hello
const styles = StyleSheet.create({})
it automatically renders the code in it instead of the default App.tsx file
You can write your JavaScript code in the Ap.jsx file

Autocomplete feature when using Babylon.js with Vue.js in VSCode (no typescript)

I've created Vue.js 3 project, using Vite.js (no typescript).
My main.js file contains following contents:
import { createApp } from 'vue';
import App from './App.vue';
import * as BABYLON from 'babylonjs';
const app = createApp(App);
app.config.globalProperties.$BABYLON = BABYLON;
app.mount('#app');
My question is: how can I force VSCode to show me available babylon.js methods when I start writing this.$BABYLON. ?
I've already tried adding /// <reference path="../node_modules/babylonjs/babylon.module.d.ts" /> on top of the file, putting babylon.d.js in the root of the project (but as I understand that won't work until I use typescript?) and also tried with installing #types/babylon package via npm.
I would like to keep the project non-typescript and enable this autocomplete feature - unfortunately I've also couldn't find any plugin for vscode that would solve this issue.

Cant import Vue library from Javascript file

I have exported a Vue component library targeted as a library. But trying to import it does not work. I get the error Cannot read property extend of undefined.
It happens on the line where it tries to export Vuetify colorable. So one way to fix this may be exporting it without Vuetify and somehow use it as a dependency instead.
I CANNOT export it as an npm module so do not suggest that.
My build script:
"build-bundle": "vue-cli-service build --target lib --name test-component-library src/index2.js",
My index2.js:
import TestComponent from './components/TestComponent/TestComponent' // Expansionheader
const FirstLibrary = {
install (Vue) {
Vue.component('test-component', TestComponent);
}
};
// Automatic installation if Vue has been added to the global scope.
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(FirstLibrary)
}
export default FirstLibrary;
Import is in index.html like:
<script src="test-component-library.umd.js"></script>
I tried both using the common and the umd build files. Both of them give errors. Can anyone help me resolve this? Or know a way to export the library without Vuetify?
Thank you in advance

Angular import external javascript file, getting no exported member and compile errors

I am writing an angular component and got a open source module working with npm install. Now I made some some changes and want to import the javascript file like so
import { ModuleName } from './../../ModuleFolder/ModuleName';
When I place the cursor above the ModuleName inside the bracket, I see the highlighted red error saying Module has not export member 'ModuleName';
In my ts code, I have referenced the Module like so
object: ModuleName; which is also complaining.
I google and the post says using npm install but I don't want to add this module to my node_module list. I am moving the folder out to make my customization.
I also tried the following but it is not working
import './../../ModuleName.bundle.min.js';
I am wondering does the name of the Module needs to be registered somewhere to be able to reference it in my component?
Thanks for any help.

Use 'declare' after the import statements
declare const _moduleName;
For example:
I am using Swiper.js library using cdn. In my angular component, I refer it using a declare keyword.
declare const Swiper;
var mySwiper = new Swiper('.swiper-container', { /* ... */ });

I got external libraries working in Angular by following the following links
https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af

Import external Javascript libraries installed via npm in Meteor 1.3

I want to use the OpenSeadragon library in my Meteor app. As Meteor 1.3 provides support for npm modules, I have installed it via npm using meteor npm install openseadragon.
But now I am not sure how to user it. The OpenSeadragon docs only provides an example using the script tag.
The meteor docs tell us to use import like import moment from 'moment';. But how do I import openseadragon as I am pretty sure it doesn't use ES6 modules and doesn't export anything.
How can I use it using the npm import without loading the openseadragon.js as global for whole app?

The project's (poorly documented) API page states that
OpenSeadragon will also return an AMD module when required with a loader like Require.js.
Therefore, inside a client script, you can simply
import 'openseadragon'; // load globally
and it should give you the module constructor
Now, depending on what you are using, you may initialize your container from that constructor. For React container, this would look something like this :
import React, { Component } from 'react';
import { Random } from 'meteor/random';
import 'openseadragon'; // OpenSeadragon on global scope
export default class OpenSeedragonComponent extends Component {
constructor(props) {
super(props);
this.state = {
options: {
id: Random.id(), // container unique name
// other options here...
}
};
}
componentDidMount() {
this.initialiseWidgets();
}
componentDidUpdate() {
this.initialiseWidgets();
}
initialiseWidgets() {
this.viewer = OpenSeadragon(this.state.options);
}
render() {
return (
<div id={ this.state.options.id }
width={ this.props.width || '800px' }
height={ this.props.height || '600px' }
>
</div>
);
}
};
Note: at the moment of this writing, you will get an error when loading the .map file. Just ignore it, or open an issue with the project maintainer so he properly integrate the project with Meteor. Perhaps someone will write a react / meteor package wrapper for it...

A JS lib doesn't have to specifically use ES6 export keyword to expose symbols, as a matter of fact npm modules are still using CommonJS module.exports in their vast majority because even though package authors write their code in ES6 they publish them to npm using Babel.
In this specific case, you need to globally import the OpenSeadragon lib using import 'openseadragon'; somewhere in your client/ folder.
Then it will be available on window.OpenSeadragon.

Since the nice Yanick Rochon's answer does not seem to work in your case, note that you should still be able to load your library the "old fashion" way, using the [project_root]/client/compatibility/ special folder.
Any library in that folder will not be loaded in an independent scope by Meteor, but rather loaded "as is" like if it were through a classic <script> tag.
Then your OpenSeadragon object should become available on global scope.
As a side note, if you need simple image navigation and not the OpenSeadragon advanced features, you might be interested in trying Leaflet. It is lighter-weight but very stable and well maintained.