i'm going to use react js and jsx file extensions,but when i save my code in my local,the jsx file detected as c/txt extension,and in my editor is detected same as well,why is that?
I'm using zorin os lite 16,ubuntu 20.04LTS,and geany code editor for my main editor.
THANK YOU
Related
My vscode only auto imports modules if the files they are contained in are opened in the editor. For example if I want to import <Component/> from Component.js, I have to open the Component.js file first in the IDE and only then auto suggestion 'finds' it and suggests it. Is this normal behavior?
I'm using Laravel 8 with Laravel-mix so that my JS assets are compiled with webpack.
I have imported gojs successfully by doing this:
npm i gojs
Then adding this to my bootstrap.js:
import * as go from 'gojs';
Then compiling using:
npm run dev
So far so good my app.js now includes the gojs code and I can run basic gojs samples on my pages.
However I cannot figure out how to include any gojs extensions.
I've tried adding an extension to my boostrap.js in all these different ways (separately not all at once):
import DataInspector from 'gojs/extensions/DataInspector.js';
import * as Inspector from 'gojs/extensions/DataInspector.js';
import { DataInspector } from 'gojs/extensionsTS/DataInspector';
require('gojs/extensions/DataInspector.js');
require('../../node_modules/gojs/extensions/DataInspector.js');
Most compile without error and when I check my app.js compiled javascript the DataInspector code appears to be included.
However when I add a sample script to my page that uses the Inspect I get error:
Uncaught ReferenceError: Inspector is not defined
So it appears the DataInspector extension has not been included. The only way I can get it to work is to directly add a script tag to the DataInspector.js file in my HTML. However I'd like to figure out how to properly import it with all my other assets.
It's best to copy extension files into your own directory to use them. They are provided as examples of how to extend the library, and should not be imported directly.
If you look at extension code, you'll see it carries this warning:
/*
* This is an extension and not part of the main GoJS library.
* Note that the API for this class may change with any version, even point releases.
* If you intend to use an extension in production, you should copy the code to your own source directory.
* Extensions can be found in the GoJS kit under the extensions or extensionsTS folders.
* See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
*/
Here is my folder structure
when i tried to run my react app it give me this error
Failed to compile.
./src/css/owl.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I tried google it and it says i need to create manual loader to load my html file. It is regarding to webpack but I don't know how and where I configure loader to load the owl.html file.
Short answer:
No, you can not simply convert your HTML/CSS/JS in to React JS through a plugin.
There is no need of webpack her, as it is already provided and packed by create-react-app, you can simple create a component of your page template provided.
Long Answer:
React project architecture says, One has to create a React JS component for every UI page/segment/section/widget. So for creating a page in react from the html file provided you simple has to crate a component file called Owl.js in the components folder.
In the Owl.js write the following:
import React from 'react';
export default () => {
return (
<React.Fragment>enter code here
// paste the code from your owl.html file. (everything that is written under <body>)
</React.Fragment>
)
}
Use this newly created component in the App.js you have by importing it into.
Also use the css by importing it simply in the Owl.js file, like this:
import '~you-path~/owl.css';
And finally to make all the JS written in owl.js you have to carefully integrate the functions, listeners and data you are using in the newly created component out of the return statement.
I hope this clears the confusion here.
enter image description here
Hi. I have problem with colouring .vue file syntax in my pyCharm. The version of pyCharm is 2018.1.4 . Vue plugin is intalled, settings for javascript language is ECMASript 6. Any idea what I'm doing wrong?
Make sure *.vue is a registered pattern for Vue.js Template:
I have a angular2 app written in typescript and when I try to run it in visual studio I get the error
Build:Module '../../services/company.service' was resolved to '<filepath>/company.service.js', but '--allowJs' is not set.
the line the error is occurring on looks like this:
import { CompanyService } from '../../services/company.service';
I have a ts file with the same name as the compiled js file, how do I get vs to resolve the imported file as a ts file instead of a js file?
I figured it out, this happened after I had rebuilt the project on "Release" so it was resolving the ts files to the release js files, I just moved the release folder so it wasn't in the projects directory anymore and it worked.