Hey ,
I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.
Please upgrade (use this link) access this content.
I'm super eager to help you learn more!
Right now, the main.js file contains everything about the Heroes List Component. But main.js is the entry point of the app. We don’t want to write both Heroes List and Hero Page in main.js since it’ll get complex.
The easiest way to organize this app is to put Heroes List and Hero Page in their respective files. So before we build the Hero Page, we want to refactor Heroes List into its own file.
First, we will create a HeroesList folder. This folder will store everything related to the Heroes List component.
In this folder, we will create a HeroesList.js (to hold the component). We will also move Filters.js into this folder since Filters belong to the Heroes List component.
First we need to import Tiny into HeroesList.js since we’re using Tiny as the framework. When importing, we’ll use ../ to traverse up a folder, into Tiny.
import Tiny from '../Tiny/tiny.js'
We need to export HeroesList before we can use it in main.js
export default Tiny({})
We can now copy-paste everything we wrote for HeroesList from main.js to HeroesList.js. We’ll leave the selector property inside main.js.
// HeroesList.js
import Filters from './Filters.js'
export default Tiny({
// Copy everything here
})
Remember to change the location of Tiny inside Filters.js since we moved the folder.
// Filters.js
import Tiny from '../Tiny/tiny.js'
// ...
Next, we need to import and use HeroesList from main.js.
// main.js
import HeroesList from './HeroesList/HeroesList.js'
Tiny({
selector: document.body
components: {
HeroesList
},
template() {
return '<div tiny-component="HeroesList"></div>'
}
})
The component should still work as before at this point