No Nonsense Guide to Import Components

I’ve been focusing more on Java lately as I will b having a Java college course coming up in June. Trying to stay ahead I’ve been researching and practicing but I personally like Javascript and React. It just feels more fun but when I returned I had a mini heart attack.

I couldn’t link my component to my App.js and for a split second I thought I forgot everything. Has all this time been wasted practicing these skills? I’m not as good of a programmer as I thought I was. What am I doing with my life!?

Then I realized I had a spelling mistake and all that worry washed away.

We tend to get in our heads sometimes especially when you’re first starting off. So if you’re freaking out because you can’t import your component; take a deep breath and check for a spelling mistake. If those don’t work then this no nonsense guide on how to link a component and have your first React page up and running in no time is for you!

Firstly, assuming you’ve already npx create-react-app; create a components folder for better organization. As your application grows you’re gonna wanna keep in order your files and this is a great way to start. Industry standard is to this this folder in you src file as well as ease of access.

Second, create a file of which you would like to add to your application. For example, I’m creating a home page for a landscaping business so it would make sense it has a Home file. You can choose to either have a functional component or a class component (I have a blog differentiating the two check it out!) but I for todays purposes I’ll be using a functional component.

Also don’t forget to place an header tag to label you component

Now, to import the file into your App.js we first need to clean up our file by getting rid of anything other then the div tags because in those div tags is where our Home component will be linked.

Finally, we’re going to write our import statement. This is where we need to be carful with our spelling. As everything has to match what we’ve named our files as well as where we placed our files. Thankfully Javascript knows this can be tricky so it has placed a helper to fill in suggestions as shown below.

The ./ is how you would access all files in your current directory.

In the end your import statement should look as such.

Lastly, to “link” your homepage you just need to use the component syntax to have you home page appear.

Congratulations, You’ve successfully linked your component! Keep coding and keep learning!