Показать иконку загрузки перед первой реакцией приложения-приложения

Question

Каков стандартный способ показа значка загрузчика до того, как браузер загрузит все файлы js и загрузит реакцию приложения.

Могу ли я сделать что-то подобное, не нарушая ничего?

<div id="content" class="app"> 
    Loading... 
</div> 

Answer 1

Да.

После того, как ваш Javascript загружен, вы можете заменить Loading... путем рендеринга реагировать приложение в то же <div>

render(
    <App />, 
    document.getElementById('content') 
); 

Answer 2

Один из способов сделать это с помощью 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>