As I've mentioned many, many times, our application looks great, but there's still a lot for us to
do.
So inside the section, we're going to add in an interesting little feature to the code execution of
all of our different code cells.
So let's first begin by just explaining what this additional feature is going to be.
I want to highlight one possible use case of this tool.
Remember, this tool is all about allowing a user to write out some code and document it very easily.
So I'm going to put in a little bit of code into these two code cells.
And I just want to imagine how a user might, at a very practical level, make use of this.
So I'm going to imagine that maybe we've got a user who wants to document the process of fetching some
data and then rendering that data onto the screen using react.
So I put inside of here a little bit of JavaScript code that defines a function called fetch posts.
The goal, this function is to just go and fetch some posts.
It doesn't actually work.
It's just a very quick example.
So a user might put this little bit of code in and then maybe add in a text cell right above it to say
here is some code to fetch some posts.
Once they've got that bit of documentation put together, they then might want to add in an example
of how to use that function to fetch them posts and then render them onto the screen.
So to do so, they might add in some code to the second code cell that looks like this.
So I've got some imports for react, I have to redefine the function because, of course, remember,
all these different code cells are essentially bundled 100 percent separately right now.
So if we want this second code cell to have access to fetch posts, we have to redefine it down here.
Then the user could show a quick demonstration of defining a component that will call for posts, update
some piece of state, and then render those onto the screen somehow.
So this definitely works, and I think this is kind of a practical example of how a user would make
use of our tool, but there's just one thing about this that is a little bit awkward right now.
The thing that is awkward is that if we ever want to access code or make use of functions, variables
or anything like that defined in a prior cell.
No words are fetched function, we want to use it down here, let's define up here.
We have to redefine it or essentially rewrite all the code inside of our later cell.
So let me put that another way.
Our second code cell wants to call fenceposts.
The second code cell does not have access to the function that is defined inside the first code cell.
So we have to completely rewrite all that stuff inside of the second code cell.
That is kind of awkward.
It gets really awkward really quickly because if we ever decide to slightly rewrite our post function
in some way, well, we would have to go back to both implementations, the one right here and the one
right here, and make changes in two locations.
So here's the future I want to add in.
I want to allow all code cells to reference any variable, any function, any object, anything that
is declared in a prior code cell.
So if we look at this in kind of diagram format, here's a very simple example of what we want to be
able to do.
I've got to code cells in a row right here.
The first one declares a variable called color.
I want to be able to access that variable inside of any later code cell.
So this next code selldown should be able to do a console log of color and see a console log of red
appear at our at our console.
Now, just be clear, our current setup does not do this at all.
Our current bundling setup considers each code cell to be 100 percent independent.
And when we bundle this code, it is just this code.
When we bundle this code, it is just this code.
There is no connection whatsoever between our code cells right now.
So we are going to be able to eventually not have all this fetch post and import for axios right here
and whenever we try to call fenceposts.
It's going to call the fetch function that had been defined previously.
That's it.
That is a challenge that's we're going to try to put together.
This will be a fun little thing to take a look at.
There's going to be many little challenges that come up along the way, as you can imagine.
So definitely a good little addition to our project.
Let's take a pause right here and figure out how to approach this in just a moment.