Typo.js | A client-side JavaScript spellchecker that uses Hunspell-style dictionaries | Dictionary library

I am developing a huge project. The project is a webshop where most of the things are dynamically. Because of this, I decided to use AngularJS as a framework and added the jQuery library.

However, after developing more than 3 months now. I see that i got alot of AngularJS code.

My angular structure is currently:

• 34 controllers - All about 6kb in size (non-minified, I can still save some space there)*
• 1 file with more then 21 angular services. - 11KB in size (non-minified)
• 1 file with 44 custom angular filters - 24KB in size (non-minified)
• 1 file with 32 custom angular directives - 18KB in size (non-minified)

On top of this i also use:

• LESS
• Bootstrap
• jQuery
• Typo.js**
• Tablesaw

I did not list every AngularJS or jQuery / JavaScript library I included inside the project. That would get a pretty long list, which would be unnessecary.

*Not all controllers are loaded at once. Most controllers at one time is 5.
**When a word is misspelled it shows a word correction. Just like google.com. Also generates suggestions when a user searches for something and no results were found. It shows equivalent word suggestions that have results.

The project makes alot of AJAX calls using the $http service from AngularJS. Eg; auto complete in the search, pages, user information, basket data .. and much more.

The benefit of it in my eyes: 'It feels very smooth'. All data gets loaded within the same page if it is part of the same page.

For example:

The webshop articles are loaded on the page /assortment/. When searching, the search results are displayed on the same page, instead of redirecting to a /search/ page.

My question is:

Is using so much JavaScript a bad practice? Does this affect slower computers alot? or is the difference not noticable? Or do i have to improve the code, so it won't affect slower PC's?

I go to mention that I am not able to test it on different computers yet. So i do not know how it performs on other PC's.

I found 1 topic on SO with a similair question: What's the downside of using too much JavaScript?

But the question itself is more directing to; 'using libraries'

I'm trying to pass the styles and text to the reactjs component using PropTypes, but I'm getting the error that TypeError: Cannot read property 'header' of undefined and its point the error to {typo.header}

Unable to pass 2 different props into react component. I'm sure I'm not passing the props correctly, I'm learning reactjs and not sure how to do this correctly. Can some guide me how to do this.

App.js: