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.
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.
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!