index.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>
<h1>Outside iFrame</h1>
<iframe title="myiframe" src="./target.html" width="600px" height="400px"></iframe>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
index.html
<div id="root"></div>
target.html
<html>
<head></head>
<body>
<h1>Inside IFrame</h1>
</body>
</html>
the Problem is like this:
enter image description here
what's wrong with the code?
You are getting this issue because the relative url src="./target.html" is incorrect. To make sure you are using the correct url, please individually check the url generated for index.html and target.html. Also make sure that you are not making a typo error.
I tried running your code and it works fine if your target.html and index.html urls are as follows :
I can also recreate your issue, if I make a typo error in my code like so src="./typoerror.html" ,
Related
So from the title itself. I already integrated a revolution-slider that is supplied by the theme I bought. It works fine and loads all the necessary scripts when I first load the page. However, the problem starts when I navigate to a different page like the contacts page. It loads the component well but when I go back to the page that displays the revolution slider, the necessary scripts for the slider does not work anymore. I have placed the revolution-slider scripts in the index.blade.html file. Here is my code.
Do you have any idea on how to load the slider again?
index.blade.html
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<tittle>
<body class="stretched">
<div id="app"></div>
// revolution-slider script here
...
<script type="text/javascript" src="{{ asset('public/slider/jquery.themepunch.tools.min.js') }}">
</script>
</body>
</html>
MainPage.js
import React, { useEffect } from 'react';
import AppSlider from '#domain/main/AppSlider';
const MainPage = () => {
return (
<AppSlider />
);
};
export default MainPage;
AppSlider.js
import React from 'react';
const AppSlider = () => {
return (
<section id="slider" className="slider-element full-screen slider-parallax">
<div className="revslider" data-alias="sleek-landing-page" />
</section>
);
};
export default AppSlider;
I just started working in ReactJS and I was going through a basic React tutorial.
I have created a project and added Babel, React, ReactDOM, Webpack, Express as the dependencies.
Now I have this Counter.js :
import React, {Component} from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {count: 0};
}
render() {
return (
<button onClick={() => {this.setState({ count: this.state.count + 1 });}}>
Count: {this.state.count}
</button>
);
}
}
export default Counter;
And the main.js (which is defined as the entry point of the application in webpack.config.js file):
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter.js';
ReactDOM.render(<Counter/>,document.getElementById("warbox"));
The PROBLEM is that when I start up the application, the component is not rendered on the page AND also the React DevTool Chrome extension doesn't light up (if that makes any sense).
Can't seem to figure out the problem exactly. Any help is appreciated. Apologies if its too basic.
The index.html :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="warbox"></div>
<script src="bundle.js"></script>
</body>
</html>
UPDATE : Solved. I think I should update what made it work for others to see. Heres the problem I had : Apparently the bundle.js needs to be updated by running the webpack explicitly. After making the changes, I had to stop the server and run the webpack and restart the server. It WORKED!
I know how to set up a React project using npm, yeoman and it works fine.
When I follow this tutorial
http://danprince.github.io/learn-react/lessons/ex1.html and apply React from CDN, it also works - but it's an old version. If I try to apply a new version of React via CDN, I can't figure out how to render ANYTHING on the screen. For example, what's wrong with the following code?:
react:
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'>
html:
<body>
<div id="root"> </div>
</body>
js (based on Code School tutorial exaple):
class StoryBox extends React.Component {
render() {
return( <div>Story Box</div> );
}
}
ReactDOM.render(
<StoryBox />, document.getElementById('root')
);
Since react v15.6.0 the ReactDOM module has been moved to a separate package add this to below your react <script ... /> tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
Snippet:
class StoryBox extends React.Component {
render() {
return( <div>Story Box</div> );
}
}
ReactDOM.render(
<StoryBox />, document.getElementById('root')
);
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="root"> </div>
I think you should look at some updated react tutorials e.g.
Simple React Development in 2017
i'm using spring boot and my index.html is in src/main/resources/templates directory and below is the content. If i render a static content from html itself it renders but when i try to render from react component it doesn't render anything
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<title>ReactJS + Spring Data REST</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="react"></div>
<script src="built/bundle.js"></script>
</body>
</html>
my react component is in src/main/js/ directory and app.js file
Below is the all the codes i have in the app.js file
import React from 'react';
import {render} from 'react-dom';
import RendorTest from 'components/RendorTest';
class RendorTest extends React.component{
rendor(){
return(
<div><h1>Spring Boot + Rest + React.js</h1></div>
);
}
}
var element = <RendorTest />;
ReactDOM.render(
element,document.getElementById('react')
)
I'm not sure why you're importing RendorTest and then declaring another class of the same name, but you are also extending the wrong method on the React object. You need to extend React.Component { } not .component.
You could also import React, { Component } from "react"; and then extend Component { }
As ahutch mentioned, you also need to call the render() method, rendor() is not a method of React.Component.
Kyle is right and also you want to call render() and not rendor(). This component is also probably better written as a stateless functional component, for example:
const RendorTest = (props) => {
return (
<div>
<h1>Spring Boot + Rest + React.js</h1>
</div>
)
}
I am making a static website and using Gulp to process all the files.
Static HTML
Firstly I had a bunch of static HTML files each with the content for the page. Example index.html:
<p>Home</p>
Then I had a layout.html file with HTML that is the same for each page. It looked like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="assets/styles.min.css">
</head>
<body>
<div id="contents">
<%= contents %>
</div>
<script src="assets/scripts.min.js"></script>
</body>
</html>
Then, in the gulpfile, I would process the pages using the gulp-wrap plugin like this:
gulp.task("html", () => {
return gulp.src(["html/**/*.html", "!html/layout.html"])
.pipe(wrap({ src: project.layout }))
.pipe(gulp.dest(project.build));
});
And this, as expected, created all the HTML files as required.
Using React
Now I want to use React. So in my main script that gets included into every page I wrote this:
import React from "react";
import { render } from "react-dom";
render((
<p>This would be some Page component...</p>
), document.body);
This, of course, replaces the body content of every page, so I turned to the react-router:
import React from "react";
import { render } from "react-dom";
import { Router, Route, browserHistory } from "react-router";
render((
<Router history={ browserHistory }>
</Router>
), document.body);
I guess this would work (after putting some routes into the router, of course), but what are the HTML files for?
Questions
How do I use the HTML files? Will I just leave them empty so that Gulp generates the same HTML file layout.html everywhere it's needed? (Or something equal to copy the file...) I need some files there so that routes like site.me/about work. This would leave everything up to the router.
Do I render a page-specific component in every page HTML file? This means having something like this in the index.html file:
<script>render(<Index />, document.body);</script>
Some other react-router wizardry?
How would you do this?
What I've done in this case is to have just one single HTML file that has the application in it. I then set this file up on the server to always be loaded irrespective of what the actual request path is.
Once that's done, reading the path on React Router and showing the correct components happens as usual. The key is that all routes load the same HTML page and the routing (deciding which component to show where and which props to load into it) happens inside React Router.