Continue building React project with newer version - javascript

I have a really big project with React version 16.6.0 with Class components...
I would like to upgrade the project to a newer version of react (18 for example), but the code base is so large, just can't change it all. So I thought of something like creating a new react app, but how can I connect these 2 together, I need some advice.

I've encountered a similar situation when I had to add features to an old react app.
Fundamentally React, by design, is incrementally useable, i.e., you can use React only in certain parts of the app and the rest can be anything. Similarly, you could use Hooks & Functional Components in a incremental way.
Start by using Functional Components & Hooks only for the new features that you add. Later if you want to make changes to existing features try to rewrite them with FC one by one.
You DO NOT have to start with a new react app from the scratch.

Without a new app
Upgrade to react 16 latest version.
React 16.x versions greater than 16.8, such as 16.14.0, would be a good choice for you. No major breaking changes, and with react hooks(advanced functional components) support.
Using multiple react versions.
Checkout
https://medium.jonasbandi.net/hosting-multiple-react-applications-on-the-same-document-c887df1a1fcd
https://betterprogramming.pub/6-steps-to-create-a-multi-version-react-application-1c3e5b5df7e9
With a new app
Mix two react apps with an Nginx server.
Place all your new pages inside a subroute, such as https://my_domain/new/*, then configure your nginx server:
{
location / {
root /old-html;
}
location /new/ {
root /new-html;
}
}
You need to handle authorization in the new react app, though.

Related

how to check vue components in browser without using VUE-Router library

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

Is there a way to serve React component on a url, just like we can with web components?

I am trying to implement micro-frontends but my company is using React as the only front-end technology. I was hoping if I can do it by serving React components on a URL just as suggested in https://micro-frontends.org/ but it uses web components. Since all the ecosystem is on React can I serve a React component (and only that bundle code on a URL) like, https://my-website/components/table?theme="black".
Purpose of trying this:
Main repo will have most of the major dependencies already loaded. (no need of repeated code like react/react-dom etc)
Shadow DOM is creating event bubbling issues.
There are multiple repos for each team and all of them use same component library.

WebStorm AngularJS, Angular CLI, React Native & React App

I couldn't find an answer to this... so, when I open a new project in WebStorm I have the 4 options (and many more) mentioned above - AngularJS, Angular CLI, React Native & React App. I have found out that Angular CLI is corresponding to Angular 2.
My question is: which of the 4 or maybe another option I did not mention here is corresponding to Angular 4 which is the newer version of Angular 2 as I understand it.
Also, if someone can please help me understand better the difference between the 4 options I have mentioned: which should I use and for what purpose? For example if I want to build a minesweeper game, which of the three would you choose?
Also, in my search I've found that React Native is for mobile use (apps) so what is the difference between that and React App? And is any of these are suitable for creating a game in PC browser (and not on mobile)?
1.'Angular CLI' option allows creating Angular 4 project using Angular CLI
'AngularJS' option just clones https://github.com/angular/angular-seed - a project stub for Angular 1 application
'React Native' creates a React Native project stub using react native cli
'React App' creates a React project stub with create-react-app
React itself is a JavaScript library; React Native allows creating mobile applications using React library + native components. If you like to create a web game to be run in browser, you don't need react Native. You can use React, or Angular.x, or any other JavaScript framework that supports creating custom UI components

Is it possible to implement Webpack HMR for Polymer components?

Would it be technically possible to implement a loader for Webpack that takes advantage of HMR to use with Polymer that preserves application state, like the one implemented for React, VueJS (github.com/vuejs/vue-loader) or Angular (github.com/yargalot/Angular-HMR)?
It would help a lot during development not to reload the whole application when you make changes a file in a polymer component.
AFAIK there is no easy way to do Webpack based hot reloading of Polymer elements.
This is due to the fact that web-components/Polymer import dependencies differently (using HTML imports) compared to the Webpack based stacks (using ES2015 modules and loaders). See also this issue.
There are efforts tough to implement the HTML imports using ES2015 modules once the spec is finalized (this might take some time tough).
If you use redux for application state management, and keep your Polymer elements as stateless as possible, you could at least suse HMR for your reducers which help during development.
For combining webpack + polymer you could check out this or this repo.

Can I edit React components without reloading the browser?

If React offers DOM reconciliation, is it possible to dynamically reload component's code and re-render it after I edit it?
I'm looking for a solution that allows me to edit JSX file, save it, and have the component update itself in the browser, without reloading the page, unmounting it or losing its state.
Ideally this should work without browser plugins.
You can use react-hot-loader, a drop-in Webpack loader that enables live editing for React components in your projects. No browser plugins or IDE hooks required.
It marries Webpack Hot Module Replacement (HMR) with React.
You can use this if:
Your React components donʼt have nasty side-effects;
Youʼre willing to switch to Webpack for modules (it's not hard to switch, see the walkthrough);
You have a spare couple of hours (minutes if you already use Webpack).
How it works:
It uses Webpack HMR API to learn about the “module update available” event.
It changes React.createClass calls to special createClass and updateClass functions that store the component's prototype and later update it with fresh version;
When all prototypes are updated, it calls forceUpdate to re-render the components.
There is a demo video, an explanatory blog post and a React tutorial app fork with live-edit configured.
And it's all vanilla JS.
You can, and I created an example project demonstrating how to create these facilities for yourself using ES5 and RequireJS - it works with React and also with Backbone - it could probably work with Angular and Ember etc, as long as you use AMD modules and RequireJS.
Here's all the information:
https://medium.com/#the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1
the basic steps are:
gulp.js watchers listen for filesystem changes
socket.io server in gulpfile sends a message to all browser clients with the path of the file that changed
client deletes cache representing that file/module, and re-requires it (using AJAX to pull it from the server filesystem)
front-end app is configured / designed to
re-evaluate all references to the modules that it wishes to
hot-reload, in this case, only JS views, templates and CSS are
available to hot reload - the router, controllers, datastores
are not configured yet. I do suspect all files could be hot reloaded with the only exception being data stores.
You can see an example project here:
https://github.com/ORESoftware/hr4R
but I recommend reading the article above first.
This is a simpler more DIY implementation of hot-reloading than using Babel/ES6 and React-Hot-Loader.
Webpack was not primarily designed for hot-reloading- if it were, hot-reloading would no longer be an experimental feature, nor would it using polling to see filesystem diffs, which it currently does (see my article).
The RequireJS / AMD spec was basically made for hot-reloading, if you think about it.

Categories

Resources