¿Cuál es la forma estándar de mostrar un ícono de cargador antes de que el navegador descargue todos los archivos js y cargue la aplicación de reacción?
¿Puedo hacer algo así sin romper nada?
<div id="content" class="app"> Loading... </div>Sí.
Una vez que su javascript se haya cargado, puede reemplazar Loading... al representar su aplicación de reacción en el mismo <div>
render( <App />, document.getElementById('content') );Una forma de hacer esto usando métodos de ciclo de vida de component .
class App extends React.Component { constructor(props){ super(props); this.state = { loading: true }; } componentWillMount(){ this.setState({loading: true}); //optional } componentDidMount(){ this.setState({loading: false}) } render() { return ( <section className="content"> {this.state.loading && 'loading...'} {/*You can also use custom loader icon*/} <p>Your content comes here</p> {this.props.children} </section> ); } } ReactDOM.render(<App />, document.getElementById("app")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"> </div>