J'utilise l'extension de routeur de réaction pour définir les routes de réaction dans mon application. tout fonctionne bien, mais le problème est que si j'utilise la syntaxe es6 pour définir la classe App.js
que index.js
"ne peut pas appeler une classe en tant que fonction" . si change App.js
format de fichier à App.jsx
cela résoud mon problème . Comment puis-je définir le fichier index.jsx
dans le format .js
es6
? ou toute autre manière appropriée de résoudre ce problème? ce sont mon fichier de routeur de réaction et mon fichier app.js . Voici le lien github de la bibliothèque de réaction-routeur https://github.com/reactjs/react-router
index.jsx
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, browserHistory } from 'react-router'
import App from './app/App'
render((
<Router history={browserHistory}>
<Route path="/" component={App}/>
</Router>
), document.getElementById('app'))
Réagissez maintenant le fichier de routeur est // fichier App.js
import React from 'react';
import { Link } from 'react-router'
class App extends React.createClass{
constructor(props) {
super(props);
}
render() {
return (
<div>
This is a App.js file write in es6.
</div>
)
}
}
export default App;
** Édité: ** J'ai la configuration du chargeur de packs Web suivante
{
test: /(\.js|\.jsx)$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets:['es2015','react']
}
}
Votre classe devrait étendre React.Component
, pas React.createClass
.
par exemple.
class App extends React.Component {
render() {
return <div>Hello, world</div>;
}
}
importer uniquement ce dont vous avez besoin dans le composant au lieu de la totalité de la bibliothèque. exemple ci-dessous
import React, {Component} from 'react';
class App extends Component {
render() {
return <div>Hello, world</div>;
}
}
Commencez également à utiliser env au lieu de es2015 car env prend en charge toutes les dernières versions de ES. Ceci est recommandé par babel. Installer babel-preset-env et désinstaller babel-preset-es2015
npm install -d babel-preset-env
{
test: /(\.js|\.jsx)$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets:['env','react']
}
}
Dans le fichier de configuration Webpack, recherchez un chargeur Babel qui test
est un fichier jsx. modifier jsx
à js