I'm new to this and using Parcel bundler for my React Project.I have three files index.html, index.css and app.js file, now, when I'm making any change in my html or css file, parcel is reloading the webpage automatically but this is not the case when the change is made on app.js file, even after manually refreshing the page does not reloads the changes I've made.
I'm new to this and have only used Parcel.Should I switch to webpack though from what I've heard, it's configuration is a little complex for beginners.
If you see the image of the code, you'll see that logically HeaderComponent2 is rendering and "React Functional Component2" should be printed, but that's not the case even after I've tried to manually refresh the page. It only works the first time, after which If I change the html file or css file it will Parcel will reload automatically and reflect the change but this is not happening with app.js file.
I've tried to find solutions for this problem, this seems weird.
Can anyone please assist me with this?
Related
I added react-refresh and react-refresh-webpack-plugin to my webpack configuration. Everything works fine if I change something directly in the component. For example, I add a new jsx. HMR works fine. The problem arises when I want to change a style in the module.less file that my component uses. Then i have to manually refresh the page to see the new changes, which can be tiresome.
What do I need to do to make react-refresh also respond to changes in css/less files? Maybe I need to add something directly in webpack configuration?
In another project I use vite and there everything works great for js and css files too.
I am new to React.js.
The problem I am having is that hot reloading 'auto refresh' is not working when I do 'CRTL + s'. It works when I do 'CRTL + s' in index.html file, but doesnt work in any .js file.
(after saving the changes in .js file and go to index.html file, it works. Changes in .js file appear in the app, but nothing happens while making changes in .js file and saving).
I tried thousands of things and searched online alot, but nothing is working for me.
Thanks
I'm using Material Top Tab navigator in my React Native app. Specifically, I use the function createMaterialTopTabNavigator() which is found in react-navigation-tabs. react-navigation-tabs contains the file lib -> module -> views -> MaterialTopTabBar.js, which is a minified file corresponding to src -> views -> MaterialTopTabBar.tsx. I wanted to change something in MaterialTopTabBar.tsx because I might fork the module, but when I edited MaterialTopTabBar.tsx, even when I re-ran react-native run-ios, MaterialTopTabBar.js (in lib) didn't get updated. When I edited MaterialTopTabBar.js (the minified file) directly, the changes did show.
Does anyone know why MaterialTopTabBar.js doesn't get updated when I change MaterialTopTabBar.tsx and re-build the project?
UPDATE: I think it's that MaterialTopTabBar.tsx was transpiled to MaterialTopTabBar.js before the module was shipped, rather than when I build the project. One way I was able to solve the problem was to manually convert the Typescript code in MaterialTopTabBar.tsx to JS, and paste it into MaterialTopTabBar.js.
not lil data. I do not know if the bundler proccess is run by webpack or some else. but let's take CRA for example. The webpack-dev-server
has the following
// for some reason broken when imported through webpack. If you just want to
// use an image, put it in `src` and `import` it from JavaScript instead.
contentBase: paths.appPublic,
contentBasePublicPath: paths.publicUrlOrPath,
// By default files from `contentBase` will not trigger a page reload.
watchContentBase: true,
// Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
so you need to find the place were contentBase and stuff are declare
I'm really a newbie in front-end development. I'm currently involved in a project that does front-end development. I hope I can explain this clearly.
Whenever I call http://localhost:8080/test, it is loaded by page1.jsp.
Now I would like to load a TSX file instead of a JSP. I tried changing my <welcome-file> from page1.jsp to html/js/page2.tsx in web.xml but I don't know why it is not working.
What happened is that a download file window will pop up instead of loading http://localhost:8080/test.
I placed the TSX file in the html/js directory because that's where the package for Typescript and React is located. By the way, the TSX file I'm talking about is a React component that uses Typescript.
Is it possible to configure the web.xml to render the TSX file? If not, is there any other way for me to load it?
Is web.xml still important if I want to load a TSX file?
No, for several reasons:
A .jsp is a "Java server page". You are probably running an application server like Tomcat (I haven't done that in fifteen years or so, so bear with me). It is compiled into a Servlet, which then runs to produce your page as output. Your .tsx file doesn't fit in that process.
Your application server probably has a directory somewhere where you can put static files that don't need to be run on the server side; see if you have a "WebContent" directory or so. In it you can place pure HTML files, Javascript files, fixed images and so on.
But if you put your TSX file there, your browser still won't be able to use it: browsers don't understand Typescript. Typescript needs to be compiled into Javascript, and if you put the resulting .js file there, then a HTML file could use it (with a tag), and that would work.
But your file isn't only Typescript, it's a tsx -- it probably also contains JSX, which also needs to be translated to Javascript.
There are also dependencies, like React, that you'll also need to download in your HTML.
On the whole this is what a bundler like Webpack is for (if you used create-react-app, for instance, you'll get a working Webpack configuration from the start). It can create a "bundle.js" containing all the Javascript needed in one file, including all the dependencies and all your TSX code compiled to Javascript.
Place that in a WebContent or similar directory, call that from a tag in some HTML file -- and you'll hopefully get a nice error message in the console that'll lead you to the first thing I forgot to mention :-)
I have a reactJS SSR app deployed into server, I am trying to use one of the page /listpage as a widget into some other website
The list page is appearing nicely in other website however some of the click actions were not working, when I debugged it I found that the issue was with serving reactjs static js chunk files which were created by react run build. The issue was with relative path /static/js/xxxx
to fix this issue, one solution is to have a full path reference, to enable that I added homepage:"" in package.json
this worked and when I checked network tab in chrome browser i could see all static js files are referred using full path.
however a strange issue occurred , the whole list widget appears and suddenly disappears , when I inspect the elements I could see nothing inside thats where all react components suppose to be rendered.
for full code of SSR project kindly refer with explanation.
however the full code is in github