Preguntas etiquetadas con reactjs

Solo estoy escribiendo en la entrada de texto y, en onChangecaso de que llame setState, React vuelve a reproducir mi interfaz de usuario. El problema es que la entrada de texto siempre pierde el enfoque, por lo que necesito enfocarlo nuevamente para cada letra: D. var EditorContainer = React.createClass({ componentDidMount: …

97 javascript  reactjs 

Ya he estado usando las funciones ECMAScript 6 y ECMAScript 7 (gracias a Babel) en mis aplicaciones, tanto móviles como web. El primer paso obviamente fue a los niveles de ECMAScript 6. Aprendí muchos patrones asincrónicos, las promesas (que son realmente prometedoras), los generadores (no estoy seguro de por qué …

97 javascript  asynchronous  reactjs  async-await  promise 

Algo así de simple debería lograrse fácilmente, sin embargo, me estoy tirando de los pelos por lo complicado que es. Todo lo que quiero hacer es animar el montaje y desmontaje de un componente React, eso es todo. Esto es lo que he probado hasta ahora y por qué cada …

97 animation  reactjs  css-animations  greensock  react-motion 

Quiero hacer un componente React que se pueda arrastrar (es decir, reposicionable con el mouse), que parece involucrar necesariamente el estado global y los controladores de eventos dispersos. Puedo hacerlo de la manera sucia, con una variable global en mi archivo JS, y probablemente podría incluso envolverlo en una interfaz …

97 javascript  reactjs 

Soy nuevo en ReactJs. Este es mi codigo: var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app')); y compilarlo con webpack. También agregué el componente principal a mis alias. La consola arroja …

97 reactjs  react-router 

En esta documentación de React, se dice que shallowCompare realiza una verificación de igualdad superficial en los objetos de utilería actuales y nextProps, así como en el estado actual y los objetos nextState. Lo que no puedo entender es que si compara superficialmente los objetos, el método shouldComponentUpdate siempre devolverá …

97 javascript  reactjs 

Recientemente he estado estudiando mucho sobre la funcionalidad y las formas de usar la biblioteca de JavaScript de Facebook React.js. Cuando se habla de sus diferencias con el resto del mundo de JavaScript, a menudo se mencionan los dos estilos de programación declarativey imperative. ¿Cuál es la diferencia entre ambos?

97 reactjs 

¿Cómo puedo activar manualmente un evento de clic en ReactJS ? Cuando un usuario hace clic en element1, quiero activar automáticamente un clic en la inputetiqueta. <div className="div-margins logoContainer"> <div id="element1" className="content" onClick={this.uploadLogoIcon}> <div className="logoBlank" /> </div> <input accept="image/*" type="file" className="hide"/> </div>

97 html  reactjs 

Soy nuevo en la biblioteca React.js y estaba repasando algunos de los tutoriales y me encontré con: this.setState this.replaceState La descripción dada no es muy clara (IMO). setState is done to 'set' the state of a value, even if its already set in the 'getInitialState' function. Similar, The replaceState() method …

96 javascript  frontend  reactjs 

Había construido un sitio web con React.js y webpack . Quiero usar fuentes de Google en la página web, así que pongo el enlace en la sección. Fuentes de Google <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> Y configura CSS body{ font-family: 'Bungee Inline', cursive; } Sin embargo, no funciona. ¿Como puedó resolver esté …

96 reactjs  webpack  google-font-api 

Antes de publicar esta pregunta, intenté buscar en sqa stackexchange pero no encontré ninguna publicación sobre superficial y renderizado allí, así que espero que alguien pueda ayudarme aquí. ¿Cuándo debo usar shallow y render al probar los componentes de React? Según los documentos de Airbnb, he hecho algunas opiniones sobre …

95 testing  meteor  reactjs  chai  enzyme 

Soy muy nuevo en webpack, descubrí que en la compilación de producción podemos reducir el tamaño del código general. Actualmente, el paquete web tiene alrededor de 8 MB de archivos y main.js alrededor de 5 MB. ¿Cómo reducir el tamaño del código en la construcción de producción? Encontré un archivo …

95 node.js  reactjs  npm  webpack  webpack-dev-server 

Estoy tratando de hacer UN SIMPLE usando react-router ( versión ^ 1.0.3 ) para redirigir a otra vista y me estoy cansando. import React from 'react'; import {Router, Route, Link, RouteHandler} from 'react-router'; class HomeSection extends React.Component { static contextTypes = { router: PropTypes.func.isRequired }; constructor(props, context) { super(props, context); …

95 javascript  reactjs 

Quiero llamar a un método expuesto por un componente React desde la instancia de un Elemento React. Por ejemplo, en este jsfiddle . Quiero llamar al alertMessagemétodo desde la HelloElementreferencia. ¿Hay alguna manera de lograr esto sin tener que escribir envoltorios adicionales? Editar (código copiado de JSFiddle) <div id="container"></div> <button …

95 reactjs 

Espero que el estado se recargue en el cambio de accesorios, pero esto no funciona y la uservariable no se actualiza en la próxima useStatellamada, ¿qué está mal? function Avatar(props) { const [user, setUser] = React.useState({...props.user}); return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading...</p>); } codepen

95 reactjs  react-hooks