Is it possible that we can use JSX as a template engine? #87
Replies: 1 comment 6 replies
-
|
Hello @mybardaklar,
For example, there is your import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<>
<h1>Hello World!</h1>
</>
);
}
ReactDOM.render(<App />, document.getElementById('root'));Then add this <!DOCTYPE html>
<html lang="en">
<head>
<title>The React App</title>
<script src="./index.tsx" defer="defer"></script> <!-- HERE define your main JSX/TSX file -->
<link href="./styles.scss" rel="stylesheet" /> <!-- here you can load source style files -->
</head>
<body>
<div id="root"></div> <!-- HERE will be rendered your JSX file -->
</body>
</html>The webpack config: const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
mode: 'production',
output: {
path: path.join(__dirname, 'dist'),
},
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js'], // <= add resolving for the extensions of JSX/TSX files
},
plugins: [
new HtmlBundlerPlugin({
// define HTML templates here
entry: {
index: 'src/index.html', // => dist/index.html
},
}),
],
module: {
rules: [
{
test: /\.(css|scss)$/,
use: ['css-loader', 'sass-loader'],
},
{
test: /\.tsx?$/, // <= define here the rule for tsx files
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
};See please the working example How to use JSX/TSX files with the Bundler Plugin. |
Beta Was this translation helpful? Give feedback.
-
How do you imagine this? You can create SPA with React, but You can create multiple pages website, no problem, just for each page create own HTML wrap-template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Homepage</title>
<script src="./home.jsx" defer="defer"></script> <!-- HERE define your main JSX/TSX file -->
</head>
<body>
<div id="root"></div> <!-- HERE will be rendered your JSX file -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
<script src="./about.jsx" defer="defer"></script> <!-- HERE define your main JSX/TSX file -->
</head>
<body>
<div id="root"></div> <!-- HERE will be rendered your JSX file -->
</body>
</html>Plugin config for multiple pages: new HtmlBundlerPlugin({
// define HTML templates here
entry: {
index: 'src/home.html', // => dist/index.html
about: 'src/about.html', // => dist/about.html
// ...
},
}),I can't understand what you need. Can you demonstrate your imaging? |
Beta Was this translation helpful? Give feedback.
-
|
I do not want to create SPA and I dont want to use HTML. I want to use JSX like Astro. Astro creates MPA. JSX will built my HTML files like Pug. |
Beta Was this translation helpful? Give feedback.
-
|
Astro supported page (entrypoint) files: Astro works same as my example above. An page is So, using JSX as an entrypoint is impossible, sorry. |
Beta Was this translation helpful? Give feedback.
-
|
Okay, thank you so much for your time! :) |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the idea. I put it in backlog, perhaps in future I implement it. |
Beta Was this translation helpful? Give feedback.
-
I want to use JSX as template engine. Is it possible? If it is, how to do?
Thank you! ❤
Beta Was this translation helpful? Give feedback.
All reactions