Should ReactJS be used in conjunction with an HTML file? - javascript

If I were to use ReactJS to build a website, should I add the javascript source code to an existing HTML file or should I just write it all and render it in the javascript file? How do most developers go about using React? Are .html files ever used during development or is it all done using .js files? Sorry for the basic question, I am just trying to figure out the best way to use React. Thanks!

depending on how you create your project you can either have 0, 1, or more than 1 html files - this will depend on how manually you create the project (see the bottom of this answer for more context regarding create react app). most projects have 99% of the code as .js/.jsx files. most projects also use webpack to bundle the code into 1 final js file but that's not a requirement, you can just load react and your code each into a <script /> tag in your html file.
99% of the time react will generate the html for you. there are instances where you want to inject pre-written html but that's a different topic and a small use case.
another use case where you may need multiple html files is if you have different application entry points, but it all really depends on what you're doing and the structure of your project, there's always more than 1 way to do this.
as #Mellet points out, you can also use Create React App, which allows you to not have to even create the html file. again, it all depends on your needs and wants

Related

Creating a Javascript bundle with a few components for reuse

I have a backend rendered page (django in case it matters) which I want to soup up a little using some components from PrimeVue and a markdown editor packaged as a vue component. Right now, we have a few small animations using jquery for which we include jquery from a CDN directly into our pages. A few months ago, we needed to spice up a page using some more client side interactivity and we included vue.js via a CDN onto that page (dropping jquery) and then wrote some javascript in an index.js that we also loaded up from a CDN and got our work done. This is the current state of affairs. The page currently looks like this
<html>
....
<script src="https://cdn/vue.js"></script>
<script src="/static/index.js"></script>
The div #mainvue is where vue runs and does what it needs to.
This is where we are now.
Using plain vue is okay. Now, I'd like to throw in a few components from primevue as well as a 3rd party markdown editor that's wrapped as vue component. I want to bundle all of these as wel as plain vue itself into a single javascript bundle that I can throw onto a CDN and include into all my pages. Then my devs can do their day to day work in the index.js.
Is this a reasonable approach and if so, how do I do it? I'm not familiar with the javascript ecosystem. If not, what's the right way to solve this problem. I don't want to go all the way SPA and REST API. I just want to use a few 3rd party components and vue on a simple otherwise backend rendered page.
Since you mention you don't want to "go all the way SPA," a reasonable hybrid to is to use Vue in MPA (multi-page app) mode. This will require using a vue-cli/webpack configuration to compile your Vue components into bundles, but once you have this build pipeline, these bundles can used in individual Django templates via django-webpack-loader. Information can be passed from Django via template variables directly as Vue component properties.
Re bundling, yes you can bundle all these resources into a single JS using this method, but it's nearly as easy (and far more performant) to create one or more common bundles that represent shared logic (third party libs, invidual components, even Vue itself) and then pick and choose from among these bundles as needed on individual Django templates.
The steps to implement are a bit too involved to post directly here, but I've written a series of articles Django + Vue -- Best of Both Frontends that explains. There's also a cookiecutter for boostrapping new projects using this method. I realize you already have a site, but you can perhaps adapt the implementation there.
Good hacking!

How can I link an angular .ts file to an already created html page?

I am working on a website and I am completely done with the html pages but I need to use angular in order to complete the website.
I have only ever used angular while working on ionic apps and I’m aware that the CLI generates the html, ts and css pages but I was wondering if it’s possible to link the html pages I’ve already created to the ts file?
There is no "right" answer to this question, but there are two ways to go about this.
Break down the HTML into components
Honestly, this is the preferred way. Break down your page into reuseable components and compose them like you would do in an ionic app.
Enhance the existing HTML
You could put your HTML into your index.html, or better, your app.component.html, and only extract components where you need to make your html dynamic. This is not really the angular way though and will be difficult to maintain on the long run - but technically, this works.

How to organize Vue-JS : Non Javascript way?

