How does React.js handle CSS file? [duplicate] - javascript

This question already has answers here:
What is the purpose of css-loader in webpack
(2 answers)
Closed last month.
I am attending Bootcamp on Scrimba and they are using the online platform. In React course, the CSS file, while I am working locally, I use index.css file and then in the index.js file I import it:
// CSS File
import "./index.css";
But I need to understand please how React deals with CSS file?
Why we don't use the normal main.css file in the index.html? How is it translated into that in the index.html file and there is no link for style sheet?

how it is translated into that in the index.html file and there is no link for style sheet
If you pay close attention, there is even no <script> in the HTML file to load your JS application, but it still works!
As implied by Kokodoko in the question comments, some React tooling is at work here. It is usually based on webpack build engine, which uses loaders and plugins to handle different types of files (including your CSS), and to generate an HTML file based on your template, but with injected <script> and <link> (or <style>, depending on your actual loaders and their configuration).
There would be too much to cover if you want more explanations, but there are a lot of resources that describe the history and how it works in details. See e.g.:
webpack concepts: https://webpack.js.org/concepts/
HtmlWebpackPlugin: https://webpack.js.org/plugins/html-webpack-plugin/
BTW, Angular works this way as well, regarding bundling and injection of script and style into HTML.

Related

How to load javascript files dinamically on server side rendered website?

There is a website with a lot of javascript files. Website uses no framework just webpack, jquery and other plugins which are installed through npm. Just simple html site and laravel for backend.
All javascript files are required to main.js. And main.js files is added to template html file.
How to load for each page only files that are needed for that page? For example if you visit contact us page client should load only contact.js file without other files like products.js, register.js and etc.
Ofcourse I could include each js file to its page without loading all js files in one file. But maybe there is smarter way how it could be implemented on my situation from javascript and webpack side?
Now my javascript file size is 2mb, some pages needs only small part of it. So, I need for each page load only what is needed for it.
If it is a classical server, then I don't think it's possible. With a Javascript library like React, you could've considered code splitting.
I think your initial approach, which was splitting them into their respective .js files is, as it stands now, the best approach
May you use RequireJs ? It will optimize your Code &' Performance

Understanding Laravel Mix

Understanding Laravel Mix
I am currently in the process of migrating one of my websites to Laravel in order to make it a little more maintainable in future... I have plenty of experience building API's with Laravel but I have very limited experience building websites with Laravel and resultantly I am in need of a little bit of guidance from another pro.
In short, I would very much appreciate answers to the following very simple questions if anyone can spare me a couple of mins...
File based JS & CSS instead of App based
I like to write my JS and CSS files in a particular way where each page has their own specific files relevant to the page. For example, about.php might have the following dependencies:
JS:
jquery.js
any_other_third_party_library.js
app.js (global functions)
about.js (page specific functions)
CSS:
some_third_party_library.css
app.css (global styles)
about.css (page specific styles)
On my own framework, the above would be combined and minified into one file for JS and one file for CSS. From what I understand, Laravel Mix does exactly this...
However, as far as I can see, the way to do this would be as follows:
webpack.mix.js:
// About
mix.scripts([
'resources/assets/js/app.js',
'resources/assets/js/about/about.js'
], 'public/js/about/about.js');
Very simply, what I would like to know; is the above the correct way to go about this? Is there a better, more efficient, way to automate this for each page?
What are the bootstrap.js and app.js files?
From what I can see, these files just load dependencies but this is a little confusing as some dependencies might be page specific... Please can someone explain in a little further detail what these files are for? Or at least, what the difference is between them...
Getting rid of Vue
I have no interest in using Vue in my project so I have deleted the following files:
/components/Example.vue
and the Vue code in app.js
Does this matter in any way?
You'll bundle up all your styles and scripts a single file each and serve them to the client minified.
For front end assets, call mix.sass('resources/assets/sass/app.scss'). In that entry point to your styles you will be able to import your other stylesheets as you need using Sass's #import 'about'; syntax. (Rename your other CSS files to end in .scss too).
For your back end assets, call mix.js('resources/assets/js/app.js'). Then, similarly you can import other JavaScript modules using import './about.js';. You may want to look up ES2015 modules so you can learn how to write modular JavaScript.
Read through the bootstrap.js file to see how Laravel hooks up jQuery and Vue by default. You don't need any of this, so remove whatever you don't want or delete the entire file if you don't need any of it.
Vue comes out of the box with Laravel but it's just a suggestion, you can replace it with your own front end framework of choice or rip it out and replace it with nothing. Up to you.
Edit: Long story short; use mix.sass and mix.js, read up on using Sass and ES2015 modules to write awesome code.

