Articles of react jsx

反应文件命名约定为jsx

我是新的反应。 最初我开始使用create-react-app 。 文件名默认是index.js 。 然后我将这个文件重命名为index.jsx 。 当我尝试使用npm start应用npm start我收到以下错误。 > react-scripts start Could not find a required file. Name: index.js Searched in: D:\WorkSpace\React\chat\src npm ERR! Windows_NT 6.1.7601 npm ERR! argv "D:\\Applns\\nodejs\\node.exe" "D:\\Applns\\nodejs\\node_modules\\ npm\\bin\\npm-cli.js" "start" npm ERR! node v6.10.0 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR! chat@0.1.0 start: `react-scripts start` npm ERR! […]

React Router v4中的indexLink

菜鸟在这里。 在React Router v4中有没有新的方法来使用indexLink? 我正在更新一些版本3代码(我想我离开angular度避免所有这些弃用!) 我把它带入一些descructuring: var {NavLink, IndexLink} = require('react-router-dom'); 并使用IndexLink保持它始终不醒目: <h2>Nav</h2> <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>blah blah blah</IndexLink> //Other navlinks working fine IndexLink是打破我的代码的唯一的东西,这是从我改变它的错误。 “警告:React.createElement:type是无效的 – 期望一个string(对于内置组件)或一个类/函数(对于复合组件),但得到:undefined。你可能忘了从你定义的文件中导出你的组件检查Nav的渲染方法“。 一切都被导出,简单的应用程序完美工作,直到我添加IndexLink。 现在传递出去。

如何在JSX中使用nodemon?

我可以用一个命令编译和运行我的JSX应用程序: jsx app.jsx | node 但我也希望我的服务器每次修改app.jsx时自动重启。 我可以用nodemon来完成 ,但是我不能完全弄清楚如何让nodemon事先通过JSX编译器来运行我的脚本。 我有一个nodemon.json文件像这样设置: { "execMap": { "js": "node", "jsx": "jsx {{filename}} | node" }, "ext": "js jsx", "ignore": [ ".hg", "node_modules", ".idea" ], "verbose": true } 但是当我运行nodemon它告诉我: 8 Feb 21:58:48 – [nodemon] starting `jsx app.jsx | node` 8 Feb 21:58:48 – [nodemon] child pid: 10976 '\"jsx app.jsx | node\"' […]

与coffeescript jsx的Jest?

如何使用Jesttesting用CoffeeScript + React jsx编写的React组件? Jest提供的唯一的CoffeeScript示例使用普通的CoffeeScript,并且不能与CoffeeScript + React JSX一起工作(语法错误达到< )。 我曾经尝试过 第一次尝试:execSync // preprocessor.js var execSync = require('exec-sync'); module.exports = { process: function (src, path) { return execSync('browserify -t coffee-reactify ' + path); } }; 这工作,但需要太多的时间(虚拟testing12秒)。 然后我试着: 第二次尝试:咖啡反应变换 // preprocessor.js var coffee = require('coffee-script'); var transform = require('coffee-react-transform'); module.exports = { process: function(src, path) { if […]

从ReactJS外部渲染组件

从这里 : “在React之外获取React组件实例的句柄的唯一方法是存储React.render的返回值。 我需要在React之外渲染一个React组件,以及我将在下面提及的原因。 在我的node.js,expressJS应用程序中,我使用了“react-router-component”和“react-async” 。 在app.js中 – 应该运行的文件, var url=require('url'); var App=require('./react/App.jsx'); var app = express(); app.get('*',function(req,res){ //}); SEE EDIT 1 BELOW var path = url.parse(req.url).pathname; ReactAsync.renderComponentToStringWithAsyncState(App({path:path}),function(err, markup) { res.send('<!DOCTYPE html>'+markup); }); }); 在App.jsx中, PostList = require('./components/PostList.jsx'); var App = React.createClass({ render: function() { return ( <html> <head lang="en"> </head> <body> <div id="main"> <Locations […]

如何在React中导出用于服务器端渲染的组件

所有: 我对React非常陌生,现在我正在尝试如何做服务器端渲染,我使用Express.js作为我的服务器,所以代码如下所示: //server.js var express = require("express"); var ReactDOMServer = require("react-dom/server"); var MyCom = require("./components"); var domstring = ReactDOMServer.renderToString(MyCom); var app = express(); app.get("/", function(req, res){ res.json({ name: "new com", dom: domstring }); }); 和 // components.js var React = require("react"); var MyCom = React.createClass({ render: function(){ return (<h1>Hello, server side react</h1>); } }); module.exports […]

从Express中调用React视图

我找不到一个很好的例子,我可以通过express.js来调用一个响应视图。 到目前为止,这是我的。 +– app.js +– config | +– server.js +– routes | +– index.js +– views | +– index.html app.js require('./config/server.js'); require('./routes/index.js'); configuration| server.js "use strict"; var express = require('express'), app = express(), routes = require('./routes'); app.set('view engine', 'html'); app.engine('html', ); // how do I tell express that JSX is my template view engine? var […]