CODEWITHSUNDEEP
javascriptreactjs
Danillo Corvalan
Danillo Corvalan

Reputation: 713

Reactjs SPA app - Everything as a component (Performance and practices)

I see that react fits well when you want to "componentize" small parts of your application, but I'm not sure about making a full component application, let's say a SPA.

In my example I have a single page with a menu and a content place for the "views" that are other components as well.

The way I found to solve that is to build a menu component and on its render method I check what option has been chosen and display this in this content place, its nothing but a switch case inside the render method (Smells but easily to fix)

var MenuComponent = React.createClass({
  getInitialState: function() {
    return { selectedPage: '' }
  },
  handleMenuClick: function(e) {
    this.setState({ selectedPage: e.target.attributes['data-page'].value});
  },
  render: function() {
    return (
      <div className='main'>
        <ul class='menu'>
          <li><button onClick={this.handleMenuClick} data-page='applicantList'>Applicant List</button></li>
          <li><button onClick={this.handleMenuClick} data-page='applicantForm'>Applicant Form</button></li>
        </ul>
        <div className='content'>
          {function() { 
            switch(this.state.selectedPage) {
              case 'applicantList':
                return <ApplicantList />
              case 'applicantForm':
                return <ApplicantForm />
              default:
                return <h1>Select a Page</h1>
            };
          }.bind(this)()}
        </div>
      </div>
    );
  }
});

From that point I imagine everything being a component and having their children components and so on. I want to know if this approach is a good practice and if it has drawbacks like performance or maintainability (I found it far easier for unit testing).

Upvotes: 3

Views: 1253

Answers (1)

Sophie Alpert
Sophie Alpert

Reputation: 143204

Splitting up your app into many small components is a great idea as it tends to make things a lot easier to understand. Think of each component as a function whose arguments are the props; with that in mind, perhaps it's a little more obvious the advantages of splitting things up like you suggest.

Unit testing is a great reason but splitting into components like this also tends to make code simpler, so I'd definitely recommend it.

Upvotes: 1

Related Questions