Show Loading Icon Before First React App Initialization

Question

What is the standard way of showing a loader icon before browser downloads all js files and loads react application. Can I do something like this without breaking anything?

Solution 1:

Yes.

Once your javascript has loaded, you can replace Loading... by rendering your react app into the same <div>

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

Solution 2:

One way of doing this using component life cycle methods.

Baca Juga

classAppextendsReact.Component {
    constructor(props){
      super(props);
      this.state = {
        loading: true
      };
    }
  
    componentWillMount(){
       this.setState({loading: true}); //optional 
    }

    componentDidMount(){
        this.setState({loading: false}) 
    }
  
    render() {
        return (
            <sectionclassName="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"));

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><divid="app"></div>

JavaScript Charts

Show Loading Icon Before First React App Initialization

Solution 1:

Solution 2:

Post a Comment for "Show Loading Icon Before First React App Initialization"