I want to implement react js to different pages of my website,
e.g
in home page, registration, login, etc.
all tutorial i have seen it only uses 1 app.js how can i achieve this
to multi page app.
P.S i am using laravel elixir and i combine them into 1 main.js.
Add a mounting point in the pages that you want your React App to be mounted.
e.g.
// main.js
ReactDOM.render(<App props={/* props from somewhere */}/>, document.getElementById('mountingPoint') );
// rendered HTML from pages should have
<div id="mountingPoint"></div>
I found this https://github.com/christianalfoni/react-webpack-cookbook/wiki/Multiple-entry-points
I think this is more appropriate on what i need and then i will just map the file
name in my laravel app.
this way i dont need to load the js code for contact_us.php to login.php
You could also use something like React Habitat to make this architecture easier.
With it, you could just define a container of your components so they resolve in your DOM.
For example, in your javascript you would do
import MyComponent from './Components/MyComponent';
...
container.register(MyComponent).as(myComponent);
Then in any of your HTML pages
<div data-component="myComponent"></div>
It also supports multiple containers and async code splitting.
Related
I have page that has v-tabs using the nuxt attribute, each tab directs to a dynamic route
cars/_brand_name/index.vue (making the _brand_name a mandatory parameter)
When I load the page /cars/bmw: mounted get's called successfully but after switching to other tabs the URL updates correctly but the page no longer re-renders, mounted no longer getting called.
Am I missing some part of the lifecycle? Should I be watching the route param and force the page to reload? I don't remember needing to do this with Vue alone.
This is often caused when the route component is the same as previous route. The best way to force Vue to re-render the page is to set a :key attribute on the router with a unique value, it is common to use $route.fullPath.
Update your router view like so.
<router-view :key="$route.fullPath"></router-view>
I'm ReactJS developer (react, flux, react-router, gulp, nodejs etc...).
How do I embed react components into blade template?
Or, at least, where should I start searching for answer?
Please, let me know, if I can provide any more useful information on this case.
You don't embed them in your blade template, your template provides a DOM element which the React component can render its output to. For example, in your template you have:
<div id="root"></div>
and in your javascript/jsx:
React.render(<MyComponent/>, document.getElementById("root"));
I wonder if exists a way to put component into module without install plugin, neither component nor module.
Thanks and my apologize for my bad English.
First, should unable Editor from configuration site, in Panel Admin. Then, go to Extension -> Plugins -> TinyMCE and delete forbidden items "script".
Now, go to "create module", with custom HTML5 and put something like this:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="new-projects">
</div>
<script type="text/javascript">
$( "#new-projects" ).load( "urlOfYourComponent #idYouWouldShow" );
</script>
Thanks to Ilias cause the idea.
The only way to achieve this without installing any extensions is via a custom HTML joomla module where you'll place your component in an iframe.
Then if you want to load only the component part of the fetched page in the iframe use jquery's load function.
If i'm correct, You don't wanna install any kind of extension that do that, you ask for vanilla possibility to put component into module, so this is the answer, there is no way to put whole component into module. Partial Example: You can put article into custom HTML module or list categories into modules, but you will never see whole component into module. Why? Because component its a core thing on site, like people in building (or even the whole building) eg. house, and module is like painting on the wall, You can't put building on the painting.
I'm using jet-pack carousel in my gallery website and i want to add image rating capabilities. I have the "wp-postratings" plugin running on the rest of my site.
I'm assuming that i could add this to individual images as wp treats each image as a post, if so where would i find the template i should add this code to?
All the plugin requires is that i add one line of php to the page/image but i can't figure out where it shoud go as the code for carousel seems to be entirely js and php generated.
demo: http://so.devilmaycode.it/adding-rating-feature-to-jetpack-carousel/gallery/
in a js file jetPack_meet_wpPostRating.js copy this code (place the file in the js folder of your theme):
https://gist.github.com/aSeptik/9739808
in the functions.php file of your theme put this code:
https://gist.github.com/aSeptik/9739808
NOTE
after installing the above scripts make sure to delete the browser cache before test.
tested with latest wordpress, jetpack and wp-postrating versions.
this will also work with multiple gallery in the same page.
does not need to put any extra [ratings] shortcode anyware.
the bounty for this answer is too low... ;)
FIX
Fixed bugs added some check and debug to consol.log...
You can use hook into the Jetpack Carousel on the server-side
(like to output your data, for example).
Then on the client-side, get your Javascript rating code to
load after the Jetpack+Carousel JS, and hook into them
(hook on the bindings, etc).
JetPack provides 2 JavaScript hooks:
1) jp_carousel.afterOpen
2)jp_carousel.beforeClose.
Action hook code example
I have 100 different url's each pointing to plain html pages, I have to convert these plain html pages to extjs pages. Footer and Header is same for all the pages but center section is different for different plain html pages.
In order to leverage maximum code I thought to create an EXTJS4.1.0 application which will have model, view, store and controller but separate index.html, app.js and viewport.js. The reason for separate index.html, app.js and viewport.js is that if I don't keep single index.html, app.js and viewport.js then I will not be able to bookmark the pages (Since users and using 100 different urls for 100 different pages) so basically I will have 100 different app.js and corresponding viewport.js (viewport.js will have common components for footer/header etc and specific components for screen) but at one point of time only one index.html, app.js and viewport.js will be active/run.
My first question is, is the solution I just mentioned a correct solution.
Is it true that in Extjs MVC pattern you can only have one Viewport.js file per application if you use autoCreateViewport: true.
Secondly if you use autoCreateViewport: false in Ext.Application (in app.js ) and create instance of different Viweport in launch method as follows:
Ext.application({
name: 'Panda',
autoCreateViewport: false,
launch: function() {
Ext.create('Panda.viewport.ViewportOne')
}
});
Notice that I have created instance of ViewportOne which is one of 100 viewports. With this solution also I ran into glitches while running the application (some navigation will not work etc). Is it because extjs does not allow viewport with name such as Panda.viewport.ViewportOne, Panda.viewport.ViewportTwo etc.
How in Extjs I can create fully MVC style application with bookmarkable pages such that each page is part of same extjs application (ie it leverages same model view, store, controller and dynamic loading).
The company I work for has lots of customers who are using an application which was build on plain html and javascript. Each uses works on only one page of that application which he has bookmarked on his browser.
The task I am given is to upgrade those plain html/javascript pages to Extjs one such that uses dont have to update their bookmarks.
At my end I am thinking to create single application in Extjs 4.1.0 which will have 100 pages (index.html, indexOne.html etc which user will bookmark) each if which can use common Model/view/store and controller.
So basically my entry point to application will be different but all pages will be using same model/view/store/controller.
Its more of an architectural question.
Hope this help.