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.
Related
Having this file:
Product.jsx:
class Product extends React.Component{
render(){
return (
<div className='item'>
<div className='image'>
<img src="images/products/image-aqua.png" />
</div>
<div className="middle aligned content">
<div className="description">
<a>Fort Knight</a>
<p>Authentic renaissance actors, delivered in just two weeks.</p>
</div>
<div className="extra">
<span>Submitted by:</span>
<img src="images/avatars/daniel.jpg" className="ui avatar image" />
</div>
</div>
</div>
)
}
}
export default Product;
and ProductList.jsx:
import Product from "./Product";
class ProductList extends React.Component{
render(){
return (
<div className='ui unstackable items'>
<Product />
</div>
)
}
}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
The React Class <Product /> is not rendered (If I try to simply paste the Product class into ProductList.jsx, no problem then, but I want separate files for each class, how to achieve that?)
Use in Product.jsx the import React from "react";
demo in stackblitz
First import React at the top.
import React from "react";
Second you might be giving the wrong address at the top. Make sure it is right. You know the path well. Apart from these I don't see any problem with the code.
import Product from "./Product";
Within reveal.js presentation, how would one import a react component into a slide? I have one slide that is calling a react component elsewhere and it requires a different component. At the moment I get a "cross orgin request blocked" error. For ex:
import plotgenerator from './js/plotGen'
Or in a simulated example:
<div class="reveal">
<section>
<div id="reactstuff"></div>
</section>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script>
Reveal.initialize({etc})
</script>
<script type="text/babel">
//create a react component here that would render in the above slide where the div id "reactstuff" is defined
//******problem
//I would like to import a component here to be run in this code, like below
import plotgenerator from './js/plotGen'
//******
class App extends React.Component {
constructor(props) {
super(props);
this.state = {null};
}
doSomething() {
}
render() {
return (
<div className="app">
<plotgenerator/>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('reactstuff')
);
</script>
Hi I am very new to react and coding so please baby me in your explanations.
I have created a component in react named Header1. I have used dynamic text using props so I can change the wording for each time I use the Header1 component. I am wondering how do I do that for the style. I would like one card to have pink text and another to have blue text. Please help! And thank you in advance :)
The following is the creation of the Header1 component:
import React from 'react';
import WhiteMap from '../img/other/whiteWorld.png';
import HeaderScss from './_Header1.scss'
const header1 = (props, style)=>{
return <div className="main--container">
<header className="header--container__inside">
<section className="header--container__left">
<h1>
{props.headerTitle}
{style.headerTitleS}
</h1>
<p>
{props.headerDescription}
</p>
</section>
<section className="header--container__right">
<div className="header--pic">
<img src={WhiteMap} alt="World map with a circle highlighting Australia"/>
</div>
</section>
</header>
</div>
};
export default header1;
The following is the main App.js file where I am using the Header1 component twice:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Navigation1 from './Navigation/Navigation1';
import Header1 from './Header/Header1';
import SaveMoney1 from './SaveMoney/SaveMoney1';
import Airports1 from './Airports/Airports1';
// import SydneyCards1 from './SydneyCards/SydneyCards1';
import ThingsYouShouldKnow1 from './ThingsYouShouldKnow/ThingsYouShouldKnow1';
// import BucketList1 from './BucketlistCards/BucketlistCards1';
// import Footer1 from './Footer/Footer1';
import styles from './appStyles.module.css';
class App extends Component {
render() {
return (
<div className="App">
<Navigation1 />
<Header1 headerTitle="Fly to" headerDescription=" Selia."/>
<SaveMoney1/>
<Airports1/>
<Header1 headerTitle="Things you should know" headerDescription ="Based on customer bookings,
{/* <BucketList1/> */}
{/* <SydneyCards1/> */}
{/* <Footer1/> */}
</div>
);
}
}
export default App;
One of the ways would be using styles, like you're trying to do in your example. Try to do something like this
const Header = (props) => {
return <h1 style={props.style}>{props.title}</h1>
}
And you would render it like this
const App = () => {
return (
<div>
<Header title="My Header with Blue text" style={{color: "blue"}} />
<Header title="My Header with Red text" style={{color: "red"}} />
</div>
)
}
Note: You can do the same passing a CSS class as a prop instead of the exact style object.
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.
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;