jsxt
is the template part of a React component.
For example, there is a React component called Page
,
class Page extends Component {
...
render() {
...
return <div>{message}</div>;
}
}
The template part of Page
is, <div>{message}</div>
.
Let's create a file ./page.jsx
: (please don't forget import React
)
import React from 'react';
<div>{message}</div>
Then we can import the .jsx
file inline,
// use `jsxt-loader` and `babel-loader` in order
import Page from 'jsxt-loader!babel-loader!./page.jsx';
The source code in ./page.jsx
will be transformed to,
const React = require('react');
module.exports = props => {
with(props) {
return React.createElement(
"div",
null,
message
);
}
}
and will export a functional React component.
In order to import a .jsxt
file,
we should config the webpack with jsxt-loader
and babel-loader
in webpack.config.js
,
...
module.exports = {
...
module: {
rules: [
{
test: /\.jsxt$/,
use: ['jsxt-loader', 'babel-loader']
},
...
]
},
...
};
Then we can import a .jsxt
file directly,
import Page from './page.jsxt';
If the jsxt
contains another React componnet,
import React from 'react';
import Greeting from './greeting.jsx';
<div>
<Greeting />
</div>
we can easily import Greeting
at the head of the jsxt
file.
Because React 16 don't support React.createClass
any more.
So we must use create-react-class
module to create React class on the fly.
When using jsxt-loader
, we should install create-react-class
to devDependencies
,
$ npm i --save-dev create-react-class