I'm a newcomer to React, and I was wondering something. If a site has been built using React, will I always be able to see that in the source code from the developer tools? I installed the ReactJS Super-Powered extension for Chrome, but I don't know how reliable it is.
What should I be looking for if I want to spot React in the code?
There is:
React devtools has many features.
Show me the react extension is useful.
And react uses specific keys to keep track of the dom and keep it quick which could possibly be recognized in the dom.
Delete all the .map files /js and /css folder from your generated build.
Not always. You can make them not that visible.
There are many ways to encrypt and uglify the source code.
It will make the source code complicated, ununderstandable, unreadable for humans with only one click. It implied that it could still be decrpted but not that easy.
A simple Javascript Minifier Compressor Encryptor website
hope it helps
If you don't set the following option, your react source code (not minimized) will be visible. You need to turn off the GENERATE_SOURCEMAP flag.
in package.json
"scripts": { ... "build": "GENERATE_SOURCEMAP=false react-scripts build", ... }
Related
So I have an existing Create React Application and I want to be able to build a chrome extension to work in conjunction with it. Is there a away I can use webpack or something so that my extension kind "lives in" the React application? I want to do this because the existing application is quite large and I don't want to have to make changes (UI, api, or otherwise) twice. In my head I'm picturing it something like this:
- MyApplication/
- src/
- index.html
- App.tsx
- components/
- <bunch of other useful stuff>
- extension/
- index.html
- Extension.tsx (equivalent of App.tsx in react app)
Basically I'd be able to import whatever I need into the extension and run some command like build extension and it would bundle just the files and dependencies imported and necessary for the extension and output that to some directory I can upload to the Chrome Web Store.
I also briefly considered splitting the application into into something like MyApplication-core, MyApplication-web, and MyApplication-extension or something and just installing core in both web and extension but not sure if that's the best strategy or not. The first strategy I outlined seems simpler to maintain but I could be wrong.
Also, if there is another strategy I haven't thought of please let me know! Happy to add clarification if necessary as well! TIA!
Just build it and add manifest with required configurations. After this you will have posibility to load it as an extension.
I've created a basic Create React App with TypeScript template
npx create-react-app cra-test --template typescript
I added just a simple MyButton component and passed a on click handler to it.
When I'm profiling it with Chrome DevTools links to the source in the profiler are incorrect and not working as if there where no source maps.
When I run console.trace in my onClick handler stack trace looks good.
How can I get correct links to source files in the profiler tab working?
Thanks!
In order to get this working you need to change webpack's setting
devtool: 'eval-source-map'
You can set it using config-overrides.js (react-app-rewired).
Probably there are some other source map types that will work but that one gives you the most detailed information.
More on source map types here
https://webpack.js.org/configuration/devtool/
You can read about devtool setting here.
https://webpack.js.org/guides/development/#using-source-maps
I was trying to integrate a React.js app in Cordova. Everything goes well, but I was not able to debug the app in the simulator. With chrome://inspect it seems like there's no way to do it, because I can only see the "compiled code". Any solution? Thanks
Maybe there is another better way, but what do the trick for me is to build react with some custom files that i took from node_modules/react-scripts/
(i do that, to avoid react eject)
You need all the sources map on your app.
React by default, use a certain webpack config, but that config doesn't work in your phone.
By default, react use this
You can check it on the file node_modules/react-scripts/config/webpack.config.js
What i do, is to build react with the next webpack config
devtool: "eval-source-map",
So you must
Copy these files on your source code and adapt some imports (there are some import with relative path) You only need these two files
node_modules/react-scripts/scripts/build.js
node_modules/react-scripts/config/webpack.config.js
On the first one, modify it to use the second one,
On the second one, add this devtool: "eval-source-map"
Create new task on package.json , new custom build to use the script your custom build.js
Build with this script, and copy all the source maps with your code, and thats it.
The debug could crash sometimes, (i try it also with iphone + safari, sometimes works, sometimes don't so you must keep trying)
On android tend to work in a better way.
The debug is a little bit slow in compare to the web debug.
I hope this works for you too.
(Sorry for my bad English)
I'm using React JS and when I build my app to deploy, I use react-scripts as follow below:
react-scripts build
And my chunk files are something like:
0.cebdafcf.chunk.js
1.fa48de00.chunk.js
2.98b9bea7.chunk.js
...
52.9ca2408d.chunk.js
App.7b21e172.chunk.js
dashboards.f6142b89.chunk.js
user-forgot-password.06d87a22.chunk.js
views.16dc12b2.chunk.js
...
But every time I build, the hash suffix are the same, for example, I'd like every build change the hash for App..chunk.js
Is there any way to do it?
I've tried the option described here: Github Renamer Answer, using the lib renamer, but it didn't work to update the hash name for all chunk files.
Thank you in advance for helping
What I've done to solve was: First of all, I had to eject react so on this way I had access to change the webpack.config and after I've changed on webpack.config everything with
[contenthash:8]
to
[contenthash]
So, on this way, everytime we have a change on the file, the hash config chunk will be different. And for me, it's enough.
I don't know if someone has another solution, better or simpler. If yes, post to help other people.
have very simple sample app which build Create React App + Styled-Components to prove this issue. But I have real big application which I am facing this issue which I am going to explain it below.
I would like to pre-render this app with Rendertron for SEO/GoogleBots and etc. But the problem is when I build PRODUCTION version of React App which use Styled-Components . all the style will be missing on static version which Rendertron produced, but from other side if I try the same workflow with dev-server of app , everything looks fine .
So far I know there is different on PROD version and DEV version of my application when I render it with Rendertron . But I am not sure what cause this issue and how I can fix this issue .
I am looking for solution or idea which can help me to solve this issue .
Here is my sample code which I peppered for test .
https://github.com/AJ-7885/test-styled-component-with-rendertron
Here is screen shot from different version of Rendered version by Rendertron base on PROD or DEV version of the same application .
enter image description here
After a lot of searching around, I finally found out the reason. The Styled Components library uses something called the "Speedy mode" to inject styles on production. This makes the styles bypass the DOM` and be injected directly inside the CSSOM, thus, appearing in the inspector, but totally invisible on the DOM.
Fortunately, Styled Components 4.1.0 came with a fix for this issue! Now you can set a global variable called SC_DISABLE_SPEEDY to true in order to disable the Speedy mode and get the styles to appear on Production as well.
Reference: https://www.styled-components.com/releases#v4.1.0
But the only part I am not sure , how to set disable this Speedy Mode in Create-React-App without Ejecting , Dose any body has any idea ?
You need to render your styles on the server side and inject those styles in your pre-rendered react app. Styled-components explains how to do that here: https://www.styled-components.com/docs/advanced#server-side-rendering
Also, I'd recommend using react-snap for pre-rendering since that is recommended by the Create React App docs. react-snap seems to be more of a React-specific solution that may be easier to implement, especially with styled-components.