Estoy tratando de hacer una peticion de tipo GET usando Node, React, Express.
Probe usando XMLHttpRequest, fetch, Axios, require(http/https) y siempre devuelve el contenido de la pagina principal.
Creo que deberia configurar algo en ./node_modules/express/lib/router/route.js
pero no encuentro la solucion.
Tengo configurado el proyecto con este comando:
npx create-react-app my-app
Lo que estoy haciendo es el tutorial que hay en la pagina de React, estoy haciendo todo en el archivo index.js
y ahora quiero agregar una conexion con la base de datos.
(simplificado)
app
├── node_modules
├── public
│ └── index.html
└── src
└── index.js
Todavia no modifique nada de las rutas porque supuse que en el modulo de express no habia que tocar nada y en estos dos archivos si uso require('express')
dejan de funcionar.
{
"name": "my-app2",
"version": "0.1.0",
"private": true,
"dependencies": {
"mongodb": "^3.2.7",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "0.9.5"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
./public/index.html
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
// import App from './App';
import './index.css';
const products = [
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
]
class Todo extends React.Component{
constructor(props){
super(props);
this.state = {
check: false,
filterText: '',
};
this.onChange = this.onChange.bind(this);
this.handleChange = this.handleChange.bind(this);
}
onChange(event){
this.setState({check: !this.state.check});
};
handleChange(event){
this.setState({filterText: event.target.value})
}
// filtrar = (ex) => {};
render(){
return(
<fieldset >
<legend>Productos</legend>
<SearchBar
checked={this.state.check}
onChange={this.onChange}
handleChange={this.handleChange}
/>
<ProductTable
check={this.state.check}
filter={this.state.filterText}/>
</fieldset>
);
}
}
function SearchBar(props){
return(
<div style={{marginBottom: '5px'}}>
<legend style={{color: 'grey', textAlign: 'left'}}>Filtrar:<br/>
<input type="text" onChange={props.handleChange}/>
</legend>
<legend>
<input type="checkbox" onClick={props.onChange}/>
Mostrar solo en stock
</legend>
</div>
);
}
function ProductTable(props){
const cats = Array.from(new Set(products.map(x => x.category)));
//const TagRandom = <p>holi</p>; // no funca
return(
<table>
<tbody>
{
cats.map(x =>
<React.Fragment key={x}>
<ProductCategory category={x}/>
{
products.map(p =>
(p.category === x) && (!props.check || p.stocked) ?
<ProductRow key={p.name} name={p.name} price={p.price} filter={props.filter}/> :
null)
}
</React.Fragment>
)
}
</tbody>
</table>
)
}
function ProductCategory(props){
return(
<tr style={{color: 'white', backgroundColor: '#444'}}>
<th colSpan="2">
{props.category}
</th>
</tr>
)
}
function contiene(str, filtro){
if(!filtro) return true;
let a = str.toLowerCase();
let b = filtro.toLowerCase();
if(a.includes(b)) return true;
return false;
}
function ProductRow(props){
if(!contiene(props.name, props.filter)) return null;
return(
<tr >
<td>{props.name}</td>
<td>{props.price}</td>
</tr>
)
}
ReactDOM.render(
<Todo />,
document.getElementById('root')
)
Estuve buscando donde configurar las rutas pero no le encuentro la vuelta. Incluso borre el ./public/index.html
en donde se renderiza ./src/index.js
y la aplicacion sigue funcionando normalmente. No tengo indea de cual es el primer archivo que es llamado cuando uso npm start
(donde supongo que hay que configurar las rutas).
"main": "index.js"
, creo que la pagina principal del servidor deberia ser .js y tener ahi las rutas. Mas tarde voy a probar eso a ver si funciona.