We Keep Coding

How to keep my React code from being minified on Github?

I'm fairly new on the React scene and just finished a few small react applications. I deployed two of these applications to Github Pages, and they both function perfectly.
However, I noticed that the files in my repository are minified. Not only that, but the language meter shows it as 100% html. It's nitpicky, but I'd like for it to display JavaScript/CSS too. I would greatly prefer my files be visible, just in case anyone wanted to look at how my application was built (mainly recruiters).
Is there some way to make these files visible/UNminified without sacrificing performance?
Is there any reason I wouldn't necessarily need to undertake this? --> (would employers care?)

You're committing your built project, but you should upload the source code!
To expose your github pages you have to build the project inside the docs folder, so you can have source code and build on the same branch!

How to build create-react-app so client can't see code in an organized way

I'm using create react-app and noticed that with my builds the client can see my exact code as I see it when I'm editing. I would like to prevent this to (at least a little bit) deter clients from easily cheating in my game. If they can see how everything works that easily, they will be more likely to alter the client code. When I go to Facebook.com which uses React, I see that in Chrome source inspector I can't access the clean neat files, just a bunch of code jammed together. How can I achieve this with create-react-app? Also, how can I remove the comments before I build? I assumed, when I built this would happen, because why would the client need to see your comments, but it does not.

When you run react in the development mode using the create-react-app, the source code is not optimized for production. It offers more development purposes.
You need to run yarn build to get the optimized version which will be minified and uglified as you like which will give you some amount of code hiding ability.

Implementing Cursor Trail Effect on React

I am trying to get more experience by implementing various web visual effects that I've seen online. The one I'm working on is to create a 'cursor trail' effect where the cursor trail is used to reveal a background image. For more context, you can find the inspiration for this effect here.
The CodePen that I have linked above contains an HTML file, a CSS file, and a JS file. For starters, I am trying to transfer this functionality into a simple React app. To do this, I first initialized a basic/vanilla react app:
npx create-react-app cursor_trails_effect
I'm having trouble incorporating this cursor trails effect into my React app. From the CodePen, I'm easily able to integrate the HTML and CSS parts into my React app, but am unsure how to connect to and execute the JS script that is part. Yet it makes me wonder, in general, how someone should go about integrating such a JS script into the React framework of web development?
Prior to posting this question, I conducted considerable research to understand how to execute scripts from external (.js) files, or use the <script> tag in React, and have tried to use a number of packages that claim to accomplish this (such as 'react-load-script', 'react-render-html', 'react-script-tag', 'dangerously-set-inner-html', 'react-helmet') but to no success.

Angular2 app - Remove Render-Blocking JavaScript

