I'm getting a it confused here. In a VueJS project I'm using a dummy json data in the following way :
import data from './assets/data.json'
which i can than print to the screen, for example : {{Object.keys(data)}}
In this
question i find different answers, some claim you cant import json files, some claim you can
. common sense implies that i can import them since it is working in my project, now the question is:
is this some Webpack magic helping me to achieve this import or any other behavior taking place under the hood? or is ES6 actually allows me to import json as presented above?
Please go through,
How to import a json file in ecmascript 6?
Says,
ES6/ES2015 doesn't support loading JSON via the module import syntax
Related
I have seen this line of code before in React
import {Something} from "Somethingelse" then I've also seen this one import Something from "Somethingelse" what's the difference between the two and when and why would I use either? and also is it a good idea to skip javascript and learn react directly if you are already pretty familiar with another language like Java for example?
Yes there is a difference between this two ways of importing any component in react.
First way of importing
import Something from "Somethingelse"
you can use this when you are exporting any function as default like below.
export default Somethingelse
Second way of importing
import {Something} from "Somethingelse"
You can use the above syntax when you have exported any function as const like below.
export const Somethingelse
And for your second question.
I would recommend to at least learn basics of the JavaScript before jumping into React even if you know language like Java, Because JavaScript is quite different from Java.
The difference is related to how the module (the functions inside it) is exported. If we write export default someFunc then we can import it using import someFunc from someFile. But if instead we write export {someFunc} then we have to import it using import {someFunc} from someFile.
You should understand the fundamentals of JS, especially Prototypal inheritance. JS OOPS are somewhat different from OOPS of Java, so understanding them will definitely help, because props in ReactJS works on the concept of inheritance.
Importing via the ways you mentioned is dependent on exporting these files. To be accurate, when we use
export const default Something
we use
import Something from "Somethingelse"
,
and when we use
export const Something
we use
import {Something} from "Somethingelse"
. Here is the hint, in the second case we can use import {Anything as Something} from "Somethingelse"(and can use as Anything in your project!)
Regarding learning javascript before react, I consider, you should as js is the core of React or any js framework/library. But you can also skip (even though you cannot skip javascript base) advanced js if you think you should learn something soon
Would like to ask for some help I am currently using Tabulator (4.9) along with Vue. I am having trouble downloading/exporting my data to Excel. I have already included SheetJS on my project as stated from Tabulator's page.
The following gives me an error that the XLSX is not defined:
import 'xlsx/dist/xlsx.full.min.js'
this.tabulator.download('xlsx', 'data.xlsx')
But once I include the XLSX, then it tells me "Download Error - No such download type found":
import XLSX from 'xlsx/dist/xlsx.full.min.js'
this.tabulator.download(XLSX, 'data.xlsx')
Would really like to know if I am missing something.
Thanks.
Your first approach is correct, you should be calling the download function and passing in the xlsx string
this.tabulator.download('xlsx', 'data.xlsx');
The issue is that Tabulator is expecting to find the XLSX object on the window object (or global object if this is a node project) as that is where the library is put when pulled in from the CDN.
So in you case your import should be:
import XLSX from 'xlsx/dist/xlsx.full.min.js';
window.XLSX = XLSX;
I haven't tried using tabulator. You could look over its documentation again to see if you are missing something. Otherwise, I have used vue-json-csv. You can import it globally and call it anywhere you want to in your templates.
<DownloadCsv :data="exportData" name="export.csv">
<button class="mr-2">Export to csv</button>
</DownloadCsv>
It takes a data prop, which would be the json data set you wish to export to excel. And the name prop, this is going to be the name of the export file when it is generated.
Have a question. I'm currently trying to import a single column CSV and import it into an array via Javascript. I'm quite a noob programmer so to speak, at the moment, I've tried to modify the code for what I believe works for me as per https://www.webslesson.info/2017/04/csv-file-to-html-table-using-ajax-jquery.html, however have had no success. Just looking for suggestions as to how I can approach this task.
You can use jquery-csv library for converting CSV to array
I'm new to Typescript and after reading some related articles it seems that by using Typescript in React, propTypes definitions are no longer needed.
But by checking some of the most populars React Component Libraries projects
like Material-IU:
/packages/material-ui/src/Button/Button.js
/packages/material-ui/src/Button/Button.d.ts
or Semantic UI React
/src/elements/Button/Button.js
/src/elements/Button/Button.d.ts
or React Toolbox
/components/button/Button.js
/components/button/Button.d.ts
...it seems some big projects are using both.
So, i'm a bit confused about this. And i don't really get the purpose of these *.d.ts files
Why are they using both? What is the purpose of the *.d.ts files?
How does this fit in a react development workflow?
My actual idea about this this is that:
*.d.ts should contain the types for the component's props
typescript will launch compilation errors if some prop is receiving a wrong type of data
the React component definition can avoid defining the propTypes (as this is handled now by Typescript in a different file)
Is this correct?
Can anyone shed some light on this? :)
Thanks in advance!!
The TypeScript definition (.d.ts) files define the type information used by the TypeScript compiler, and in many IDEs these files are also used to provide feedback during development. Aside from the definitions provided by vendors, you can use interfaces when writing your React components in TypeScript. A common use case is to define the type of the props object.
One benefit of using a interface, as opposed to defining propTypes, is that this code disappears at runtime, so if you pass the right props you don't need to run any type checks in the compiled version of your app.
That said, there are situations where it is still helpful to check the type of props passed to a component at runtime. For example, maybe you are using data from an external API and wanted to make sure that the format is what you expected. In this case, it would make sense to use propTypes.
Also, as rightly pointed out in the comments, the propTypes are useful when the library is consumed by code written in JavaScript, which would use a compiled version of the code that would otherwise lack the type information.
Anyone know how to import backbone template in ES2015.
I saw an example from this site
import * as todosTemplate from 'text!templates/todos.html';
The main problem is 'text!', how can I setup this one without Require.js?
P.S. have no luck with handlebars and require-text in ES2015, only found solutions using require.js.
Remove the * and just state the variable name of your choice. Like the code below:
import rootTemplate from './templates/rootTemplate.hbs';