Tag: jsx

反应和表示不允许jsx的应用程序

我正在尝试学习如何使用快递制作networking应用程序，但是，我并不真正了解如何将数据发送到客户端，以及快递应该做什么。 我有一个印象，表示应该发送数据到客户端，然后客户端应该根据发送的数据显示UI。 现在我正在尝试使用reactDOMServer来显示一个反应组件，但是我遇到了一个jsx错误： res.send(ReactDOMServer.renderToString(<root />)) SyntaxError: Unexpected token < 我知道这篇文章，并试图安装babel的jsx，但它仍然给我这个错误。 这是我的app.js： const express = require("express") const React = require("react") const ReactDOMServer = require("react-dom/server"); const root = require("./public/root.js"); const app = express(); app.get("/", (req, res) => { res.send(ReactDOMServer.renderToString(<root />)) }) app.listen(3000, () => { console.log("running on port 3000") }) root.js const React = require("react"); module.export = […]

osx create-react-app不安装

我正在尝试使用terminal命令安装反应： npm install -g create-react-app 但它似乎并没有工作，我得到以下输出： 创build反应应用程序输出 有谁知道这里可能是什么问题？

反应链接到function不起作用

对不起，如果这是一个重复的问题。 我似乎无法解决这个问题或find答案。 我有一个基本的React路由器设置，我正在努力工作，我真的被困在让链接function工作。 提前致谢。 线框示例 这是代码。 App.js import React from 'react' import reactDOM from 'react-dom' import { Router, Route, hashHistory, IndexRoute } from 'react-router' import About from "./About Us/About" import FrontPage from "./Front Page/FrontPage" import HeaderNavigation from './General/HeaderNavigation'; reactDOM.render(( <Router history = {hashHistory}> <Route path="/" component={FrontPage}> <IndexRoute component = {HeaderNavigation}/> <Route path="/About" component={About}/> </Route> </Router> […]

ReactJS表单onSubmit不起作用，它不被调用

我使用NodeJS，JSX和ReactJS，我有下一个类： import React from 'react'; export default class LoginPage extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); console.log("QD"); } handleChange(event) { console.log("QDWWQD"); this.setState({value: event.target.value}); } handleSubmit(event) { console.log('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <input type="submit"/> </form> ); } […]

如何将ES6节点和jsx代码编译成ES5 vanilla JS

我有一个使用babel-node运行服务器的工作正常的项目。 然而，尝试了2天后，我无法将其编译到ES5。 我试着运行babel，但是那不包括依赖关系。 我试图创build一个webpackconfiguration只是为了服务器，但我目前卡住的错误： fs.js:634 return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode); ^ Error: ENOENT: no such file or directory, open '/types/mime.types' 用于服务器的webpackconfiguration与我用于编译我的客户端代码[100％]几乎相同： var webpack = require('webpack'); var path = require('path'); var WebpackNotifierPlugin = require('webpack-notifier'); var BUILD_DIR = path.resolve(__dirname, 'static'); var APP_DIR = path.resolve(__dirname, 'src'); var DATA_DIR = path.resolve(__dirname, 'json'); module.exports = { target: "node", devtool: 'source-map', // […]

ReactJS响应式轮播从零开始

好吧，所以基本上我正在尝试从头开始为ReactJS编写一个轮播。 我已经完成了对导航，幻灯片等所需function的必须编码。 这样做的主要目的是为了使其响应，但这是我很难找出如何做。 carousel.js import React from 'react' import { NavLink } from 'react-router-dom' import classNames from 'classnames' export default class Carousel extends React.Component { constructor(props) { super(props) this.handleNext = this.handleNext.bind(this) this.handlePrev = this.handlePrev.bind(this) this.state = { innerWidth: 0, navPrevDisabled: true } } componentWillMount() { var stateItems = [] for(let i in this.props.items) { stateItems.push( […]

Webpack无法parsing文件或dic

MYAPP： | –src | –index.js | –content.js | –webpack.config.js index.js： const React = require('react'); const ReactDom = require('react-dom'); const View = require('./content'); ReactDom.render(<View/>, document.body); content.js： const React = require('react'); class view extends React.Component { render() { return <p> Content </p> } } module.exports = View; webpack.config.js module.exports = { entry: './src/*', output: { path: path.join(__dirname, […]

使用express和es6来渲染反应和jsx服务器端

我试图连接一个最小的概念certificate来渲染一个单一的React组件服务器端。 当我运行我的应用程序，我得到一个错误： SyntaxError: express.js: Unexpected token (10:41) 违规的路线是： > 10 | res.send(ReactDOMServer.renderToString(<Component msg={msg} />)); | ^ 这是我的package.json ： { "name": "ssrReact", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "start": "nodemon express.js –exec babel-node –presets es2015,stage-2" }, "dependencies": { "express": "^4.14.1", "react": "^15.4.2", "react-dom": "^15.4.2" }, "devDependencies": { "babel-cli": "^6.22.2", "babel-preset-es2015": "^6.22.0", "babel-preset-stage-2": "^6.22.0", "nodemon": […]

{React jsx babel es6 webpack}我如何评论渲染（返回（// || / ** /））？

上周我开始了一个项目。 回到我的团队之前，我想评论我的代码。 /* Just for the Syntax outlook */ class Foo extends React.Components { constructor(props) { super(props); } render() { return ( <div className='bar'> /* <p> cannot commit!!!! </p> ** Following will throw error when bundled with webpack */ // This throws error as well. <div> ) } } <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 代码可能看起来像评论正在工作，但目前JSbin的设置没有在ES6上设置。 当你使用jsx通过webpack运行它时，会抛出一个错误。 这里是下面的堆栈 节点v6.0.0 […]

如何访问服务器端React中的JSX组件的DOM事件处理程序

我正在使用React构build一个简单的静态视图引擎，目标是呈现静态HTML标记，并生成一个由组件DOM事件（onClick等）填充的js文件。 我做的第一部分的方式是要求一个指定的JSX文件，例如，看起来像这样： import React from 'React'; export default class Test extends React.Component { clicked() { alert('Clicked the header!'); } render() { return ( <html> <head> <title>{this.props.title}</title> </head> <body> <h1 onClick={this.clicked}>click me!!!</h1> </body> </html> ); } } 然后，我通过一个NodeJS后端渲染JSX文件，如下所示： let view = require('path-to-the-jsx-file'); view = view.default || view; const ViewElement = React.createFactory(view); let output = ReactDOMServer.renderToStaticMarkup(ViewElement(props)); 它适用于静态HTML。 […]