Estoy tomando un tutorial para aprender React JS
, todo iba bien, hace días que pude correr un ejemplo, sencillo, llevando a cabo una configuración básica recomendada, mas unos complementos mas que le agrego para reconocer la versión de Javascript
.
Los errores son los siguientes
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
The above error occurred in one of your React components: Consider adding an error boundary to your tree to customize error handling behavior.
Cabe aclarar que los errores aparecen en el archivo bundle.js
, el cual se usa para que se almacene el código generado a través de webpack
La estructura del proyecto es la siguiente:
package.json
{
"name": "prueba",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js",
"dev": "concurrently \"node server.js\" \"webpack -w\" "
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"serve-static": "^1.13.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"concurrently": "^3.5.1",
"eslint": "^4.9.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "^2.7.0",
"webpack": "^3.10.0"
}
}
webpack.config.js
const path = require('path');
const config = {
entry: './src/index.jsx',
output: {
path: path.resolve('js'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /.jsx$/,
use:{
loader:'babel-loader'
},
exclude: /node_module/
}
]
}
}
module.exports = config;
app.jsx
import React, {Component} from 'react';
import {render} from 'react-dom';
class App extends Component{
render(){
return(
<div>
<h1>Mi Aplicacion React Js</h1>
<h3>Probando la exportacion</h3>
</div>
)
}
}
export default App;
index.jsx
import React, { Component } from 'react';
import { render } from 'react-dom';
import {App} from './components/app.jsx';
render(
<App/>,
document.getElementById('appStart')
)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aprendiendo React</title>
</head>
<body>
<div id="appStart"></div>
<script src="js/bundle.js"></script>
</body>
</html>
resultado en consola
C:\Users\PterPmntaM\CursoReactJS\React_Scaffold> npm run dev
> [email protected] dev C:\Users\PterPmntaM\CursoReactJS\React_Scaffold
> concurrently "node server.js" "webpack -w"
[0] Iniciando servidor
[1]
[1] Webpack is watching the files...
[1]
[1] Hash: 5fd2ce10b3c1788b385b
[1] Version: webpack 3.10.0
[1] Time: 4878ms
[1] Asset Size Chunks Chunk Names
[1] bundle.js 729 kB 0 [emitted] [big] main
[1] [14] ./src/index.jsx 381 bytes {0} [built]
[1] + 27 hidden modules