Basically i have a file that generates some data and writes it to a rudimentary html file. I made a simple React app to better parse and display the data but it's useless if i have to run a server every time. All i really need is a shortcut html page that runs the react all as a standalone. Hope this make sense.
What you're looking for a static templating engine in client side.
However, to answer your question, yes, definitely it's possible. But you just need to include the needed dependencies. Also, note that this is not optimised for production.
<!-- The root where React App gets rendered. -->
<div id="root"></div>
<!-- React JS and React DOM Libraries. Add Babel for transpiling, as you might use JSX. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<!-- The real React JSX App -->
<script type="text/babel">
class App extends React.Component {
render() {
return (
<div>
This is React!
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>
It sounds like the generation of static HTML. You do not need React in such a case. Just use pug or another template engine of your choice.
Related
I have a React component like this:
function MyComponent() {
return <button onClick= (() => executeSomeGlobalFunctionOutsideReact("xxxx")) />
}
I'm doing SSR, so the html served is:
<button />
And later I need to: import react, import react-dom, wait the download of the assets, etc, etc, etc, and later hydrate the code.
To avoid that, I want to use React as a template engine, but serve vanilla html+js:
<button onClick=( () => executeSomeGlobalFunctionOutsideReact("xxxx") ) />
There is any way to "preserve" the onClick? any way to generate html code with react in the server, and avoid to use react in the client?
In a nutshell, I'm trying to do a really fast and simple website/landing page but I don't want to inject React in the client side. I don't need any kind of state managment, mutation of the dom or reactivity, but using react as a template engine can save me a lot time reusing components, because of that I want to use some simple vanilla javascript to add the functionalities and avoid the use of external libraries.
I'm thinking about adding custom html attributes and add the js code via global functions, something like:
document.querySelectorAll('[data-execute="something"]')[1].onclick( () => executeSomeGlobalFunctionOutsideReact("xxxx") )
but I want to avoid this kind of magic.
Thanks!
I try to upgrade some of my "old project" interface element with some vue.
My old project is an php/html project without framework.
I make some test with vue-cli for different component for chart or for grid.
Now I want to integrate this component in my old project but the "import" of component doesn't work.
For example, in one page I need an ag-grid so I get ag grid vue.
But the basic
import { AgGridVue } from 'ag-grid-vue';
doesn't work because he can't get "ag-grid-vue".
It's not an vue app it's vue from html.
If I use import { AgGridVue } from '/component/ag-grid-vue/main.js'; that's say "The requested module './component/ag-grid-vue/main.js' does not provide an export named 'AgGridVue'"
If I use import AgGridVue from '/component/ag-grid-vue/main.js'; that's say "The requested module './component/ag-grid-vue/main.js' does not provide an export named 'default'"
I don't need the same component in my different page.
So the question is : How can I import my vue component ?
if you are not using vue in your old project, then you can't use it. Alternatively, you can use Vue cdn and use ag Grid cdn as well.
https://www.jsdelivr.com/package/npm/#ag-grid-community/vue
html file
<body>
<div id="app">
<!-- I think you can put the component here -->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#ag-grid-community/vue#25.0.0/main.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
You can explore more from here.
In Vue, there's this feature where you can render a registered component directly to an HTML or Laravel Blade file using Vue.component()
instead of mounting them to a parent component/element first. I wonder if such way is also possible with React, because I'm currently building a Laravel-React side project. You might suggest just create a root JS file and render the component with ReactDOM.render(), but that would be a hassle and it would flood the folder if I want to render multiple small components.
In your view blade just add div like below
<div id="react-component-id" ></div>
and create component and render you html as below:
if (document.getElementById('react-component-id')) {
ReactDOM.render(
<yourCreatedCompoennt />,
document.getElementById('react-component-id')
);
}
So it will not affect root level.
I have an MVC 5 project (.NET Framework) where a set of Views have the same set of #section styles and #section scripts blocks.
#section styles {
<link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/buttons.dataTables.css" rel="stylesheet" />
}
#section scripts {
<script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script src="~/Scripts/DataTables/dataTables.buttons.js"></script>
<script src="~/Scripts/DataTables/buttons.print.js"></script>
<script src="~/Scripts/DataTables/buttons.html5.js"></script>
<script src="~/Scripts/jszip.js"></script>
<script>
$(() => {
// source js file defined in BundleConfig.cs
TableController.init();
});
</script>
}
Just as the one TableController.init() jQuery function rests in a single location and can be called in any View I choose, is there a way I can have only a single definition of this set of <link> and <script> elements be able to call it in any view I choose? The reason I did not put this in the _Layout file is that I might not want it on all Views -- just most of them.
I don't know what this technique is called, or even if it is possible in MVC. I just figured that it would be a useful way to avoid repeating myself. Furthermore, if I wanted to make any tweaks, I would only make a change in one place and not multiple Views.
Is there a technique I can use to achieve this goal?
You can create Bundles for anything you want, You can create a Bundle for an area or a single page.
//scripts
bundles.Add(new ScriptBundle("~/bundles/Custom").Include(
"~/Scripts/Custom.js"));
bundles.Add(new ScriptBundle("~/bundles/Custom2").Include(
"~/Scripts/Custom2.js"));
//styles
bundles.Add(new StyleBundle("~/Content/Custom").Include(
"~/Content/Custom.css"));
bundles.Add(new StyleBundle("~/Content/Custom2").Include(
"~/Content/Custom2.css"));
Now you can separate theese scripts and styles and add them only on page that you need.
Also I suppose it's good to define 2 sections in your _Layout.cshtml in head tag.
<head>
//other scripts and styles here
#RenderSection("scriptslib", required: false)
#RenderSection("csslib", required: false)
</head>
So now in your Views (Cabinet.cshtml and AdminPanel.cshtml) you can place your libs where they suppose to be like this:
#section scriptslib{
#Scripts.Render("~/bundles/Custom")
#Scripts.Render("~/bundles/Custom2")
}
By doing this it allows you to build complete bundles for sections or pages to use how you wish.
**
EDIT: thanks Adrian
**
You can add bundles as folders for future scripts using wildcards so you do not have to recompile, aswell as place a custom.js and custom.css in each folder for future edits or overrides you may want to add.
ADDING A CUSTOM FOLDERS:
Scripts
Custom
YourFiles.js
YourFiles.min.js
Content
Custom
YourFiles.css
YourFiles.min.css
Custom Bundles:
bundles.Add(new ScriptBundle("~/bundles/Custom").Include(
"~/Scripts/Custom/*.js"));
bundles.Add(new ScriptBundle("~/bundles/Custom2").Include(
"~/Scripts/Custom/*.*.js"));
bundles.Add(new StyleBundle("~/Content/Custom").Include(
"~/Content/Custom/*.css"));
bundles.Add(new StyleBundle("~/Content/Custom2").Include(
"~/Content/Custom/*.*.css"));
Now anything you place in those folders will be processed with a IIS App restart, I usually add a function to my applications to be able to perform the App Restart.
Hope this helps
Try the pool pro's idea, it's a great answer. For me I simply prefer to use partial views for referencing it.
Why ?
You need to compile the code again once you modify the c# file and add a another CSS or JS file. If you use partial views you don't need to compile the project again, you can just change views and upload.
Not pretty: You could use partialview and use it in views you want your links.
Put your partialview in your shared folder.
Then call this inside your view #await Html.PartialAsync("_SomeNamePartial")
More beautiful: Put all css in 1 file and all javascript in 1 file.
Best way and as it should be: Your way of doing it, #section is there for a reason.
I've got a little project in Angular. I'm trying to keep everything in the Single Responsibility way and
I'm quite happy with me app structure. The only think I feel is not looking very good is index.html. All js files are included on
the bottom of the file and I do not like the look of it. I'm adding more files (controllers, services, etc) as I go and the list
could grow quite long.
So my question is: Is it normal,that the index file includes all these or is there way to move all these in a single file and reference that in the index.html?
<html>
<head>
...
</head>
<body>
...
...
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/angular-touch.js"></script>
<script src="assets/js/angular-sanitize.js"></script>
<script src="assets/js/angular-animate.min.js"></script>
<script src="assets/js/jquery-2.1.3.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="app/app.js"></script>
<script src="app/app.routes.js"></script>
<script src="controllers/controllerOne.js"></script>
<script src="controllers/controllerTwo.js"></script>
<script src="controllers/controllerThree.js"></script>
<script src="directives/directiveOne.js"></script>
<script src="directives/directiveTwo.js"></script>
<script src="services/serviceOne.js"></script>
<script src="services/serviceTwo.js"></script>
<script src="services/serviceThree.js"></script>
</body>
</html>
Update 07/04/2015
I have end up using Gulp. For anyone looking for bit of help on this, I have followed this small tutorial: https://medium.com/#dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917
There are few possible solutions that I know that will automatically inject your script tags for index.html:
Using Gulp - Task / Build runner.
You can use Gulp-Inject which is:
a stylesheet, javascript and webcomponent reference injection plugin
for gulp
Grunt - JavaScript Task Runner
You can use Grunt-Injector for:
Inject references to files into other files (think scripts and stylesheets into an html file)
Another option which I didn't use is RequireJS.
See - http://www.startersquad.com/blog/angularjs-requirejs/
You can find many discussions on Gulp vs Grunt, Both will make your life easier and solve your problem.
See:
Grunt vs Gulp
Another Grunt vs Gulp
What i would suggest is using a task runner of some sort to concatenate all your files, and build them in to something like a single 'app.js' file.
My personal preference is gulp, but another popular alternative is grunt. Here is a nice introduction to using gulp with angular which I suggest checking out.
Using require.js , u can manage all tags in one line
This approach is utterly normal for a development stage as it facilitates debugging. You shouldn't be worried about the way it looks.
However, when releasing your application to production you should concatenate all scripts into one single file as this'll significantly boost your bootstrap time. There are different ways of achieving this goal and usually they involve usage of front-side build tools like Grunt or Gulp. It's is up to you to decide which tool will work best for you.
Moreover, require.js has built-in modularity with a easy-to-use tool for concatenation, though, it's argued that Angular benefits from using it as Angular has it's own modularity. The main advantage of require.js is that there's no need to pay attention to order in which your files are concatenated since it's responsibility of the tool. Unfortunately, it costs a lot of boilerplate code.
As a simple solution, in HTML5 you can do this
<link rel="import" href="header.html">
and place all your
<script src="libs/....js"></script>
<script src="libs/....js"></script>
<script src="libs/....js"></script>
in the header.html
It's ok. Separating different scripts into different files is a part of basic recommandations for code styling.
The best way is to use Google Style recommendations in work. These 2 are for html&css and javascript:
https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml