The Importance of Import

When coding in React, sometimes it can feel near impossible to get the code just right, and believe me, I know all about that. But let's talk about one of the most basic, yet one of the most important aspects involved in React: import.

When using import, you can not only cut down on the amount of space used on each file, but you can also use that same code on multiple different pages and files. Import is a key part of the functionality of React, so it's not just a vital component (see what I did there?), it is also a great way to stay organized and it makes the whole process of coding much easier, you don't have to rewrite lines of code!

App.js
import React from 'react';
import Title from './Title.js'

function App() {
return (
    <div>
        <Title/>
    </div>
)
}
export default App;

Title.js
import React from 'react';

function Title() {
 return (
    <div>
        This is the Title
    </div>
)
}
export default Title;

Now, this may not seem like it does anything, but if you were to run this code, you'd see that it does actually do something important. Here, we can see that the phrase "This is the Title" will appear on the webpage, you could create other files just like this with different data, and with enough work, you can create a whole website. Facebook was made with React and many large companies are still using React as well.

I mentioned earlier how with import, we can reuse this code without having to rewrite anything, and not only does that make it faster to get the project done, but it also makes sure that you don't mess it up due to a typo or a brain fart, but you can also abide by a rule I mentioned in an earlier post- DRY: Don't Repeat Yourself.

So, if we look at each of these files like they are building blocks, we can make entire skyscrapers out of them. We of course have to start with the foundation: App.js, and then build up with each "floor" of our skyscraper: Title.js, LeftBody.js, RightBody.js, and so on and so forth. Eventually, we can build these massive cities using our code.

Something that I came across a lot was accidentally putting in the link wrong, or forgetting to import the file altogether, even worse, I would forget to export files. This will cause an error to pop up, and not allow the code to function properly because it is missing important key features that you put into place (or didn't). Navigating those errors can be difficult for someone who isn't experienced. I did have to look up what a few of them were saying to me, but generally, they are pretty straightforward, so that was a big plus in my book. However, finding out where the error was occurring was easy, figuring out how to fix that error, wasn't always easy. Let me tell you, there was a point where I was so tired and just kept getting this error that made no sense to me, I knew the code was right, it was working just fine, and everything was hooked up correctly. And then I spotted it, I didn't export the other file. I had taken so much time to figure out what was wrong because the error didn't specifically tell me. But, needless to say, I thankfully got it fixed.

So while there are definitely some upsides to using import and export, it can be a little tricky when you're still new to it all.

It may feel terribly intimidating, or it may seem super cool to you, I know I was a little scared by it but once I learned a bit more, it became simpler. Of course, I am still learning about some things, and I do not claim to be an expert, but I find it fascinating nonetheless. It's incredible to think that you can build large and functioning sites with code like this. Just look at Facebook or Netflix for example, they were built using React and of course, importing and exporting files across their code. Those are probably the biggest "skyscrapers" when you look at the React "neighborhood." A project I just made definitely falls in the shorter category, but I still made it into the wonderous city of "React-ville" or whatever you'd like to call it. But here I am, I was once terrified, and now, here I am, being able to tell you about some of my mistakes and how I actually kind of enjoyed working with this language.