最初にアプリを初期化する前にローディングアイコンを表示する

Question

ブラウザがすべてのjsファイルをダウンロードしてアプリケーションを読み込む前に、ローダーアイコンを表示する標準的な方法は何ですか？

何かを壊すことなくこのようなことをすることはできますか？

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

Answer 1

はい。

あなたのjavascriptがロードされたら、あなたはあなたをレンダリングしLoading...を置き換えることができますが、同じ<div>にcomponentライフサイクルメソッドを使用してこれを行うの

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

Answer 2

1つの方法はアプリを反応させます。

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>