We Keep Coding

Converting existing site to React JS (Adding ReactJS to existing webpage)

I am kinda new to front web development, but there is one interesting question for me.
I got a simple vanila html+css+js website, in which I want to integrate a few actions (profile page, custom e-commerce, checkout, etc) using React.
As I followed this tutorial (Add React in One Minute),
I had successfully "inserted" react component into the webpage. But the normal reactjs applications are able to use installed libraries, use props to pass data.
So, basically, the question is how to run this webpage the way that react will be able to handle libraries installation (common npm i example) in order to be able to import them and work like with normal react application created by npx create-react-app my-app

You could use libraries via a CDN link, the same way you added React via a script-tag to your site. Ultimately i think you're looking for the developer experience one gets while using JSX-syntax and this would require you to rewrite your exitsing app, achieved trough setting up a node project with your mentioned command npx create-react-app <app-name>.
JSX must be compiled to regular JavaScript so that browsers can interpret them correctly, much like you would compile a C++ program to a binary file.

React Native: Convert an Expo bare project to a pure react native app

TL;DR
Similar questions have been asked before on SO (such as Convert Expo project to Original React Native project, Commands to use after converting from expo to react-native-cli, and Expo to react native init) but none of them explain how to completely remove all Expo modules and dependencies from my project, so that I end up with a pure React Native app (the same as if I had run react-native init... in the first place).
So is it possible to remove all of this extra crap that I never asked for or expected to be installed, with one simple command? MTIA! :-)
Background
Basically I got into this mess by ejecting from a managed Expo project, then customising the android folder a lot before realising that my build/install times were ludicrously slow.
So to fix this, I ran yarn global add depcheck and depcheck, which suggested that I could/should remove all of the following packages (the most seemingly-important ones are marked with an asterisk):
expo-updates*
filtrex
firebase-admin
lodash
mathjs
moment
native-base
nodemailer
react-native-android-location-enabler
react-native-credit-card-input
react-native-document-picker
react-native-fast-image
react-native-geolocation-service
react-native-image-crop-picker
react-native-js-bottom-sheet
react-native-reanimated
react-native-signature-capture
react-native-unimodules*
react-native-web
react-timer-mixin
recyclerlistview
shortid
stripe-client
styled-system
#babel/core
#react-native-community/eslint-config
babel-jest
jest
prettier
react-test-renderer
So I blindly ran yarn remove ... on all of those packages, and now I get a ton of errors on attempting to build. I won't list them here since it's obvious that they're mostly (if not entirely) related to the expo-updates and react-native-unimodules packages marked above.
I'm not explicitly using anything Expo-related in my code, so this should be a cake walk IMO, but is proving to be quite difficult!
So how can I remove this extra cruft properly? Do I need to start fresh with react-native init? MTIA :-)

Ejected expo projects needs unimodules to function properly.so i don't think there is a simple command that does everything you asked for. You can follow some steps to get it working.
Branch out for safety.
Eject, check if it is working and commit.
Delete all except .git folder in the project(also can keep a copy of .git somewhere else if project is not stored remotely).
Do initiate a bare react-native project to the same folder(have to do it from parent folder with same project name as the current project folder name, it will prompt the folder is not empty. choose to continue).
Discard the deletion of the files with your Codes.
Add packages that use in project(for expo packages, find replacement packages. Most probably will be mentioned in expo documentation).
Run Project, (might get some missing dependencies.if so, add and rerun)

