Is it possible e.g. using a plugin to navigate to a react component in vscode by (right-)clicking the component in the browser?
The tricky part is that the js your browser reads is already past compilation by either CRA build script or WebPack hence it's difficult to map it back to the raw code in vscode.
Related
I am Using vue 3 with CLI Build tool. Going to import my component on .net page.
I need to check my components on browser without using a router library. Actually it was stand alone components
Is there any way. In Vue 2 i have used gulp build tool and fractal tools for checking my components in broswer. After migrate to vue-3, i can't find solutions for that.
If you route the page with Java or .Net, Just create a route page with .Net and import the component into your new page. Hope this will work
if you just need to test a component and your vuejs project is starting rely on jsp or .net. just make a new route and import the component into the route page you make. you could see the way in vuejs.org quick start part. https://vuejs.org/guide/quick-start.html#without-build-tools[enter image description here]1
I want to generate a react app in the browser based on certain variables that can be set in the site that would generate the react app. I looked around and haven't really found such a use case. The only solution I can think of is to generate it from a template without JSX so I can avoid the need of compiling it. Ideally I'd like to be able to download a "development" and a "build" version as well. Even directions where I should look are appreciated.
I wanted to test flow in my React Native project. I ran flow and found that it had no effect on Android files. I found the below given code in .flowconfig:
[ignore]
# We fork some components by platform.
.*/*.web.js
.*/*.android.js
Why did the React Native team ignore these files? I was not able find much information about the same else where. I know that I can make edits and flow would start considering android files as well, but I am not sure if it'd be right. For example, this is what fabergua has commented on a issue Flow doesn't recognize platform-specific react-native files related to it:
#mhollweck : React Native's default .flowconfig is set up to ignore
all .android.js files. You can work around this by changing
-./[.]android.js to ./node_modules/./*[.]android.js in the .flowconfig of your project.
But, should we go ahead with such workaround? Wouldn't it mess with the project when we upgrade it via react-native-git-upgrade?
I've always thought that they ignore Android by default because oftentimes you would prefer Flow to consistently operate on a particular platform's modules, and iOS was the original platform for React Native. Say you try to "jump to definition" for a particular function defined in both myFunction.ios.js and myFunction.android.js. With *.android.js ignored, Flow will consistently jump you to the *.ios.js files. So if your app is primarily focused on Android, I'd switch that ignore to *.ios.js.
*.android.js files are ignored by default to choose a platform arbitrarily, but there is also need to run flow in the following way:
[ignore]
; We fork some components by platform
.*/*[.]ios.js
...
[options]
module.file_ext=.native.js
module.file_ext=.android.js
module.file_ext=.js
I am learning React and I'm running it using create-react-app, which allows me to edit text in a file named App.js and as I save any changes in that file, the webpage with the address http://localhost:3000/ in browser automatically updates without reloading. Normally, while making html/plain js files, i need to reload the page. So how does it dynamically update itself?
There is a concept of Hot Reloading. The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. It leverages HMR and without reloading the page, replaces changed components in-place, preserving state. That means that, your change will be visible in about half a second; if it was a dialog, you wouldn't need to re-open it, your text inputs remain filled, etc. In short, it's a massive boon to iterative development where you spend much less time waiting for your app to reload. You can find more details here
The cli which you are using uses webpack to achieve this. Webpack is a module bundler it creates a bundle file from all your js/ts/jsx/tsx files which you embed into your index.html file.To achieve live reloading webpack uses webpack-dev-server(a small node.js express server).You can cofigure your webpack to watch for changes on your file and webpack will update your bundle file whenever your code is changed. You can learn more about how it does here.
All the configurations for webpack are written in webpack.config file.You can learn more about webpack here.You can also follow this link
This is actually not a standalone thing.
This happen because react use webpack dev server which reload package if you make any changes.
As if you want to do same , you need to setup a local server and always make editing in same server.
browserSync is also a option but you need to use nodejs then
does ReactJS support some plugin loading at runtime?
I have developed a client app based on ReactJS. It should be possible for other users of my software to extend the Web UI by writing custom extension.
My ReactJS Base application is already transpiled (webpack + babel) to a build.js file.
Other user should create there own .js file which are loaded by the browser separately. At runtime browser should check for custom extension add these to the application.
Does anyone has a hint how to do this with ReactJS?
Cheers,
Manuel
You can implement a custom javascript function on your main component to add extensions, i.e.:
YourPlugin.loadExtensions(MyCustomExtension);
I've done this for a react component to be mount on a specific node only, but I think this approach should work in your case as well.