I have a problem adding React to my project. The component is not rendered. This is not SPA project.
I've tried easiest way. I've setup new project with 'laravel new reactexample', next I made 'php artisan preset react' and 'yarn run'. After that I added in welcome blade.php.
Example.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">
Example Component
</div>
<div className="card-body">
I am an example component!
</div>
</div>
</div>
</div>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
welcome.blade.php, fragmen
<div class="content">
{...}
<div id="example"></div>
{...}
</div>
webpack.mix.js
const mix = require('laravel-mix');
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
app.js
require('./bootstrap');
require('./components/Example');
Did I miss something in the configuration? What should I do to get rendered component on page?
Ok, I found solutoin. I must add
<script src="{{asset('js/app.js')}}" ></script>
to the page.
Related
I'have multiple auth laravel dashboard. When i login the default page redirect me to the client dashboard blade. When i write something in client blade.It does not show anything.I am using vuejs routers. Everything is working perfect. I tried to call component in that blade but it's still showing blank .I want to redirect to dashboard component.
Controller:
I tried it with the return url('url here') but still not working for me.
public function index()
{
return view('client');
}
Client Blade:
#extends('layouts.master')
#section('content')
<template>
<div class="container-fluid">
<client_details></client_details>
</div>
</template>
<script>
import clientdetails_header from "./clientdetails_header.vue";
export default {
data() {
return {
}
},
components: {
'client_details': clientdetails_header
},
mounted() {
console.log('Component mounted.')
}
}
</script>
#endsection
Master Blade:
<ul>
<li>
<router-link to="/clientdashboard" title="dashboard">
<span class="nav-link-text"><iclass="fal fa-user"></i>DashBoard</span>
</router-link>
</li>
</ul>
<div class="page-wrapper" id="app">
<div class="page-content">
<router-view>
</router-view>
</div>
</div>
App.js
let routes = [
{path: '/clientdashboard', component: require('./components/clientdashboard.vue').default},
]
const app = new Vue({
el: '#app',
router,
});
const router = new VueRouter({
mode: "history",
routes
})
ClientHeader:
<template>
<div class="row">
<div class="col-xl-12">
<!-- Collapse -->
<div id="panel-6" class="panel">
<div class="panel-hdr">
<h2>
Client Details
</h2>
</div>
<div class="panel-container show">
<div class="panel-content">
<div class="row">
<div class="col-md-2">
<span><b>Company name:</b></span> <br>
<span><b>Company ABN:</b></span> <br>
<span><b>Company address:</b></span> <br>
<span><b>Company phone:</b></span> <br>
<span><b>Company email:</b></span> <br>
</div>
<div class="col-md-10">
<ul style="list-style: none;" class="list-group list-group-flush">
<li style="text-decoration: none" v-for="todo in clientData">{{todo}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user_id: this.$userId,
clientData: {}
}
},
methods: {
getClientDetails() {
axios.post(this.$path + 'api/getClientDetails', null,
{
params: {
'client_id': this.user_id,
}
})
.then(data => (
this.clientData = data.data));
}
},
mounted() {
this.getClientDetails();
console.log('Component mounted.')
}
}
</script>
I don't think it's a good idea trying to put Vue code directly inside blade.
I would suggest you create a Client.vue and put your code in it instead. Register it in your routes in app.js.
...
{path: '/client', component: require('./components/Client.vue')},
Then you can use the component in your Client blade.
<client></client>
I believe that would be a first step towards resolving this issue.
Load your app.js in <head> section of your blade.php
<script src="{{ asset('js/app.js') }}" async></script>\
Also create a div with id app there.
<body>
<div id="app"></div>
</body>
Create App.vue
<template>
<div>
<router-view />
</div>
</template>
<style scoped lang="scss">
</style>
Go to resources/js/app.js file, you will see laravel already put code to instantiate vue in there. Register your route etc.
But for me, I create a new folder resources/js/vue, put all vue related files (components, routes, filters, vuex, mixins, directives) there, create index.js and moved the code to initiate vue inside index.js.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import components from './components'
import directives from './directives'
import mixins from './mixins'
import filters from './filters'
Vue.use(router)
Vue.use(store)
Vue.use(components)
Vue.use(directives)
Vue.use(mixins)
Vue.use(filters)
new Vue({ router, store, render: h => h(App) }).$mount('#app')
export default {}
resources/js/app.js
require('./vue')
// I also initiate service-worker, firebase, and other non vue related
// javascripts in this file
I'm trying to integrate reactjs with laravel .
So What I did is , changed my js from vue to react by using some commands.
Then I added Example.js file under /resources/js/components .
Then I added it in app.js
require('./bootstrap');
require('./components/Example');
my Example.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
Then I added a component of Example.js in my blade file.
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class = "content">
<div id = "Example" class = "title m-b-d">
</div>
</div>
<script type = "text/javascript" src = "js/app.js"></script>
But I can't able to get the Example.js component in my blade file .
In my console, I'm getting this error
CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token
What am I missing here ?
This error is caused probably by bootstrap.js (not laravel) which cannot find proper meta tag in header. Move your meta tag (with csrf token) from <body> to <head> - this should fix the problem.
Good day! im trying to work with parallax(materializecss) in reactjs but the pictures does not come out.
i already install the materializecss using npm,
heres my code:
import React from 'react';
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
import Pic1 from '../img/Pic1.jpg'
import Pic2 from '../img/Pic2.jpg';
import 'materialize-css/js/parallax';
const About = () => {
return (
<div className="paralax">
<div className="parallax-container">
<div className="parallax"><img src={Pic1} alt="Building"/></div>
</div>
<div className="class section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 ligthen-3">
Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.
</p>
</div>
</div>
<div className="parallax-container">
<div className="parallax"><img src={Pic2} alt="Building"/></div>
</div>
</div>
)
}
export default About;
Use react-materialize.
Install: npm install react-materialize
And import Parallax like import {Parallax} from 'react-materialize';
Hence your code becomes:
import React, { Component } from 'react';
import './App.css';
import {Parallax} from 'react-materialize';
class App extends Component {
render() {
return (
<div>
<Parallax imageSrc="http://materializecss.com/images/parallax1.jpg"/>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<Parallax imageSrc="http://materializecss.com/images/parallax2.jpg"/>
</div>
);
}
}
export default App;
I have used image hyperlinks. But you can replace them with static images also.
Also, import jquery befor materialise.min.js in your index.html
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
For Reference : https://react-materialize.github.io/#/
PEACE
To use Javascript components of Materialize CSS, we need to get the reference of that particular element that we're gonna use.
We're using ref because we're triggering imperative animations.
When to Use Refs
Triggering imperative animations.
Integrating with third-party DOM libraries.
As we're using MaterializeCSS which is a third-party CSS framework so in order to use the animations of that we're using ref.
When to use refs in React
CodeSandbox - Parallax Demo
You can check other Materialize CSS components in React from this repository - GermaVinsmoke - Reactize
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import Image1 from "../public/parallax2.jpg";
import Image2 from "../public/parallax1.jpg";
class Parallax extends Component {
componentDidMount() {
M.Parallax.init(this.Parallax1);
M.Parallax.init(this.Parallax2);
}
render() {
return (
<>
<div className="parallax-container">
<div
ref={Parallax => {
this.Parallax1 = Parallax;
}}
className="parallax"
>
<img src={Image2} />
</div>
</div>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">
Parallax is an effect where the background content or image in
this case, is moved at a different speed than the foreground
content while scrolling.
</p>
</div>
</div>
<div
ref={Parallax => {
this.Parallax2 = Parallax;
}}
className="parallax-container"
>
<div className="parallax">
<img src={Image1} />
</div>
</div>
</>
);
}
}
export default Parallax;
I use Create-React-App to build a small React application. The full code is stored in github
My file structure:
src
components
Players.js
Player.js
App.css
App.js
index.css
index.js
...
App.js:
import React from 'react';
import './App.css';
import PropTypes from 'prop-types';// used to fix the error: 'PropTypes' is not defined
import Header from './components/Header';
import Players from './components/Players';
const App = (props) => (
<div className="scoreboard">
<Header title={props.title} />
<Players />
</div>
);
App.propTypes = {
title: PropTypes.string.isRequired
};
export default App;
Player.js:
import React from 'react';
const Player = (props) => (
<div className="player">
<div className="player-name">
Jim Hoskins
</div>
<div className="player-score">
<div className="counter">
<button className="counter-action decrement"> - </button>
<div className="counter-score">31</div>
<button className="counter-action increment"> + </button>
</div>
</div>
</div>
);
export default Player;
Players.js:
import React from 'react';
import Player from './components/Player';
const Players = () => (
<div className="players">
<div className="player">
<div className="player-name">
Jim Hoskins
</div>
<div className="player-score">
<div className="counter">
<button className="counter-action decrement"> - </button>
<div className="counter-score">31</div>
<button className="counter-action increment"> + </button>
</div>
</div>
</div>
<div className="player">
<div className="player-name">
Juan Li
</div>
<div className="player-score">
<div className="counter">
<button className="counter-action decrement"> - </button>
<div className="counter-score">30</div>
<button className="counter-action increment"> + </button>
</div>
</div>
</div>
</div>
)
export default Players;
And the line import Player from './components/Player'; leads to this error:
But if I put this line on top of App.js file, it doesn't report such compiling error. I really want to know what's the issue indeed with my code?
Your file path is wrong. Player is in the same folder as Players, so you need to just say import Player from './Player'
Delete the node_modules directory
Delete the package-lock.json file
Run npm install
Run npm start
First of all I am new to whole React and Electron thing so I am not sure if the thing I am doing is correct. I am trying to separate my components into different JSX files and import them and render them into div tags in my index page for my Electron app. However, I am a bit confused because it "partially" works. I am trying to separate my tab pages. I have one container file which looks like this
import React from 'react';
import ReactDOM from 'react-dom';
import NavigationLeft from '../Components/Layout/Navigation.jsx';
import TabPane1 from '../Components/TabPanes/TabPane1.jsx';
import TabPane2 from '../Components/TabPanes/TabPane2.jsx';
import TabPane3 from '../Components/TabPanes/TabPane3.jsx';
import TabPane4 from '../Components/TabPanes/TabPane4.jsx';
import TabPane5 from '../Components/TabPanes/TabPane5.jsx';
import TabPane6 from '../Components/TabPanes/TabPane6.jsx';
import TabPane7 from '../Components/TabPanes/TabPane7.jsx';
window.onload = function(){
ReactDOM.render(<NavigationLeft />, document.getElementById('viewNavigationLeft'));
ReactDOM.render(<TabPane1 />, document.getElementById('viewTabPane1'));
ReactDOM.render(<TabPane2 />, document.getElementById('viewTabPane2'));
ReactDOM.render(<TabPane3 />, document.getElementById('viewTabPane3'));
ReactDOM.render(<TabPane4 />, document.getElementById('viewTabPane4'));
ReactDOM.render(<TabPane5 />, document.getElementById('viewTabPane5'));
ReactDOM.render(<TabPane6 />, document.getElementById('viewTabPane6'));
ReactDOM.render(<TabPane7 />, document.getElementById('viewTabPane7'));
}
The content on my index.html page seems like loading fine however when it is rendering my components into the page, it is duplicating "TabPane1" only, the rest is not even there. Literally looks like they are duplicated.
My index.html page
<html>
<head>
...yada yada
<script>
// install babel hooks in the renderer process
require('babel-register');
</script>
</head>
<body>
<script>
require('./Containers/MainApp');
</script>
<div class="wrapper">
<div id="viewNavigationLeft" class="sidebar" data-color="blue" ></div>
<div id="viewMainPanel" class="main-panel">
<div id="viewTabPagesTest" class="tab-content">
<div id="viewTabPane1"></div>
<div id="viewTabPane2"></div>
<div id="viewTabPane3"></div>
<div id="viewTabPane4"></div>
<div id="viewTabPane5"></div>
<div id="viewTabPane6"></div>
<div id="viewTabPane7"></div>
</div>
</div>
</div>
</body>
Finally, my component contents (just one of them) looks like following:
'use babel';
import React from 'react';
class TabPane1 extends React.Component {
render(){
return(
<div>
<div className="tab-pane" id="tabPane1">
yada yada blah blah tab content for tabPane1
</div>
</div>
)
}
}
export default TabPane1
If I populate these into divs separately as I stated above, it does populate them but it breaks the tabpage functionality - tab script expects the tab pages to be populated under the "viewTabPagesTest" div directly, rather than having another div under it.
If I do the same thing by targeting viewTabPagesTest directly, it only renders the last element, not all of the tab pages. So that's where I am lost actually.
import React from 'react';
import ReactDOM from 'react-dom';
import NavigationLeft from '../Components/Layout/Navigation.jsx';
import TabPane1 from '../Components/TabPanes/TabPane1.jsx';
import TabPane2 from '../Components/TabPanes/TabPane2.jsx';
import TabPane3 from '../Components/TabPanes/TabPane3.jsx';
import TabPane4 from '../Components/TabPanes/TabPane4.jsx';
import TabPane5 from '../Components/TabPanes/TabPane5.jsx';
import TabPane6 from '../Components/TabPanes/TabPane6.jsx';
import TabPane7 from '../Components/TabPanes/TabPane7.jsx';
window.onload = function(){
ReactDOM.render(<NavigationLeft />, document.getElementById('viewNavigationLeft'));
ReactDOM.render(<TabPane1 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane2 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane3 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane4 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane5 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane6 />, document.getElementById('viewTabPagesTest'));
ReactDOM.render(<TabPane7 />, document.getElementById('viewTabPagesTest'));
}
What is the correct way to achieve this - to render my components into a single div at once?
Cheers.
The correct way would be to render your navigation page and then inside your navigation page, render out your tab panes. Ideally you would only call ReactDOM.render once. Something like this:
import React from 'react';
import ReactDOM from 'react-dom';
import NavigationLeft from '../Components/Layout/Navigation.jsx';
window.onload = function(){
// ideally you pick a div and render your whole application rather than bits and pieces of it.
ReactDOM.render(<NavigationLeft />, document.getElementById('left'));
}
<html>
<head>
...yada yada
<script>
// install babel hooks in the renderer process
require('babel-register');
</script>
</head>
<body>
<script>
require('./Containers/MainApp');
</script>
<div class="wrapper" id="left">
</div>
</body>
NavigationLeft.jsx
import React from 'react';
import-your-tabs from 'wherever';
export default class NavigationLeft extends React.Component {
render() {
return (
<div class="wrapper">
<div id="viewNavigationLeft" class="sidebar" data-color="blue" ></div>
<div id="viewMainPanel" class="main-panel">
<div id="viewTabPagesTest" class="tab-content">
<TabPane1 />
<TabPane2 />
.
.
.
<TabPane7 />
</div>
</div>
)
}
}
TabPane1.jsx
'use babel';
import React from 'react';
export default class TabPane1 extends React.Component {
render(){
return(
<div className="tab-pane" id="tabPanel1">
yada yada blah blah tab content for tabPane1
</div>
)
}
}
You are repeating yourself. That's unnecessary. Trying creating props inside the tabs and use one component called TabPane. For example by using props you would not have to have so much code that does the same thing. Try something like
class TabPane extends React.Component {
render(){
return(
<div>
<div className="tab-pane">
{this.props.paneText}
</div>
</div>
)
}
}
And then when you are going to use it somewhere else the thing you have to do is simply.
import TabPane from '../Components/TabPanes/TabPane.jsx';
class TabContainer extends React.Component {
render() {
return (
<div>
<TabPane paneText='This my first tabPane' />
<TabPane paneText='Second tabPane' />
</div>
)
}
Then you you have to create an App.jsx and then put all your containers there. When you have done this you can simply write ;
ReactDOM.render(<App />, document.getElementById('viewTabPagesTest'));
It would be good to check the Hierarchies in React.