JSX
JSX - a faster, safer, easier JavaScript
JSX - a faster, safer, easier JavaScript
In JSX, how do you reference a value from props from inside a quoted attribute value?
For example:
<img className="image" src="images/{this.props.image}" />
The resulting HTML output is:
<img class="image" src="images/{this.props.image}">
Source: (StackOverflow)
I'm doing a bit of Photoshop scripting for the first time and it sure would be great to have a console.log-like function to output array and object values in the Javascript console of the ExtendScript Toolkit App.
Is there an equivalent function?
Source: (StackOverflow)
Is there any way to move the jsx from a component's render function to a separate file? If so, how do I reference the jsx in the render function?
Source: (StackOverflow)
I've been looking into React lately and was hoping to use JSX and typescript. I haven't been able to find any resources on this or type definitions for React.
Can you use Typescript with JSX and are type definitions available?
Source: (StackOverflow)
Is there a way to get any kind of syntax highlighting for .cjsx (jsx in coffeescript) files in WebStorm?
Currently, I'm using a Sublime plugin, which is great, but I'd prefer to stay in WebStorm if possible.
I understand WebStorm supports TextMate bundles, so that may be a viable option but I couldn't find one for cjsx.
Source: (StackOverflow)
I'm unable to get any of the React SyntheticKeyboardEvent handlers to register anything except null for the event properties.
I've isolated the component in a fiddle and am getting the same result as in my application. Can anyone see what I'm doing wrong?
http://jsfiddle.net/kb3gN/1405/
var Hello = React.createClass({
render: function() {
return (
<div>
<p contentEditable="true"
onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp}
onKeyPress={this.handleKeyPress}>Foobar</p>
<textarea
onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp}
onKeyPress={this.handleKeyPress}>
</textarea>
<div>
<input type="text" name="foo"
onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp}
onKeyPress={this.handleKeyPress} />
</div>
</div>
);
},
handleKeyDown: function(e) {
console.log(e);
},
handleKeyUp: function(e) {
console.log(e);
},
handleKeyPress: function(e) {
console.log(e);
}
});
React.renderComponent(<Hello />, document.body);
Source: (StackOverflow)
In a React component for a <select> menu, I need to set the selected attribute on the option that reflects the application state.
In render(), the optionState is passed from the state owner to the SortMenu component. The option values are passed in as props from JSON.
render: function() {
var options = [],
optionState = this.props.optionState;
this.props.options.forEach(function(option) {
var selected = (optionState === option.value) ? ' selected' : '';
options.push(
<option value={option.value}{selected}>{option.label}</option>
);
});
// pass {options} to the select menu jsx
However that triggers a syntax error on JSX compilation.
Doing this gets rid of the syntax error but obviously doesn't solve the problem:
var selected = (optionState === option.value) ? 'selected' : 'false';
<option value={option.value} selected={selected}>{option.label}</option>
I also tried this:
var selected = (optionState === option.value) ? true : false;
<option value={option.value} {selected ? 'selected' : ''}>{option.label}</option>
Is there a recommended way of solving this?
Source: (StackOverflow)
I am using browserify and watchify, and would like to require() files other than the default extensions .js and .json without specifying the extension, for instance:
// Not ideal (tedious)
var Carousel = require('./components/Carousel/Carousel.jsx')
// Ideal
var Carousel = require('./components/Carousel/Carousel')
I have tried --extension=EXTENSION as specified in the browserify documentation:
"scripts": {
"build": "browserify ./src/App.js --transform [ reactify --es6 ] > dist/script.js -v -d --extension=jsx",
"watch": "watchify ./src/App.js --transform [ reactify --es6 ] -o dist/script.js -v -d --extension=jsx"
},
However I don't see any change. Is this possible? What would be the right way to do this?
Source: (StackOverflow)
I am trying to get started building a site in ReactJS. However, when I tried to put my JS in a separate file, I started getting this error: "Uncaught SyntaxError: Unexpected token <".
I tried adding /** @jsx React.DOM */ to the top of the JS file, but it didn't fix anything. Below are the HTML and JS files. Any ideas as to what is going wrong?
HTML
<html>
<head>
<title>Page</title>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script>
<script src="./lander.js"> </script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
React.render(
<Lander />,
document.getElementById('content')
);
</script>
</body>
</html>
JS
/**
* @jsx React.DOM
*/
var Lander = React.createClass({
render: function () {
var info = "Lorem ipsum dolor sit amet... ";
return(
<div>
<div className="info">{info}</div>
</div>
);
}
});
EDIT: I realized that I need to add type="text/jsx" to the script tag which includes my lander code. However, after adding this and reloading I get this warning
"You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx"
followed by this error:
"XMLHttpRequest cannot load file:///Users/.../lander.js. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource."
it seems like there is something else that I need to do in order to get in browser jsx transform working, but I'm not sure what it is.
EDIT: OOOOH do I need to host it using MAMP or something?
Source: (StackOverflow)
I am trying to set up the most basic app in Flux-React. Its sole goal to is fire an Action, which gets sent through the Dispatcher to a Store that has registered with the Dispatcher. The store the logs the payload to Console.
Everything besides the Store is working well, but as soon as it hits AppDispatcher.register, Flux throws the following error:
Uncaught TypeError: Cannot set property 'ID_1' of undefined
Here is the code of the file causing the error, but I've put up the entire project at https://github.com/bengrunfeld/react-flux-dispatcher-error, and you can find the offending file in src/js/stores/AppStores.js
var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var AppConstants = require('../constants/AppConstants');
var assign = require('object-assign');
var CHANGE_EVENT = 'change';
var AppStore = assign({}, EventEmitter.prototype, {
emitChange: function() {
this.emit(CHANGE_EVENT);
}
});
AppDispatcher.register(function(payload){
console.log(payload);
return true;
})
module.exports = AppStore;
Source: (StackOverflow)
The site I am developing makes use of Microdata (using schema.org). As we are shifting development over to use React to render our views I have hit a blocker where React will only render attributes in the HTML spec however Microdata specifies custom attributes such as itemscope.
As I'm relatively new to React and haven't had chance to fully understand the core just yet, my question is what would be the best way to extend the functionality of react.js to allow for defined custom attributes, e.g., Microdata?
Is there a way of extending the attributes/props parser or is it a job for a mixin which checks all passed props and modifies the DOM element directly?
(Hopefully we'll be able to put together a drop in extension for everyone to provide support for this when a solution is clear.)
Source: (StackOverflow)
There are a bunch of answers on this, but i'm looking for something specific to reactjs
my component code:
render: function () {
return (
<Modal {...this.props} title="Embed on your own site!">
<div className="modal-body">
<div className="tm-embed-container" dangerouslySetInnerHTML={{__html: embedCode}}>
</div>
<textarea className="tm-embed-code" rows="4" wrap="on" defaultValue={embedCode}></textarea>
</div>
</Modal>
);
}
});
the script tag is there on the page, but no execution. should I go outside of react and just use good ol' dom scripting as the other answers indicate?
Source: (StackOverflow)
I have a browserify task that is configured like so:
module.exports = function(grunt) {
grunt.config.set('browserify', {
dev: {
src: 'assets/js/main.jsx',
dest: '.tmp/public/js/main.js',
options: {
debug: true,
extensions: ['.jsx'],
transform: ['reactify']
}
}
});
grunt.loadNpmTasks('grunt-browserify');
};
I tried configuring it to use es6 this way:
module.exports = function(grunt) {
grunt.config.set('browserify', {
dev: {
src: 'assets/js/main.jsx',
dest: '.tmp/public/js/main.js',
options: {
debug: true,
extensions: ['.jsx'],
transform: ['reactify', {'es6': true}]
}
}
});
grunt.loadNpmTasks('grunt-browserify');
};
This causes an error though:
Error: path must be a string
I can't understand from the docs how to do this given that I don't want to configure the transform in my package.json. Any help would be appreciated.
Source: (StackOverflow)
I'm using vim has an editor. JSX compiles the swap/temporary files. How can I avoid that ?
Command line :
jsx --extension js --watch src/ build/
What I see in stdout :
.helloworld.js.swp changed; rebuilding...
["helloworld"]
["helloworld"]
helloworld.js~ changed; rebuilding...
helloworld.js~ changed; rebuilding...
["helloworld"]
["helloworld"]
Thanks. :)
Source: (StackOverflow)
I want to crate HTML in for loop in JSX. Here is what my try look likes
function renderTemplates(templates){
var html = [];
var templateDiv = [];
var count = 0;
for(var identifier in templates){
if(templates.hasOwnProperty(identifier)){
var templateDetails = templates[identifier];
if(count == 0){
html.push(<Row>);
}
cols = <Col md={6}>ff
</Col>;
html.push(cols);
if(count == 0){
html.push(</Row>);
}
count = (count === 1)?0:1;
}
}
return html;
}
I know this is wrong syntax but can't figure out how to do it .Basically I have some data and want to create html in fashion that 2 divs lies horizontaly in 1 row.
Source: (StackOverflow)