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.
Related
I built a normal HTML/JS/CSS website and am Adding a widget( a code form made with react ) that I compile and export as a js and css to the index.html page by doing so:
<head>
<script src="https://unpkg.com/react#16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.13.1/umd/react-dom.development.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>
<link href="app.css" rel="stylesheet"/>
<script src="app.js"></script>
</body>
And I"m compiling the app with:
//yarn parcel , or npm run parcel
"parcel": "parcel build src/index.js --no-minify --no-source-maps -d widget && cp build/static/css/*.css widget/index.css",
React js script that get's the component and then add it to the element with id.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const app = document.getElementById('app')
ReactDOM.render(
(<React.StrictMode>
<App />
</React.StrictMode>),
app
);
After compiling I tried to make a secondpage serving it in another route, like blog.html and add the component too as I did with head and body, but the page remains blank. What could it be ? ( there are no logs in the console).
//the first html served
files_routes.get('/', (request, response) => {
response.sendFile('index.html', { root: '../build' })
});
//the second html which doesn't work
files_routes.get('/blog', (request, response) => {
response.sendFile('blog.html', { root: '../build' })
});
I couldn't replicate the issue in the newer code base. So I'll be closing this question...
After using Vue and Nuxt for more than a year, I decided to learn React and Next.js and almost immediately noticed the horrible Developer Experience.
Every stylesheet and component needs to be imported so there's always bloated import hell at the start of each component.
Not to mention if you need an extra library as you can't hook into any global object like Nuxt's this.$plugin option.
Is there some package to manage these imports for Nextjs? As far as I know, everyone who uses it doesn't mind it and that's what surprises me.
This Question may come as an insult to React and it is, but I just want at least one reason to join the hype-train as to why React is more popular.
create a file in pages directory named it _doucument.js or _document.ts (for TypeScript) and import React in it like below :
(below codes are TypeScript)
import React from 'react';
import Document, {
DocumentContext,
Head,
Html,
Main,
NextScript,
} from 'next/document';
export default class CustomDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html lang="en">
<Head>
<title>Your title</title>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
and any more doesn't require that import React in any components.
I have been tasked to add a react component to a website that is currently a html page and an empty main.js file.
How would I go about creating a react component within my script that allows use of modern feature etc like useState and useEffect?
On the official docs there is a 2 year old article which relies on components rather than hooks.
Once you add React and ReactDOM to your HTML page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
you can simply render a React component to the existing HTML page like:
ReactDOM.render(
<MyComponent test={true} />,
document.getElementById('container')
);
where container is the id of element your React component should be rendered within.
ReactDOM.render(
<App />,
document.getElementById('root')
So what should I understand when i see something like this at the end of the app? What does 'root' or 'demo' stand for?
It's the element that exists in the original HTML that all of the React contents go into. For example, if your HTML contains:
<body>
<div>Maybe some other content here</div>
<div id="root"></div>
</body>
React rendering into the #root means that everything App renders will be put into that element:
<div id="root">
<!-- App populates this element -->
</div>
The element selected to be populated can be any element you want - it doesn't have to be root or demo in particular.
I'm assuming you're using Create React App. Have a look at public/index.html. There you'll see <div id="root"></div> which is what document.getElementById('root') is referring to.
Inside the HTML main file index.html of a React App, normally, you might see a <div> tag with id=root.
This code:
ReactDOM.render(
<App />,
document.getElementById('root')
MEANS: Render the whole React App into the element with id=root.
Many React beginners are curious about this thing, so was I. Therefore I will try explaining this in simple words.
When Browser gets response from server and starts rendering, it goes to the root file which in most cases is public/index.html, and render the same file most first.
Inside this html a <div> element is written whose id is "root"
<div id="root"> <div>
Then control goes to another file that is index.js.
Inside this .js file, a component is used (in most React apps this component is called <App/>.
ReactDOM.render(
<App />
document.getElementById("root"),
);
This <App/> component is the most first component that is rendered on the screen. Every Component is defined inside this component or it's children.
And document.getElementById("root") renders the index.html file that is the root file.
This is how all the components are rendered and your React App starts working.
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" ,