w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
  Home » REACTJS » Page 1
Not working: require('react/addons')
Requiring 'react/addons' simply adds the addons object to React and exports React. React.addons = { CSSTransitionGroup: ReactCSSTransitionGroup, LinkedStateMixin: LinkedStateMixin, ... module.exports = React; As in the docs you can find the animation addon at React.addons.CSSTransitionGroup. Side note: requiring 'react' and 'react/addons' doesn't include react twice. Some people have a

Categories : Reactjs

ReactTransitionGroup code explanation
performEnter animates the child, and children are animated in and out when they appear in or disappear from the parent component on subsequent renders—they're not animated if they're already contained in the parent upon the first render.

Categories : Reactjs

Dispatching further actions when handling actions
Usually, the solution to this problem is to to back up and look at the original action, and to waitFor the value that you are trying to send in the second action, if a derived value is required. So in this case you would respond only to 'auth' in both the UserStore and the RouteStore.

Categories : Reactjs

How do you validate the PropTypes of a nested object in ReactJS?
You can use React.PropTypes.shape to validate properties: propTypes: { data: React.PropTypes.shape({ id: React.PropTypes.number.isRequired, title: React.PropTypes.string }) }

Categories : Reactjs

Is it OK to manually change a ReactJS component's key?
React uses keys to find "the same" element when diffing with the virtual DOM. Changing the key works because it tricks React into seeing your input as a new element. At a large scale, this will affect your performance, because React will be creating & destroying DOM elements, rather than only changing the altered attributes. At small scale, you probably won't see any noticeable performance h

Categories : Reactjs

React: avoid controlled component boilerplate
You may want to read "Two-Way Binding Helpers" section of the documentation: http://facebook.github.io/react/docs/two-way-binding-helpers.html There is this LinkedStateMixin: var NoLink = React.createClass({ getInitialState: function() { return {message: 'Hello!'}; }, handleChange: function(event) { this.setState({message: event.target.value}); }, render: function() { var m

Categories : Reactjs

How to count the number of Grandchildren
You can count the number of grand children using following code: var count = 0; React.Children.forEach(this.props.children, function (child){ count = count + React.Children.count(child.props.children); }); Here is your fiddle with this solution implemented: http://jsfiddle.net/db8o8920/

Categories : Reactjs

Reactjs: CJSX Nested Conditionals
I haven't tested it, but based on how normal JSX works you only need the {expression} thing to escape from JSX mode. The program starts in JS mode (or CS here), and when an element tag is encountered it enters JSX mode. Using {foo} in JSX mode causes it to go back to JS mode. From there the above rules apply, and you can re-enter JSX mode by starting a tag, and so on. render: -> <div

Categories : Reactjs

React's Refs in Reagent (or Om)?
I found the answer from the author of Reagent here if anyone cares to look. It turns out refs cannot be directly supported because of the way Reagent does its rendering. The proposed solution is to wrap the portion of a component that needs to be referenced in another component and use component-did-mount in the wrapper.

Categories : Reactjs

Modify attributes of children in ReactJS component
As mentioned by @lpiepiora plunker, the code to do what I want would be: var inputReactObject = React.Children.only(this.props.children); var clonnedChild = React.addons.cloneWithProps(inputReactObject, { className: "input-element test" }); return clonnedChild;

Categories : Reactjs

Can a component know its own DOM tree context?
You could look upward in the DOM in componentDidMount and componentDidUpdate, but that's messy and uncontrolable. There may be a better solution but this is the first thing that comes to mind. var headerFactories = ['h1', 'h2', 'h3', 'h4'].map(function(tag){ return React.createFactory(tag) }); var makeHeader = function(level){ var make = function(){ var factory = headerFactori

Categories : Reactjs

React-Router: Import And Use Named URLs
You can accomplish what you want using transitionTo(). You can use Navigation mixin if you are within a component: https://github.com/rackt/react-router/blob/master/docs/api/mixins/Navigation.md Or if you want to navigate at a place outside of a component (say inside stores) you can use this example: https://github.com/rackt/react-router/issues/380. Basically you need to: var AppRouter = Reac

Categories : Reactjs

Flux/React Complex Reusable Component
You shouldn't be making any ajax calls in the autocomplete component (since you said you want to make it reusable). I usually put all the data request calls/api usage into a separate module that uses promises to prevent the multiple requests So the idea then is to just have your autocomplete component get the options/data from a parent component. That parent component can get the data from store

Categories : Reactjs

User-defined vs. native ReactJS components
In React 0.12 you check if the "type" property is a string. In older versions you would have to inspect the "constructor" property (child.constructor.name would be a good hint) var Element = <p>Some Tag</p>; if (_.isString(Element.type)) console.log("got DOM primitive")

Categories : Reactjs

Select option with React TestUtils Simulate
The problem might be that Simulate.change only calls the select's onChange (which doesn't exist). I don't think it'll actually cause the select's value to change unless you cause that change in your onChange handler. If you insist on using refs over onChange, change this line: TestUtils.Simulate.change(selectComponent, { target: { value: 'type_a' } }); to this: selectComponent.getDOMNode().v

