Looks like my project is all done being generated.
I'm not going to change into that widgets directory.
I'm gonna start up my code editor inside there.
And then finally, I'm going to start up my development server with an NPM start.
All right.
And there is our starter application.
Yeah, there we are.
Very good.
As usual, before riding out any code, we're going to think about the design of our application.
So how are we going to architect this?
And how does the hook system really come into play?
Well, we start to think about architecting out this application.
Everything is going to be the same as if we were using class based components.
We're still going to worry about props.
We're still going to think about states.
Let's think about how we can architect this application and what different components we might want
to make.
All right, so first off, I think that we should probably have two components, as usual, we'll have
an app component that kind of governs or coordinates information across our entire application will
then also create an accordion component.
This accordion component is going to be in charge of showing this entire piece of content right here.
Because we probably want to make the accordion reusable in nature and be able to show different sets
of questions and answers.
We should probably have some kind of items prop that is created inside of our app component and then
pass down as a prop into the accordion.
The accordion will then decide what set of questions and answers to show on the screen based upon this
items prop.
So pretty simple, pretty straightforward, no difference here whatsoever on the prop side of things,
just because we're using the hook system.
Now, the actual items, Propp will probably make it an array of objects for each object inside of there.
Maybe we will give it a title and a content property.
So the title will be the content displayed up here, kind of the question, should it, so to speak.
And then the content will be what is displayed whenever user clicks on or selects one of these different
panels.
Well, Propp system.
Not too bad.
How about states?
What seven pieces of state do we need to actually implement this SAT?
Well, as I look at this, there's really only one thing that is changing as a user starts to click
around and that is which question is actually expanded and displayed to the user.
We probably only want to have one question visible at a time or at least will set up that requirement.
So if a user clicks on this first question, we're going to want to expand it.
If a user then clicks on the second question right here, we will close the first one and expand the
second one.
Because there can only ever be one active question at a time.
We could probably get away with just one piece of state, maybe an index or in a number the index of
the active question that should be expanded on the screen.
So maybe if a user clicks on this first question right here, we should set some kind of active index
piece of state to zero to say that we should expand the element at index zero.
If the user then clicks on the last one down here, we could set some kind of active index piece of
state to to to say that we want to expand to question.
Zero one, two.
We want to expand that one right there.
That means we really just would need one very simple piece of state, just a number, and the number
is going to change based upon whatever the user clicks upon.
So let's think about where this active index piece of states should live.
We could definitely have this active index piece of state to find inside the app.
However, our app component is unlikely to ever really care about what question is expanded at any given
time.
Whenever a user sees the accordion and they start to expand or look on different questions, chances
are there are no other parts of application that really cares about what tab is expanded.
Rather than defining this active index piece of state inside the app and then passing it down as a prop
inside of the accordion.
We're going to instead just define this piece of state inside the accordion itself so only the accordion
is going to know which question is currently expanded.
Now, of course, we could design this completely differently.
But as I've shown you the app right now, as we've taken a look at the mockup, it is very clear that
there is no other part of our application that cares about that piece of state at all.
That's why we're going to define that piece of state inside of the accordion.
OK.
So let's go back over to our editor and start to implement or increase some of these different files.
First thing I'm going to do is the same thing we usually do.
I'm gonna open up that SIRC directory.
I going to highlight everything inside there and delete all of it.
Then inside the FARC file folder.
I'm gonna make a new file of indexed dot G.S..
And I'll make a new file of app dodginess.
Let's create a very simple app component and then show it on the screen inside the index dodgiest file.
To get started inside of APTA, yes, I will import react.
I will then export default and arrow function.
And I will return.
An H1.
That says widgets at.
Well, then save this.
I'm gonna go backwards, the index dot J.S. file at the very top, it will imports react.
React Dom from react ash dom.
I'll get that app component.
That we just created Lorikeets I.
Then finally react, Dom, not render of our app component.
And we want to show it inside of documents.
Where Selecter found roots and collapses sidebar.
You can see that whole line as a quick reminder.
All right.
Let's go back over to our browser.
Yep, there's widgets up.
So I think we're all set and we can start working on this new accordion component in the next video.