Develop Reference

Is a React app supposed to do a full refresh on a file refresh?

I just started messing about with React and on the tutorial it showed one of the benefits: it updates only the necessary DOM elements. However as I started developing an app from scratch I noticed that whenever I save the .js file it does a full page refresh. Is it supposed to do a full refresh if it is a change in the source file or am I doing something wrong that isn't allowing to update only the DOM element?

I think you are not using Hot Module Replacement in your development environment. So in your case with every change the entire code is getting compiled again and the entire DOM is getting refreshed.
For your reference- https://webpack.js.org/guides/hot-module-replacement/

Turbolink (JS) reload issue within Rails app

I'm working on a Rails 5.2 app with Turbolink installed by default. I understand that Turbolink does not reload all assets when navigating through a site so some JS components of the site stop working until I manually reload the page. In my example the navigation dropdown and save button on the edit post page doesn't work. I've tried removing Turbolink from the project altogether and this seems to fix the issue but know that I need Turbolink for performance reasons in production. To my understanding, this is the reason turbolink comes as default with Rails after version 4. The solution I' found online is to add this code below to my JS code:
document.addEventListener("turbolinks:load", function() {
my_func();
})
The problem I have with this solution is that I don't know exactly how to wrap my code with that line. I'm working with a Bootstrap theme that has 4 JS files. The smallest of these files has 200 lines and has various functions. How to do you fix this Turbolink issue when using Bootstrap themes? Do you wrap the solution around the entire javascript file?

Do you need Turbolinks for performance?
Generally, good web caching (304 for assets), defer and async for scripts, etc. will cause a browser to behave almost like with Turbolinks enabled.
But in general, if your theme and/or bootstrap (I haven't used it) doesn't have a single init function, but every single element is initializing itself, then you're probably in for a rough ride.
I would look through the prettified version of the theme (or documentation) to see if there is a general init function you can call.
Hope this helps.

How does hot reloading work?

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

live html reload with webpack

sorry for the noob question (I'm still newbie with webpack) I'm interested in live reload my html, that means, everytime than I do a change in my html file my browser must show the latest changes, webpack has a nice feature than works for javascript, is possible use it with html?
just now I'm using this skeleton https://github.com/gaearon/react-hot-boilerplate for develop, yes I'm working with react but also I'm building a few static pages
I know about libs like live.js but I found it not so transparent: this reload my browser and this is empty for a few seconds, instead bracket (for html) and webpack (for js) are almost instantly and you dont feel the browser reload, an alternative like this outside of webpack also would be appreciate, thanks

After hours of searching google I finally found the answer.
Just add this config:
devServer: {
before(app, server) {
const chokidar = require('chokidar');
chokidar.watch('path/to/my-files/').on('all', function (event, path) {
server.sockWrite(server.sockets, 'content-changed');
});
},
}
Found it on a blog here: https://daltontan.com/easiest-way-to-reload-webpack-dev-server-when-other-files-change/30

Using JS to create user-customized home pages

I believe this question is related to this one also, since I'm trying to figure out different aspects of creating a custom homepage: Click here
Once again, I'm developing a downloadable homepage (a custom index.html file + some images and more if needed) that you can store on your computer and then set it as your homepage. It would have a compact layout where you could sort your favorite bookmarks and other stuff the way you want. So the idea is clear.
In the previous question (link above) I wondered whether it's possible to write/read from a file with JS. Unfortunately, it isn't and I do not want to utilize any plugins or an ActiveX object.
I would like to know whether it is possible to add new lines of code (user input) to the page file? For instance, if index.html is the file from which the script is running, can the same script add new lines of code to it? Not an external file, but to the same file the script is running on at the moment?

Instead of writing to a file, I recommend using localStorage. It's a persistent JavaScript object that is stored across pageviews and sessions.
alert(localStorage.myStorageKey);
localStorage.myStorageKey = 'test';
Try using the above code and refreshing the page.