Web Page Performance - CSS and JavaScript in Separate Files? [duplicate]

This question already has answers here:
Comparison of loading CSS inline, embedded and from external files
(10 answers)
Closed 6 years ago.
Looking at the Google HTML/CSS Style Guide, I don't see anything specific. It seems like putting the CSS and JavaScript in the HTML file would perform better than loading external files.
For production Websites, should I include everything in 1 file, or no?
Usually when you develop, you split up your code in your project tree. So you have a large amount of js, and maybe css / sass / less files.. which represents smaller components for your project.
When you are going to launch your project to production, you usually have build program which concatenates all the files into a single bundle and this bundle is also minified, for faster loading like bootstrap.min.js for a example.
Take a look (google) for some production ready packer like:
brunch
webpack
It depends on your preference . but in most cases you would like to write code in separate files because when you work on big projects it can start to get confusing when you have css ,js and html in the same file .
plus the difference it will make is minimal to none.

Webstorm JavaScript External Libraries vs Project Directories

In IIS and therefore VS, there are virtual directories which allow simplified, virtual, relative referencing in script tags. They are handy. In WebStorm you can get the same effect with Project Directories and then marking your project root as a Resource Root. If you do this, you also get coding assistance in the text editor.
WebStorm also has External Libraries, what is the point of these?
Is this for when you have a link to a CDN in your script tag and you want to get coding assistance? If you already have Project Directories, what is the point of External Libraries?
I've seen this answer and I kind of get the different modes of referencing/inclusion, but I don't get the big picture. What is the core reason for the External Libraries vs the Project Directories?
Is this for when you have a link to a CDN in your script tag and you want to get coding assistance?
Yes, this is the most common case - WebStorm can't use online resources for code assistance, it needs to have the corresponding javascript files available locally. So, if you don't like to pollute your project folder with all these library files, you can have them stored outside of your project and set up as libraries.
What is the core reason for the External Libraries vs the Project Directories?
See above - external libraries allow storing library files in an arbitrary location outside your project folder and still get code completion/highlighting/etc. Please also see the answer you refer to:
Note also that libraries are 'light-weight' as compared to .js files in your project - they are treated read-only, have the inspections turned off. Plus, you can assign documentation URLs to them, enabling external documentation for library code. So, even if you have your library files in your project, it might make sense to add them as libraries
see also this blog post

how to create makefile in javascript? [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Make File for Javascript
Actually i am writing some javascript for testing purpose.
i want to use multiple javascripts in which functions are defined.
Is there any way to achieve this ?
I think Make file is the way.
But i don't know that also.
I want to generate make file.
Can any body suggest me how is to be done?
Creating makefile is an interesting solution, but you can also use require.js library to set the sequense of loaded scripts.
If you looking to combine multiple scripts as one. You can the use build script Boilerplate.
Why to use it? Its not only about scripts.
Combines and minifies javascript (via yui compressor)
Inlines stylesheets specified using #import in your CSS
Combines and minifies CSS
Optimizes JPGs and PNGs (with jpegtran & optipng)
Removes development only code (any remaining console.log files, profiling, test suite)
Basic to aggressive html minification (via htmlcompressor)
Autogenerates a cache manifest file (and links from the html tag) when you enable a property in the project config file.
Revises the file names of your assets so that you can use heavy caching (1 year expires).
Upgrades the .htaccess to use heavier caching
Updates your HTML to reference these new hyper-optimized CSS + JS files
Updates your HTML to use the minified jQuery instead of the development version
Remove unneeded references from HTML (like a root folder favicon)
Runs your JavaScript through a code quality tool (optional)
If you have several separate files and you want to append them all it into one file before, f.i. using it one your website, then any script or tool is good: Make, Rake, Cake, or your own, in your language of choice. If it goes to the web, it should be also compressed. Now how to do it, is beyond scope of this question, there are loads of articles on the web about all those topics. You are encouraged to come back when (if) you hit some more detailed problem.

Categories