How to organize Vue-JS project [files and directory]: Non Javascript way?
Coming from a non-javascript background, I found Vue.js very intuitive and easy to use. My earlier experience in Javascript is with JQuery and vanilla javascript on the browser.
I created an application using Vue , Vue-components and vue router. Everything works fine.
My problem is, I have ended up writing a lot of code in a single index.html file of my project. This file contains over 10 templates that I have created and attached to different component in my app. I want to know that is there a non-javascript way to organize these templates in seperate files.
I see that there are options using webpack and browserify to modularize the project. But coming from non javascript background, I don't find them intuitive. I don't want to go node - npm way because that has its own learning curve and moreover it downloads a dozen of files and dependencies in my project which I don't understand. I am old school and more comfortable downloading the files and including them in the webpages.
So probably, you understand where I am going to. I need a solution where I could put my templates as separate files and read those files in the different components.
What I have tried :
Declaring the templates inside my components. But writing all that html inside the component is not that clean. It also, makes my JS file too huge. I am better in putting all data in the index.html instead.
Storing template as smaller chunk "homepage.html","about.html" and in my components, using $.get / $.load to read different components in ready function of the component. This works but I still have to fire an additional ajax call for each component which is not efficient.
Please refrain from suggesting the obvious node-npm [webpack and browserify] way. I know thats what is supported by Vue but this needs a learning curve and complete setup. Answer to this question would actually help other developers who hesitate going the node-npm way.
Please shout back if you need more clarifications to the question.
The options you've mentioned are your only real ones... the HTML of the template needs to be available when it's needed, so you either have to have it within your html file off the bat, or load it using AJAX or an in-browser loader like RequireJS (and this extension that allows it to load HTML https://github.com/requirejs/text).
In-file templates make sense for very small projects. As your project grows, you'll need to start using the tools that are built for this. NPM rocks and every JS package that you'll ever need can be included in your project in seconds.
I highly encourage you to try the Vue CLI
It does use node, npm, webpack and downloads dozens of files. Which you've you've explicitly asked for not to use, so let me clarify:
The Vue CLI takes care of the complexity and configures webpack for you.
You don't even have to know it's using webpack.
It's very developer friendly (it even has a built-in gui) and lowers the barrier to entry compared configuring a webpack config.
I hope you'll also find it "intuitive and easy to use".

Is It Possible to Dynamically Generate JavaScript Reference Directives?

I'm working on a team of developers that keeps reference directives in various files for intellisense purposes. As you can imagine, it's impossible to maintain these files. As such, I'd like to know if there's a way to dynamically generate them. Any way. At all. No matter how kooky.
Here's a reference to the kind of thing I'm talking about: http://msdn.microsoft.com/en-us/library/vstudio/bb385682.aspx#ReferenceDirectives
I'm trying to do this on the fly. Say, to dynamically make some references for every js file in a folder. Whatever. Anything. I'll run with it once I get a good starting point.
Why not use T4 to read all the files in the current folder and below? (accounting for, if necessary scripts that are not actually included in the project but present in the file system).
Or even better and more likely related to what you are trying to do?
Use the nice centralized _references.js VS helper for scripts that are core in functionality to the others that you are editing.

jquery structure - one function per file

I am primarily a c# programmer. I have recently been getting into some jquery development. when I am working on applications in c#, I create a new class file (.cs) for every new class that I create.
How do people generally structure their jquery/javascript applications. I would like to reuse some functionality across pages, so do I put each function in it's own .js file? or is it best practice to group like functions into files? I can't see putting each on in it's own file as that would create many calls to import individual file into a page....
How are other people handling these types of situations.
Thanks for any thoughts.
EDIT - I should have mentioned that I am beginning to look at unit testing with QUnit and figured it would be good to have proper structure of my project to better facilitate unit testing.
If you DO put them all in separate files, you would want to have a build script that combines and minimizes them into a single one (or just a few) so you do not have 500 Javascript files to download to your browser.
I would suggest putting your common functionalities to a util.js file and then arrange your javascript codes according to functionality.
However it is not a good practice to have lots of js files included in every page, thus you might consider combinin the files into a single file and minifying that final js file. this way you would have optimized your final product while being able to unit test functionalities separately.
I generally keep all plugins into their perspective files but functions I create I tend to place into a "global.js" file that the entire site will pull from. Then I don't have to worry about pulling in specific files when a need a specific function. It will all be in the global.
Put it all in one file. Multiple HTTP requests are more expensive than big files, plus you're assured that the file containing the function you need is already loaded.

Categories