I am a newbie to react js. I already have a project running on yii2 framework with frontend in traditional way ( Html , css ) but now need to run the frontend code using js.
I tried to include react files in AppAsset class like following
public $js = ["https://unpkg.com/react#15.1.0/dist/react.min.js","https://unpkg.com/react-dom#15.1.0/dist/react-dom.min.js","https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js","https://unpkg.com/babel-standalone#6.15.0/babel.min.js"];
and placing simple code in index.php
<div class="site-index">
<div id="helloWorld"> </div>
</div>
<script type="text/babel">
class HelloWorld extends React.Component{
render() {
return(
<div className='jumbotron text-center'>
<h1> Welcome </h1>
<p> Welcome to My Yii project powered by React Js </p>
</div>
) ;
}
}
ReactDOM.render(<HelloWorld></HelloWorld>,document.getElementByid('helloWorld'));
</script>
with no success. It just simply create a div site-index without actually rendering the render function of helloworld class.
I also tried to include all the react js to my index file but still the outcome is same. I guess i am missing something on how to include the js files and that's why my render is not working.
Related
I started a laravel + vuejs project (fontend and backend in the same project).
It is basically a migration from a pure php-html project. I am wondering if it would be possible to migrate only a part of it, and to integrate the rest of it.
After your answers (thanks :) ), here is myview.blade.php:
#extends('template')
#section('contenu')
<div id="app">
#php
$path = public_path('myview/oldfile.php');
include($path);
#endphp
</div>
#endsection
Now I have an issue:
** Issue 1 **
I have this kind of code in the old php files:
<script type="text/javascript" src="./js/jquery-1.7.2.min.js">
but I also have scripts in my template (which contains the navbar and footer). Then of course I get this error
[Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
** Issue 2 **
$.post("./myview.php", "mode=activateForm&id1=<?=$id1?>&id2=<?=$_GET["id2"]?>", function() {
MethodNotAllowedHttpException
The POST method is not supported for this route. Supported methods: GET, HEAD.
The new issue is this, and I don't get why...
Any suggestions?
When you use #include in blade template it will look for the file inside of resource/views directory.
so use it like #include('posts/index').
where it will look for index.php inside of views/posts/ directory.
Do not use .php inside #include.
#extends('template')
#section('contenu')
<div id="app">
#include("yourDirectory/oldfile");
</div>
#endsection
Use the public path helper.
Put the files in your public folder and use public_path('filename.php'); in your include statement.
I am a beginner in using CodeIgniter Framework. Previously, I have learned Laravel. and my problem is I want to make dynamic template like Blade in Laravel. So, in every pages I just load the style and script that only needed by that page.
Here is the code, that I created with CodeIgniter so It could be dynamic to load custom style and custom script.
template.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
// <hmtl>
$this->load->view($header);
if(isset($style))
$this->load->view($style);
// <body>
$this->load->view($navbar);
if(isset($sidebar))
$this->load->view($sidebar);
$this->load->view($content);
$this->load->view($footer);
// </body>
if(isset($script))
$this->load->view($script);
// </html>
and my controller
public function index()
{
$data = [
'title' => 'Home',
'header' => 'partials/_header',
'navbar' => 'partials/_navbar',
'content' => 'guest/public',
'footer' => 'partials/_footer'
];
$this->load->view('template', $data);
}
maybe you have better thought, because I am stuck with it. in Laravel it's easy because there is #yield and #section. any ideas from you guys, would be so helpful to me, thank you.
finally, I just figured it out the best way make it dynamic. how to load custom script and css in every different pages.
here is the code for template.php (inside views folder)
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$this->load->view($header);
$this->load->view($navbar);
$this->load->view($content);
$this->load->view($footer);
and the controller controller
public function index() {
$data = [
'header' => 'partials/_header',
'style' => 'partials/style/_public_css',
'navbar' => 'partials/_navbar',
'content' => 'guest/public',
'footer' => 'partials/_footer',
'script' => 'partials/script/_public_js'
];
$this->load->view('template', $data);
}
and in the partials view of _header.php
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>...</title>
<!-- Partial CSS Here -->
<?php if(isset($style)) $this->load->view($style); ?>
</head>
<body>
_navbar.php
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
....
</nav>
</header>
then the content variable in controller, it loads public.php (in my case, you have to replace with any pages you want to load)
<div class="container">
....
</div>
and the last one is _footer.php
<footer>
....
</footer>
<!-- JQuery HERE -->
<!-- any js that you will you in all pages HERE -->
<!-- Partial Script Here -->
<?php if(isset($script)) $this->load->view($script); ?>
</body>
<html>
Remember, if your footer does static in every pages place your JQuery in _footer.php and if it doesn't just place the jquery in the _header.php even it's not the best practice to load the script first.
I did something similar once, sometime ago admittedly now, but I did it all in a template library.
Using setters like
$this->template_library->set_css_script('page.css');
$this->template_library->set_layout('product_page');
The controller would end with a call like:
$this->template_library->render_page();
The template library would then use the load->view functions to create the page and output it depending on the values that were set or not set, and the page layout meant I could have various set layouts like home_page, product_page, checkout_page, message_page etc etc.
For the layouts, I had one master layout that did the main page, and variations for the different pages.
In the end though I reverted to simple views, with common files for header and footer and any variants. It was just easier to maintain lots of different view files than it was to maintain all the layouts and templates and partials.
One thing that helps a lot is that a view can load another view. So for the sake of keeping everything DRY, this means that any derivative page part views can be kept in a 'partials' folder for things like 'related products' or 'blog_list' etc.
Hope that helps.
actually am working on a php website, and am finished with it, and I want to make a good style to my project, I found many templates and am interested to “one-page bootstrap templates”, i have downloaded ones and don't know how to use them, I want to put my php pages in one of them but I don't know how to do that.
if you are coding php without any framework and template engine you can combine php and html( here bootstrap template) like this :
<html>
<body class="container">
text
<?php if $list=true ?>
<ul>
...
<ul>
<?php endif ?>
</body>
<html>
I am loading a part of view in by main view using a PHP variable
here is the code of the view
<body>
<div id="wrapper">
<div id="gallery">
<?= $view_thing ?>
</div>
</div>
</body>
and my controller is
$data['view_thing']=$this->load->view('model/portion',$data); //$data gets data from model
$this->layout->view('model/model',$data);
but the problem is "$view_thing" do not show things in the div in which I wrote it, this page is shown below body tag
note:I have wrote only a part of code from my view
The view loader function needs a third argument to return it as a string, as said in the documentation, for example:
$data['view_thing']=$this->load->view('model/portion', $data, true);
In ASP.NET MVC applications can use dynamic pages as follows:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div id="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="content">
#RenderBody()
</div>
</body>
</html>
with RenderBody () method that renders the content of a page in another.
How I can render the content pages on a main (index.php) page PHP Case 1, with the Codeigniter Framework and Case 2, normally without the framework?
Excuse my English, as it is not my native language!!
Regards,
Mauriciohz
In Normal PHP,
You can use any of include, require , include_once or require_once.
In Codeigniter,
You can load content part alone with use of below code:
$this->load->view("view_file_name");
here view_file_name is your view file which exist inside the applications/view folder.
You have to give without extension.
For ex:
your content file name is "content.php". applications/view/content.php
You can load as:
$this->load->view("content");// without ".php" extension.
You could use the include or require function in php.
Example
include('path');
require('path');
include_once('path');
require_once('path');
The _once would make sure that the file is never included multiple times throughout the script.