react-jsx

I'm starting a new project on an environment that has native CommonJS support for require modules - it's an atom-shell project, there is no possibility of using pre-compiling steps such as in Browserify or webpack AFAIK . I'm able to use JSX on my app.jsx entry-point file that is declared on my index.html , that's because JSXTransformer was declared previously: <script src="scripts/vendor/JSXTransformer.js"></script> <script type="text/jsx" src="scripts/app.jsx"></script> I want to be able to use the JSX syntax for the sub modules that are imported as CommonJS modules inside my app.jsx module:

I have a scenario where I'm using React.js to create a div using the following code : React.createElement('div', {}, "div content") Some additional javascript processing will allow me afterwards to deduce if this div needs to have the className attribute set to" ClassA" or "ClassB" or if it shouldn't have className at all. Is there a way in javascript to access the div that was created from the React DOM and to add to it the className attribute? Note : I couldn't achieve this is JSX so I resorted to the createElement method. Edit: it is worth to mention that i might need to conditionally add

I'm running into persistent problems in my React renders. This code /** @jsx React.DOM */ var AnswerRows = React.createClass({ componentDidMount: function() { }, render: function() { {this.props.answers.map(function(answer, i) { return ( <div id="answerRow"> <label className="AnswerText"> <input type="checkbox" value={answer.id} /> {answer.text} </label> </div> ); }, this)} } }); var QuizTaking = React.createClass({ componentDidMount: function() { }, render: function() { return ( <div className="card-holder"> <div className="showQuestionCard x-card host"> <h3 dangerouslySetInnerHTML={{__html:

Can i set type of children in TypeScript? For example i have such Components class UserProfile extends React.Component<{ id: number }, void>{ } class Thumbnail extends React.Component<{ children: UserProfile[] }, void>{ } class UsersList extends React.Component<void, void>{ public render() { return ( <div> <Thumbnail><UserProfile id={1} /></Thumbnail> <Thumbnail><UserProfile id={2} /></Thumbnail> </div> ) } } I want to define what particular children are supported in Thumbnail component in order to avoid such situation: class UsersList extends React.Component<void, void>{ public render() {

So I have a React.js component, and I want to loop through an object I import to add HTML options to it. Here is what I tried, which is both ugly and does not work: import React from 'react'; import AccountTypes from '../data/AccountType'; const AccountTypeSelect = (props) => { return ( <select id={props.id} className = {props.classString} style={props.styleObject}> <option value="nothingSelected" defaultValue>--Select--</option> { $.each(AccountTypes, function(index) { <option val={this.id}>this.name</option> }) } </select> ); }; export default AccountTypeSelect; I received this error in the

The Problem: In React, you want to create a DOM structure by mapping an array, but each item in the array should return 2 elements. e.g. import React from 'react' import _ from 'lodash' let { Component } = React export default class DataList extends Component { render () { let array = [ {def: 'item1', term: 'term1', obj1: 'rand'}, {def: 'item2', term: 'term2'} ] return ( <dl> {_.map(array, (item) => { return ( <dt>{item.def}</dt> <dd>{item.term}</dd> ) })} </dl> ) } } React doesn't let you render siblings without wrapping them in a container element, which would break the DOM structure here.

I have an input field on my react component that shows the line price for an item (two decimal places with thousands separators). I want the value shown to be in money format when the component first renders and also to be kept in money format as user types in the field. At the moment I have the following code in my component: var React = require('react'); import accounting from 'accounting'; MoneyInput = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired, onChange: React.PropTypes.func.isRequired, value: React.PropTypes.number, error: React.PropTypes.string, }, onChange