We Keep Coding

How to use electron-redux in electron and react app to share state in multiple react renderer processes

I use electron and react to build desktop application, in the way electron-redux works you need to import the reducers in the main and in the renderer processes as well , in case of react you can not import files outside of src folder, and by putting the reducers inside the src folder and import it in the main process fails because electron uses ES5 importing syntax and react uses ES6, when electron import the reducers it seems to force the entire file to use ES5 syntax,
after making all import/export statements in the reducers file to use ES5, electron still complains and actually complains about syntax that used in other react files other than the reducers file !
Is there a solution for this , or there is another way to use redux in electron react application ?
Thanks

How can I build react-native components for different build types/flavors?

On react-native, there's a feature were we can use a components file suffix to build different components according to platform, ie. component.ios.js and component.android.js will build a component module with specific behavior for ios and android.
Is there any way to build different components according to build variants/flavors/schemes? Say, suppose I have a pro and a lite version of my app, I'd like to do something like this:
| some-folder/
| -- component.pro.js
| -- component.lite.js
and so when I import component from 'some-folder/component', the bundler could detect if I'm using a pro or lite build variant and bundle the correct javascript file, in a similar manner that it's done for the OS suffixes.
Do notice that I know that I can just check the build variant at runtime and provide the correct component correctly, but that means bundling the code for the wrong variant in the app - increasing app size needlessly.
Related, is there a way to import images conditionally according to build variant? I know I could just place them in their respective assets folders for each native platform, but I wonder if there are other methods.
Any help is appreciated.

no thats not possible as React Native will detect when a file has a .ios. or .android. extension and load the right file for each platform.
you have to write your own wrapper for each file like
component
--> component.pro.js
--> component.lite.js
--> index.js
in index.js file you have check platform or os from react native and return specific file
for example file
import ComponentPro from './component.pro.js';
import ComponentLite from './component.lite.js';
import {Platform} from 'react-native';
export defualt Component=(props)=>{
if (platform.os==='pro') return <ComponentPro {...props}/>;
else if (platform.os==='lite') return <ComponentLite {...props}/>;
}

Does webpack code splitting work in react-native?

I am using in a web application react-router.
When using import 'lodash' I import the whole lodash lib in my project.
Code splitting is about using an async import using import().then() to dynamically load chunk while the application is running.
Read about code splitting in react-router/web.
For example: function atRuntime() { import('lodash').then(() => {});}
This will import the library at runtime with an ajax request so it is not bundled in the main.js.
I'd like to recycle my code between web and native and we use a lot of code splitting for each page change.
My app has two main parts and some user will only visit one part so they don't need all user authenticated part.
I expect to be able to use tree shaking during react-native, but it is missing in react-router/native documentation.
What's react-native opinion about code splitting?

if you want to use webpack, you can try with haul https://github.com/callstack/haul
but i highly recommend this implementation without webpack -> https://www.npmjs.com/package/react-native-bundle-splitter

in vue.js how do I serve components that require js libraries?

So I'm new to the Vue CLI and one of the features that I would like to use is
vue serve <component name>
The problem I am immediately running into is there are some js libraries like moment that I am using in those components, so do I need to add an import statement in my component just for local testing? Is there anyway to set this globally and if so can I access it when i try to serve an individual component?

Once you run npm i -s moment, you can either import moment in your main.js Vue entry point, like this:
import moment from 'moment';
Vue.use(moment);
Or, you can use it locally in your component script, with just a local import within the <script></script> tag.
import moment from 'moment';
My preference is the former, since it allows me to reduce duplication if I need it in multiple files. Either way, to access in a function, once it is imported in one of those two ways, you can use it in component methods and lifecycle hooks.

Import your plugins in your main.js and then use like so;
import Vue from "vue";
//this is called only once before you start importing other packages
import YourPlugin from "yourplugin";
Vue.use(YourPlugin)

Does ReactJS reuse imported packages?

Does ReactJS reuse imported packages?
Let's say I have a file called DisplayItems.js and EditItem.js. They are both imported into App.js.
If I import a package (like axios) at the top of my DisplayItem.js file (import axios from 'axios';), and I also import it in my EditItem.js file, does my Application grow by 13kb or 26kb (assuming axios is 13kb)?

This behavior is controlled not by React, but by whatever build tool compiles and bundles your import statements into a JavaScript file for the browser.
The Create React App template currently uses Webpack as its build tool. Webpack avoids duplicating code that is imported multiple times; it only writes the definitions once. If you are using a different project setup for your React app, your project may use a different build tool.

In response to jhpratt, I did think of testing it on my own, but I knew it would take some time (about 34 mins).
Here's the test results.
Importing jQuery
2742120 (the control) - with jquery imported once
2742353 - with jquery imported twice (233 byte difference, .2kb)
2741887 - with jquery not being imported (233 byte difference, .2kb)
Importing modal-vanilla
2742120 (the control) - with modal-vanilla being imported once
2742406 - with modal-vanilla being import twice (286 byte difference, .3kb)
2712501 - with modal-vanilla not being imported (29386 byte difference, 29.3kb)
I'm not sure what was going on with jQuery (maybe I added it somewhere else in my project?), but it does look like packages are reused (at least in this instance).
Just in case anyone's wondering, I am using Laravel's React setup.