I've got a project which has an "old" javascript/php app. It contains dozen of json files for getting data from the database.
Besides that I'm going to migrate some modules to react but still want to use those json files for now. Is it possible to fetch the json files from the react app? Both apps are in the same repository.
Lets pretend you have this folder structure:
/
/LegacyApp
/LegacyApp/file.json
/NewApp/index.js
Then you can simply import the files from your new app via the require function:
// inside index.js
const data = require('../LegacyApp/file.json')
// Or newer ES6 Syntax
import data from '../LegacyApp/file.json'
That JSON-file will be imported as a JavaScript object.
Related
I'm trying to make an electron app that gets the file names of a directory in a repository. I just don't know how to do this with the api. I know there is a way, I just don't know how.
For example:
I want to get the file names in the src/ directory of a github repository using the api.
I use axios to make api requests.
Use Get repository content endpoint, documented here
Check out an example using Octokit
List Repository contents
View in Fusebit
// If you don't send the path property, by default will send the contents from the root level
const repoContent = await github.rest.repos.getContent({
owner: 'repo-owner',
repo: 'repo-name'
});
console.log('Files found at root level', repoContent.data.map((file) => file.name));
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.
How should I structure my Vue CLI project? I am unable to find any proper documentation regarding this.
Basically I have around 10 modules and each module has a js file associated with it.
Currently, I am putting all the pages written in my router.js in views directory and all the components in the components directory. I want to know where should I keep mine js files?
All the js api calls associated with every module
JS files containing all the constants related to every module??
Q1: Usually API calls are stored under a respective store if you are using Vuex. If not you can use define them as mixins and use where necessary. The mixins are the parts of the javascript code that are reused in different components. In a mixin you can put any component’s methods from Vue.js they will be merged with the ones of the component that uses it.
Q2: This can definitely go under mixins.
You can also have a util folder (optional) where it contains the functions that you use in components, such as regex value testing, constants, or filters.
Refer to this boilerplate if your project is mid-scale or large-scale.
create a service folder,create service.js -api call goes here(now all you need is to call it when ever you need it)
you have a store folder with store.js(index.js) inside store folder create modules folder
with you modules. inside store.js create modules:[user,event...]
basically that's it. edit your modules files event.js user.js.
you can add getters,mutations,state,actions. just dont forget export const namespaced = true so it`ll go to the global namespace
Is there a way to have intellisense in VSC work with json files imported via the require method in nodeJS?
var jsonObj = require('path/to/jsonFile.json')
I'd like for it to predict the properties of the json object imported from the file as I code.
Not possible in all instances, but when I'm creating JSON for configurations or other static data that could have been stored in a JSON file, I store it in a .js file and use the module.exports to expose it. This way the Intellisense picks it up and you get the auto-complete in VSC.
module.exports = {"data":{"foo":"bar"}}
I want to list all the files in a specific directory on the server where my react is running. fs was removed from reactJS so I can't use that (I tried and it errors out). I'm not looking to do a file tree just get a list of files and maybe some basic info such as create/edit date. Everything I find via npm is a tree that needs that supplied but doesn't pull it.
Try this
import * as fs from 'fs';
See this ticket.