isomorphic-javascript

'Access-Control-Allow-Origin' issue when API call made from React (Isomorphic app)

由 你离开我真会死。 提交于 2019-12-18 04:32:25
问题 I'm running into an issue with my isomorphic JavaScript app using React and Express. I am trying to make an HTTP request with axios.get when my component mounts componentDidMount() { const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders'; axios.get(url).then( res => { //use res to update current state }) } I am getting a status 200 res from the API, but I am not getting any response data and getting an error in my console XMLHttpRequest cannot load http://ufc-data-api

SCSS compilation in an isomorphic React app

由 回眸只為那壹抹淺笑 提交于 2019-12-14 03:42:45
问题 I'm writing an isomorphic React app based on : https://github.com/choonkending/react-webpack-node Instead of css modules used in the examples I'd like to use scss though. And for some reason I'm having a really hard time getting them to work. My first step was to remove the css webpack loaders from both the server and the client configs replacing them with scss -specific loaders (as well as removing postcss ) : loaders: [ 'style-loader', 'css-loader?modules&localIdentName=[name]_[local]_[hash

How to handle early input to isomorphically rendered forms

由 主宰稳场 提交于 2019-12-12 09:37:18
问题 I have a React app that includes a form, which is rendered server side, prepopulated with the user's work in progress. The problem is that if the user edits a value in the form before the app loads, then the app is unaware of the change. When the user saves, the unchanged data that was rendered by the server is re-saved, and the user's new data is dropped, although it is still shown in the form. In short, there seems to be a disconnect between React and input values in the markup that it

How to use React.Component with renderToString method?

由 眉间皱痕 提交于 2019-12-12 01:25:44
问题 I tried to do the server side render using renderToString method. function handleRender(req, res) { const html = renderToString( <Counter /> ); res.send(renderFullPage(html)); } function renderFullPage(html) { return ` <!doctype html> <html> <head> <title>React Universal Example</title> </head> <body> <div id="app">${html}</div> <script src="/static/bundle.js"></script> </body> </html> ` } If the component like following it works: Counter.js const Counter = () => { function testClick(){

React-router v1.0; Passing props into application on server

由 拟墨画扇 提交于 2019-12-11 19:04:51
问题 In react-router 0.13, you could pass props into a route handler, as such serverApp.get('/*', function(req, res) { Router.run(AppRoutes, req.url, function(Handler, state) { var markup = React.renderToString( <Handler path={req.url} myProps={myProps}/> ); res.send('<!DOCTYPE html>' + markup); }); }); Now with react-router v1.0, that has been replaced with match() and RoutingContext . I have not been able to get it to work. My code below: serverApp.get('/*', function(req, res) { match({routes:

Having trouble accessing React actions in isomorphic application

由 六眼飞鱼酱① 提交于 2019-12-11 06:38:26
问题 Iam using Alt.js with React and getting error in HomeActions.js file HomeActions.js: Uncaught TypeError: Cannot read property 'updateUserSuccess' of undefined . Not to mention the same code was working flawlessly before i completely reinstalled node_modules. here is the code import alt from '../../alt'; import request from 'superagent'; class HomeActions { constructor() { this.generateActions( 'updateUserSuccess', ); } getUser() { request .get('api/getuser') .end((err, res) => { this.actions

Webpack-dev-server and isomorphic react-node application

由 孤街浪徒 提交于 2019-12-11 04:17:51
问题 I've managed to properly use webpack dev server alongside with a node server (express), using the plugin section inside webpack's config. It all works fine but now I'm trying to go isomorphic and use client-side components inside the express application. So far the only problem I'm encountering is that without webpack 'parsing' my server-side code I get to a situation where I require components but the paths are not solved I.E. Inside a component 'use strict'; import React from 'react';

React Starter Kit and Material UI: userAgent should be supplied in the muiTheme context for server-side rendering

由 廉价感情. 提交于 2019-12-09 17:25:42
问题 With the React Starter Kit, I add Material UI as follows: npm install material-ui --save and the following import to a component: import RaisedButton from 'material-ui/lib/raised-button'; and: <RaisedButton label="Default" /> I get the following error: Warning: Material-UI: userAgent should be supplied in the muiTheme context for server-side rendering. According to Material UI's documentation, it says I'd need to address three things: autoprefixer and the user agent process.env.NODE_ENV What

Routing, Universal apps (Nodejs, React), Error (0 , _reactRouter.match) is not a function

由 感情迁移 提交于 2019-12-08 19:34:33
问题 I can't fix this error... I start server, everything is ok, since I refresh localhost:3000 Then it show me an error: TypeError: (0 , _reactRouter.match) is not a function I have installed "react-router": "^4.0.0" import Express from 'express'; import {RouterContext, match} from 'react-router'; import {renderToString } from 'react-dom/server'; import React from 'react'; import routes from './routes.js' var app = new Express(); app.set('view engine', 'ejs'); app.set('views',__dirname); ////////

Getting this error while using React router TypeError: type.toUpperCase is not a function

由 落花浮王杯 提交于 2019-12-08 06:35:18
问题 I am developing an isomorphic app using react and express.js. I am using React Router for client side routing. While running the app i am getting following errors and warnings in console Warning : Failed propType: Invalid prop handler of type object supplied to Route , expected function . Warning : Invalid undefined handler of type object supplied to UnknownComponent , expected function . TypeError: type.toUpperCase is not a function Here is code for components/main.jsx var React = require(
订阅 isomorphic-javascript