Categories : Reactjs

Reagent generate a React Component that passes React.isValidClass(component)?
What reagent-react-router does to make this work is use reagent.core/reactify-component. The reactify-component exists to make Reagent components valid React components for these kinds of inter-op scenarios.

Categories : Reactjs

Using react-router without JSX
In 0.12 in JavaScript it looks like this: var Router = require('react-router'); var Route = React.createFactory(Router.Route); var DefaultRoute = React.createFactory(Router.DefaultRoute); var NotFoundRoute = React.createFactory(Router.NotFoundRoute); React.render(( React.createElement(Router, {location: "history"}, Route({path: "/", handler: App}, DefaultRoute({handler: Home}),

Categories : Reactjs

Syntax error in updated 0.12 react docs?
To use this feature you have to have harmony enabled. Unfortunately the fiddle integration you're using is not having it enabled. There is a commit made recently which adds it, so very likely it will be up there. If you want to use it right away, you can either host the file somewhere, or just add the script directly to the fiddle: <script> (function () { var tag = document.querySe

Categories : Reactjs

Testing for mouse wheel events
If the event handler is for onWheel you should use Simulate.wheel. There's a 1:1 mapping of events to Simulate methods. Remove the "on" and lowercase the first letter. onScroll -> Simulate.scroll onKeyDown -> Simulate.keyDown onWheel -> Simulate.wheel

Categories : Reactjs

Does React.js require server side?
React.js does not use a web server to create virtual DOMs. It builds the virtual DOM and does its diff operations on the client's browser. People mostly use React.js to implement front-end Views (MVC View) of their web applications. But you can use Node.js to render them on the server side if you like (for seo purposes etc.) http://facebook.github.io/react/

Categories : Reactjs

how to use a string in jsx for the dom part?
I hope I understand your question correctly. You use curly brackets: <div className="commentBox"> {myVariable} </div> You cannot use arbitrary Javascript there, only expressions are valid. You can read up on it here: http://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions

Categories : Reactjs

React JSX and FirstSibling or FirstChild
You said you want to select the first tab and assign a className to it. I think the solution to it is rather trivial and similar to this (I didn't test it): React.renderComponent(<Tabs><Tab isSelected = true title="Tab1"></Tab><Tab title="Tab2"></Tab></Tabs>, document.getElementById('content')); var Tab = React.createClass({ render: function() { r

Categories : Reactjs

JSX Converter using React.createElement("h1", null) instead of React.DOM.h1(null)
I had the same error with the coffee-react-transform lib. These libraries are getting updated for React 0.12. If you're still on React 0.11, you'll probably need to roll back grunt-react to a slightly older version, or bump up to React 0.12.

Categories : Reactjs

ReactJS and JSX - can I have uncontrolled checkbox?
Use defaultChecked Reference: http://facebook.github.io/react/docs/forms.html#uncontrolled-components

Categories : Reactjs

How can I disable animation in a reactjs component first time
Using componentWillMount instead of componentDidMount it will work perfectly as shown in this fiddle : http://jsfiddle.net/ghislaindj/jpuyd3gb/1/ However, if your real code must fetch the data in DidMount, you should use ssorallen comment.

Categories : Reactjs

Communicating between comments in different sub-trees
Well I bit the bullet and implemented a pub/sub based solution and it was not as ugly as I had expected. In fact I can see the decoupling benefit that it provides - now that I have the infrastructure in place I can trigger updates from many other places in the code.

Categories : Reactjs

flux multiple store instances
The Flux way is to create singleton stores. They are not models as we are used to thinking about models in an ORM-style MVC pattern. Stores are instantiated only at the moment of the application's initialization. They manage a "domain" of logic and data. These singleton stores register a callback with the dispatcher. The callback is the only way data gets into the stores. Stores also provide

Categories : Reactjs

Unit conversions, permissions, and other transforms in Flux & React
If your transformations are "pure" functions, then they can live in a Utils module. DateTimeUtils, for example. I mean "pure" in the functional programming sense: stateless, with no need for any stateful information that is not passed in through the method's parameters. Same inputs always result in the same output. Utils are bags of static functions have no application-specific dependencies (t

Categories : Reactjs

How can I compare this.props.children with nextprops.children
ComponentWillReceiveProps isn't called after the first render: http://facebook.github.io/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html You need to do what the other comment says, use shouldComponentUpdate.

Categories : Reactjs

Login ajax request Flux React?
Basically you need to make an Ajax request, and then create success/error handlers. Inside those handlers, you will create actions to inform your stores of the result. It's probably a good idea to have an AppStore or SessionStore or something that will hold the data related to the current user and the auth token. Your controller-views can listen to that store and render their children when the

Categories : Reactjs

Rid of repeated spans in React.js?
As suggested by @ivarni, the extra spans were caused by white spaces! To prevent this write your code without white spaces around the braced expressions. <ReactElement>{noRoomForWhiteSpace}</ReactElement>

Categories : Reactjs

Should the action or store be responsible for transforming data when using React + Flux?
Yep, you're right! In Flux, we want to keep the data structure flat, and let any data manipulation occur in the Stores themselves. The data-flow is essentially: Component --> (actions) --> Dispatcher --> (callback) ---> Stores -----+ Ʌ | | V +-- ("

Categories : Reactjs

Flux: return values from AJAX to the component
This code: jsPromise.then(function(response) { return response; }); doesn't do what I think you think it does. It waits for jsPromise to resolve, calls the callback with the response, and whatever you return from the callback becomes the resolved value of a new promise that gets returned from jsPromise.then. Check out this JavaScript Promises guide for more information on how promises work.

Categories : Reactjs

Google+ signin button with ReactJS
As stated in the Google+ Sign-in Button docs, data-callback is expected to be "A function in the global namespace". That is because Google's code likely calls your callback by name since all HTML attributes are just strings. It will do something like (warning, not real code): window[element.dataset["callbackName"]](); You are passing a reference to your callback, which is not globally accessibl

Categories : Reactjs

Can I have the same route handler for two routes
This code is from react-router issue #410 by rpflorence: /** @jsx React.DOM */ var React = require('react'); var Router = require('react-router'); var Route = Router.Route; var Routes = Router.Routes; var Link = Router.Link; var Foo = React.createClass({ render: function() { return ( <div> <p>hello</p> <p>stuffId: {this.props.params.stuffId}

Categories : Reactjs

How to update ReactJS component based on URL / path with React-Router
This question has been open awhile, and it seems like there should be a more straightforward solution, but I'll take a stab and share what we do in our application. We are using the Flux architecture, which has the notion of Stores that inform components when their state is updated. In react-router, they have a PathStore that fits into this model nicely, since when the URL changes it can then no

Categories : Reactjs

React click handlers and binding this
I'm fairly new to react, but I figured I'd throw this out here to help. I think you need to change this line, R.td({}, R.button({onClick: function() {this.onTagDelete(tag.name)}.bind(this), // BIND className: "delete"}, "u2716")), to R.td({}, R.button({onClick: function() {this.onTagDelete.bind(this, tag.name)}, // BIND className: "delet

Categories : Reactjs

React error message missing
In my experience with React, it logs much more useful error messages if you build things step-by-step. Do that R.td({}, person.stuff.join(", "))] before the return statement, then use that result later on. If person.stuff isn't an array you'll get a better error message then. More to the point, why do you want React to throw an error? If it's for development purposes, there are easier ways to che

Categories : Reactjs

How can a component do layout of its children?
I'm not entirely sure of what you're asking, but there are things that a wrapping component like your <Layout /> can do to children. You mention you'd like to wrap each child component in a div. Here's an example of that: var Layout = React.createClass({ render: function() { var children = []; if (this.props.children) { for (var i=0; i < this.props.child

Categories : Reactjs




© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.