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"));
Related
If we are using react component libraries we need to pass style in props, how this aproach is helpful than setting bootstrap style inside className
We can do bootstrap styling. There is nothing wrong with it, by writing className and giving bootstrap class name and everything.
But in react, we can create a component which means we can divide our App into smaller app and control the inside data through props and state. So by passing the style through props gives us more flexibility, we can customize the component design based on its data. I think this is the main feature that we can get.
I'm trying out ReactJS.NET in a .NET Core MVC project where I've got an ASP.NET View (cshtml) with a React component in it, which I initialize with:
<script src="#Url.Content("~/Scripts/myComponent.jsx")"></script>
Now I want to pass data from the ASP.NET View to the React component. For example, calling a React function when I click a button on the ASP.NET View. Is this possible? I know it's a basic question but I couldn't find any help since in all examples the data is only passed between React components and not from outside (ASP.NET View).
I couldn't find a way to do what I described in this question. So I ended up coding the whole page in ReactJS, which took some time to get into but it worked out well and I didn't have to mix technologies.
Declare a JS variable in a script and assign a property value from the Model:
<script type="text/javascript">let modelProperty= '#Model.ModelProperty';</script>
<script src="#Url.Content("~/Scripts/myComponent.jsx")"></script>
Then use that modelProperty in your ReactJS script:
ReactDOM.render(<MyComponent prop0={modelProperty} />, document.getElementById("yourTargetElementId"))
Maybe there are more neat solutions...
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.
I planned to use materialize:materialize package to a meteor app. As I can understand materialize use a lot of javascript for effects, collapsing and so on. Meteor has its own event handling but I suppose materialize will use jquery (I suppose I don't need to add jquery, it's included, or?) and will be running outside meteor events.
Is it enough to just add the package and everything will work, not just the look but also the javascript (feel)? I am trying to get it to work with a materialize template I bought and its not optimezed for meteor so I have problems to make it work.
Has anyone try this setup and is there any suggestions for good sources.
Using materializecss with Meteor works great, but you will have to initialize jQuery plugins yourself (just like in a regular HTML5 app without Meteor, as Materialize docs hints at).
Meteor templating system includes automatically jQuery, and you will have to use template.onRendered to correctly initialize the plugins, as opposed to initializing them in a $(document).ready callback.
For example, here is a simple Materialize dropdown markup inside a Meteor template :
<template name="myDropdown">
<a class="dropdown-button" data-activates="my-dropdown">
My Dropdown <i class="mdi-navigation-arrow-drop-down right"></i>
</a>
<ul id="my-dropdown" class="dropdown-content">
<li class="js-first-item"><a>First item</a></li>
<li class="js-second-item"><a>Second item</a></li>
<li class="divider"></li>
<li class="js-third-item"><a>Third item</a></li>
</ul>
</template>
And here is the according plugin initialization :
Template.myDropdown.onRendered(function(){
this.$(".dropdown-button").dropdown({
hover:false
});
});
You should use standard Meteor events to handle user interaction :
Template.myDropdown.events({
"click .js-first-item": function(event, template){
console.log("clicked on the first item !");
},
[..]
});
Overall, your Materialize theme integration into your Meteor app is not something as trivial as droping the theme inside your source files and meteor adding materialize:materialize, but it should not be something overly difficult.
Sometimes you'll hit Meteor related issues when trying to initialize Materialize plugins but the corresponding markup is not yet rendered into the DOM, see this question for a possible solution : Meteor + Materialize: collapsable in for each doesn't work
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.