I have finally acheived this almost 6 hours later by:
Creating a new React Native app from scratch (react-native init MyAppName).
Finding replacements for all the Expo modules that were being used (not by me directly, but by other packages).
Reconfiguring my Firebase project to play nice with the app (particularly the SHA keys).
Uninstalling the old app, installing the new and clearing caches for the "new" app (I say "new" because I didn't expect this step to be necessary, but somehow, for some stupid reason, Android was trying to use the old, cached app files).
The last step was absolutely crucial; it took me about 2 hours of head scratching and screaming at the PC before I finally stumbled upon this: React Native white blank screen issue. Many thanks to #DiwakarPrasad for this absolute gem of knowledge!

Architecture for scaling up Electron application development with plugin-style packages

Background:
We are developing an electron application which gets bigger and bigger over time. We've separated our web-app (renderer process) and the native wrapper process (main process) into separate projects, which is a good start, but not enough-
We have different teams working on the same electron infrastructure and would like to split the code into separate repos, each managed by a different team, and all of them are being loaded into the main infrastructure project of electron.
Problem:
At first, it sounds simple - create an npm package for each electron module (one for each team) and import those packages in the main electron project, that manages all of them and builds the final electron app. The problem is that those electron packages should be familiar with 'electron' package, and should somehow use the same version of this package. Since keeping track of the package the main electron project uses and updating it manually in every module each time we want to increase it's version is bad for scaled up application, we want to be able to sync them in a better way.
(Bad) solutions I could think of:
Pass the electron instance from the main electron app to the inner packages (in an init function) and use it instead of using the installed 'electron' package. It solves the problem of syncing electron versions, but when the main app updates the electron version - the packages won't be familiar with it and might break in case of incompatibility.
It sounds like no matter what I do, I can't decouple the projects and they must communicate (manually) to work properly. Is there any architecture design method I'm missing that could help me split one electron projects into multiple ones?

We are created #our-company/our-product-common package with common dependencies and configs (electron, typescript, lint rules, global constants). If we want to update electron or typescript we update versions in *-common package.
Or you can create #our-company/our-product-electron package which just reexports electron.

react-d3-component implement in create-react-app

I'm new to react.
By my research, I figured out that React-D3-component can serve my purpose.
I'm looking for an example of a Multi-series Line chart with tooltip and zoomable function. Basic line chart would also make this trick for my first steps.
I've a create-react-app, boilerplate ready. I need to put up this graph into a create-react-app project.
Please guide me through an example, which explains step by step how to implement this kind of graph.

Here are a few steps to do in order to make your app work:
Config your create-react-app boiler plate with Webpack and make sure you can run it without React-D3-component module.
Find the homepage component (normally main.js) try to modify some basic HTML elements and see if you can see the changes on page with hot-reloading. For instance, adding a H1 red tag.
Install React-D3-component module with npm command:
npm install react-d3-components --save
Start adding React-D3-component into your homepage component you just modified by importing the module:
import ReactD3 from 'react-d3-components'
Follow the example here, and create your chart components in your homepage.
This workflow should work for any React modules for testing purposes.

Can D3 library be used with the Electron (Atom shell)?

Electron's website says that the applications made with electron can have access to node modules. Can they have access to the D3 library? If so, how can it be set up?

D3 is available as a Node.js module that can be imported into the JavaScript code you want to use to render your visualisation application.
As an example of how to integrate D3 into an Electron application, have a look at my D3 Space Filler Explorer application on GitHub. This application visualises disk space use with multiple D3 pie charts and a D3 treemap.
One pattern I found useful was to inject the SVG element into the D3 visualisation, which differs from the usual approach in D3 examples which creates the SVG element in the visualisation. See examples of this dependency injection in the /app/js/pie-chart.js and /app/js/treemap-chart.js files.

All (at least theoretically) pure JS modules are compatible with electron, since it also provides a (CommonJS) javascript runtime environment (io.js).
The only important thing is that electron doesn't automatically sets the NODE_PATH variable and doesn't look in system/global modules path for required modules. So you just have to make sure that you have the path to d3.js on your NODE_PATH:
NODE_PATH="/PATH/TO/d3.js" electron /PATH/TO/APP

We solved this in our workteam installing d3 with Npm:
npm install d3 --save
and in index.html we put this:
<script>var d3 = require("d3")</script>
We were getting this issue from nv.d3.js line 18, there is a little function requiring d3 as a node module and in our app we were using it in bower_components, so installing it with npm and requesting in your index directly from node_modules like as I said will probably solve this issue as it did with us.