import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import logger from "redux-logger";
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import thunk from "redux-thunk";
//components
import App from './App'
import Posts from './components/Posts'
import Users from './components/Users'
import Photos from './components/Photos'
import reducer from './reducer'
const store = createStore(reducer, applyMiddleware(logger, thunk))
ReactDOM.render(
<Provider store={store}>
<Router>
<div>
<Route exact path="/" component={App} />
<Route path="/:posts" component={Posts} />
<Route path="/users" component={Users} />
<Route path="/photos" component={Photos} />
</div>
</Router>
</Provider>,
document.getElementById('root')
);
store.subscribe(() => {
console.log(store.getState());
});TypeError: (0 , _reactRouter.match) is not a function
at C:/react/izomorf-app/src/server.js:15:1
at Layer.handle [as handle_request] (C:\react\izomorf-app\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\react\izomorf-app\node_modules\express\lib\router\index.js:317:13)
at C:\react\izomorf-app\node_modules\express\lib\router\index.js:284:7
at Function.process_params (C:\react\izomorf-app\node_modules\express\lib\router\index.js:335:12)
at next (C:\react\izomorf-app\node_modules\express\lib\router\index.js:275:10)
at expressInit (C:\react\izomorf-app\node_modules\express\lib\middleware\init.js:40:5)
at Layer.handle [as handle_request] (C:\react\izomorf-app\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\react\izomorf-app\node_modules\express\lib\router\index.js:317:13)
at C:\react\izomorf-app\node_modules\express\lib\router\index.js:284:7import express from 'express';
import React from 'react';
import ReactDOM from 'react-dom';
import {match, RouterContext } from 'react-router';
import routes from './routes';
import {renderToString, renderToStaticMarkup} from 'react-dom/server';
const app = express();
const ReactDOMServer = require('react-dom/server');
app.use((req, res) => {
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
if(redirectLocation) {
return res.redirect(301, redirectLocation.pathname + redirectLocation.search);
}
if(error) {
return res.status(500).send(error.message);
}
if(!renderProps) {
return res.status(404).send('Not faund');
}
const componentHTML = ReactDOM.renderToString(<RouterContext {...renderProps} />);
return res.end(renderHTML(componentHTML));
});
return res.end(renderHTML(componentHTML));
});
const assetUrl = process.env.NODE_ENV !== "production" ? 'http://localhost:8050' : '/';
function renderHTML(componentHTML) {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React</title>
<link rel="stylesheet" href="${assetUrl}/public/styles.css">
</head>
<body>
<div id="react-view">${componentHTML}</div>
<script type="application/javascript" src="${assetUrl}/public/bundle.js"></script>
</body>
</html>
`;
}
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
console.log("server listening on: $(PORT)");
})//slider
var step = $('.slides li').outerWidth();
//next
function nextSlide() {
$('.slides ').animate({
'margin-left': -step
}, 1000, function () {
$('.slides li:first-child').appendTo('.slides');
$('.slides').css('margin-left',0);
});
}
setInterval(nextSlide, 5000);var task = $('.task-li').length;
var doneTask = $('.done').length;
setInterval('$(".task-all").text('+ task +')', 1000);
function addTask() {
var id = Math.floor(Math.random() * (100 - 1 + 1)) + 1;
var text = $('input').val();
var allTask = $('.task-all').val();
if (text != "") {
$('input').css("background", "#adc1f1");
$('#all-task').append("<li class='task-li' id='task-"+ id +"'><h3>"+ text +"</h3><span id='remove-"+ id +"'>-</span></li>");
$('input').val('');
} else {
$('input').css("background", "#f3948d");
}
}