Develop Reference

Create npm package with react components that exports to vanilla javascript

My company has a few different websites, mostly with a react front end but a couple without.
We want to build a cookie bar that can just be imported and used anywhere...basically it should be framework independent and ideally an npm package.
I'm not entirely sure if this is possible but I had the idea to construct the cookie bar package with react...it would be super simple, just a few components with jsx and styling and once that is all done, use webpack to compile it all into vanilla javascript that is independent of react and can just be inserted on any site with any or no framework.
All of the html of the cookie bar (that would have originally been written as react components / jsx but then compiled into vanilla JS with webpack) which will then be injected into the html of the website where the script is included.
Is this possible?
All I can find online is people making react components as npm packages but this is not exactly what I am looking to achieve.
Thanks in advance!

This is absolutely possible.
If the target page doesn't have React in it at all, you may want to bundle it as a tiny app and mount it as in the answers here. If it does have React, you can probably find away to use the existing React by putting it on window in the other code (import React from 'react'; window.React = React.
For bundling a single component or a few components, you may have better luck with Rollup than Webpack (they have different use-cases; both are bundlers, but Rollup has some niceties for bundling libraries specifically). This example may be useful (it also includes Sass, Storybook, and some other extras that you might or might not need). This would give you more flexibility and possibly smaller bundles, but would mean you'd still need a React app to actually import and use the components, as above.

Since your project scope is quite small it should not import or embed the whole react library.
I strongly encourage you to check Preactjs (https://preactjs.com/) which lets you write your code in JSX but has a much lighter footprint (3kB atm). Your component will load way faster, especially for mobile users
Then bundling with tools recommended in the other answers (rollup is great) is the way to go

Difference between nodeJS and electron

I am trying to write my own home automation system in javascript. The system should have a UI so that I can access some general controls for it.
Since it requires a UI, I thought "why not make it a fat electron app".
So I am now trying out electron and svelte. But the issue I am running into is that it doesn't look like I am able to import my normal packages for controlling philips hue.
For example if I import philips-hue with
import Hue from "philips-hue";
it immediately throws a ReferenceError: events is not defined and if I try using the package node-hue-api it throws the same error but references url instead of events
This is quite confusing for me since I have used these packages many times before without issues when I am writing a normal node express server.
So I am wondering why it won't work on electron and svelte, and if there is any "quick fix" solutions that solves this issue?

You will need to polyfill the nodejs built-ins, as these do not exist in other environments such as electron.
If you are using webpack for example, you can follow the directions here: https://webpack.js.org/configuration/node

Compile different code blocks for ios and android on react native

I have read this article in react native documentation. My question is how can I compile the js bundle differently for android and ios?
For example let's say I want to add a few lines of code for iOS inside a function. According to the mentioned article, I have to either use Platform.OS and check the platform on runtime or use .ios.js and .android.js files and let webpack use the correct static file.
The problem with the first approach is it may make the bundle big (if we have lots of these situations and the codes are big enough) and the problem with the second approach is that if the difference is not much for every change for the common code between the platform I have to change 2 files!
Isn't there any way to have a hybrid approach to consider platform specific code blocks while creating the bundle?

Android and Web App sharing Kotlin code

One of the major “selling” points of Kotlin appears to be its ability to compile both to JVM or Android and to JavaScript for the web. To make use of this, it should be possible to have a code base where some files are shared between an Android App and a browser Web App.
However, so far I found little details on how such a thing would be set up, in particularly when working with Android Studio and its underlying Gradle setup, starting from a a run of the Android Studio New Project Wizard. I don't mind if I can only build the Web App on the command line, but I'd like to maintain the Android debugging hookups that Android Studio provides. So far I know very little about Gradle and typical idioms for its use.
I'm sure that I'm not the first person to have this idea, so I'd like to know some best practices on how to set this up. Questions that come to my mind include the following:
Do I mix the kotlin2js and the kotlin-android plugin in a single build file, or do I need to have multiple build files (perhaps I should say “modules” or “projects” except I don't know which)?
If I have multiple build files, should that be two (one Android one Web) or three (one more for shared things)?
If it is two build files, how do I reference the shared sources?
If it is three build files, which plugin(s) do I use for the shared one?
Do I need to split my sources over three different source trees? Are there any conventions how these should be called?
Do I need to split my classes into three groups of packages, or can code for different targets coexist in the same package?
What configuration settings do I need to tweak to make the IDE aware of the layout of my project?
I've read the following relevant documentation, among other:
https://kotlinlang.org/docs/reference/using-gradle.html
https://docs.gradle.org/current/userguide/intro_multi_project_builds.html
https://docs.gradle.org/current/userguide/composite_builds.html
https://kotlinlang.org/docs/tutorials/kotlin-android.html

I would recommend using IDEA wizard to create a simple multiplatfrom project for you (File -> New -> Project -> Kotlin -> Kotlin (Multiplatform - experimental) ). Community edition should suffice.
Answering your questions:
You don't mix plugins. You create a separate module for your common code and use 'kotlin-platform-common' plugin for it.
Three modules, special plugin 'kotlin-platform-common'
Use common sense for source splitting. Put whatever you want/able to reuse in the common code. Put platform-specific code in platform modules.
No package restrictions. You can put everything in the same package if you so desire =)
Pretty sure it should just work. If not, try re-importing.

React Native - React.createElement is Not a Function

Figured I would see what React Native is all about, so I followed the instructions here and can't even get the out of the box project to run correctly. Chrome dev tools throws all sorts of errors. Here is the stack trace shown in the simulator, anybody else run into this?

It seems like what may have happened here is that you named your project "React". The CLI replaces the word "SampleApp" with the name that you specified in the sample files that it generates.
This is the original file here: https://github.com/facebook/react-native/blob/master/Examples/SampleApp/index.ios.js You can see where it has "SampleApp" in a few places where on your file has "React" for all of them.
It really wasn't your fault, the CLI just needs to be a little smarter and not allow someone to create a project named "React". :)

I got the same error when I used different version of JSXTransformer.js and react.js . Using 0.13.3 from cdn solved the problem. https://cdnjs.com/libraries/react/