I have an angular2 firebase app.
I've noticed that when live it task 4 seconds to get 12 JavaScript libraries that I store locally in my prod build and then it shows the app.
I need to get this 4 second delay down to 2 seconds.
When I watch the sources in the console in chrome it just pauses for 4 seconds then loads. It seems to be render blocking JavaScript the correct term?
Things I've tried:
HTML5 async and defer on the 12 JavaScript libraries.
I tried combining the libraries into the same file but that gave me loads of errors.
My CSS is fine and all minified.
All the js 12 files are minified.
The 12 JavaScript libraries are all stored locally and not requested from other servers.
I have images on my website and they are all optimized and compressed and placed on a CDN.
I use cloudflare and all the performance toggles are on.
I host with Firebase.
The JavaScript files are below the and not in the header.
My PageSpeed Insights scoress from google:
(Resource: https://developers.google.com/speed/pagespeed/insights/)
61/100 for mobile.
83/100 for desktop.
I can't use webpack.
I just want an easy method for showing the user interface and then load the libraries.
Let me know if you have any further questions.

Angular 2 generates your user interface, so what you are asking seems impossible at first. But you are in luck: the angular 2 team is working on something to help you out. It is actually already ready to use, but i don't think you can use it in combination with Firebase hosting. Take a look at https://universal.angular.io/. It allows you to render the initial view on the server side.

Are there ways to improve javascript (Dojo) loading?

I'm starting to use the Dojo toolkit and it has rich features like Dijits and themes which are useful but take forever to load.
I've got a good internet connection but those with slower connections would experience rather slow page loads.
This is also a question about heavy vs light frameworks. If you make heavy use of widgets, what are some techniques to keep page load times down?

Dojo has a build system that will drastically improve load times. Take a look at one of the dojo books or the online docs & look at layered builds. In order to do a build, you need to have the "source" (or "full") version of dojo, which has the build tool included -- you can tell if you have this by the presence of the 'util' directory (which is at the same level as dojo, dijit, dojox). If you don't have the full version, go back to the dojo site & delve down into the download area -- it's not completely obvious perhaps.
Anyway, if you have the right version, you basically just need to make a "build profile" file (or files ... aka a layered build), which is essentially your list of dojo.requires that you would normally have in your html. The build system will jam all the javascript code for all the dijits, dojox stuff, etc. together into a "layered build" (a file) and it will run shrinksafe on it, which sort of minifies the code (removes whitespace, shortens names, etc). It will also do some of this to the css files. Aside from making things much smaller, you get just a single file for all the js code (or a few files if you do more than one layer, but most of the time a single layer suffices).
This will improve your load times at least ten-fold, if not more. It might take you a bit of reading to get down the format of the profiles and the build command itself, but it's not too hard really. Once you create a build file, name it something obvious like "mystuff" and then you can dojo.require the "mystuff" file (which will be in the new build directory that is created when you build, then underneath that & hanging out with the dojo.js file in the dojo directory). Requiring in your built file will satisfy all the dojo.require's you normally do (assuming you have them all listed in the profile to build) and things will load very fast.
Here's a link to the older build docs, which mostly still hold true:
http://www.dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/package-system-and-custom-builds
Here's the updated docs (though perhaps a little incomplete):
docs.dojocampus.org/build/index
It reads harder than it really is ... use the layer.profile file in the profiles directory as a starting point. Just put a couple of things & then do a build & see if you get the release directory created (which should be at the same level as dojo, dijit, etc.) and it will have the entire dojo system in it (all minified) as well as your built (layered) stuff. Much faster.
Dylan Tynan

It's not that big (28k gzipped). Nevertheless you can use Google's hosted version of Dojo. Many of your users will already have it cached.

Once you create a build file, name it something obvious like "mystuff"
and then you can dojo.require the "mystuff" file (which will be in the
new build directory that is created when you build, then underneath
that & hanging out with the dojo.js file in the dojo directory).
Requiring in your built file will satisfy all the dojo.require's you
normally do (assuming you have them all listed in the profile to
build) and things will load very fast
Slight correction -- you don't dojo.require that file, you reference it in an ordinary script tag.
<script type="text/javascript" src="js/dojo/dojo/dojo.js" ></script>
<script type="text/javascript" src="js/dojo/mystuff/mystuff.js"></script>
For the directory layout I put the built file "mystuff.js" into the same directory as my package. So at the same level as dojo, dojox, and dijit, I would have a directory named "mystuff", and within that I have MyClass1.js and MyClass2.js. Then a fragment from the profile.js file for the build looks like:
layers:[
{
name: "../mystuff/mystuff.js",
dependencies: [
"mystuff.MyClass1",
"mystuff.MyClass2"
]
},...

I know this is an old thread. But I'm posting this answer for the benefit of other users like me who may read this.
If you are serving from apache there are other factors too. These settings can make a huge difference - MaxClients and MaxRequestsPerChild. You will need to tweak them based on the resources available to your server/machine serving the files.
Changing this worked really well for me.
Using the google CDN is also a good option although it may not be practical in some situations.
Custom build also has an effect as pointed out in other answers.