Introduction to React Components

The ability to create components is one of the most important and powerful features of React.

One quick look at an HTML file in Google Devtools will remind you what a mess an HTML DOM can be. Components allow you to create code that is modular, reusable, readable, and predictable.

But by doing a little bit of organizing upfront, you can spend the rest of the time letting your creativity soar. Just a little bit of Monica, then relish in the Phoebe. Perfect analogy.

We will be creating each of our components in its own, separate file, which will keep everything organized and therefore easier to utilize. So let’s say we want to write a component for our Navbar, we will first open a new file. It’s probably best to name this file the name of the component to avoid confusion, so let’s call it Navbar.js.

As I mentioned earlier, we will be writing our components as functions, so the next step is to create a simple JavaScript function expression. (Remember to always capitalize component names, because otherwise, React will read the component as a div tag when it is called.)

Now what you put inside the function body is where things start to get interesting. What would you expect to happen if the above function contained the following code: return <h1>Navbar Goes Here</h1>? In ordinary JavaScript, it would return a SyntaxError, because the browser can’t recognize HTML. But HAHA! It isn’t HTML. It’s JSX. And since we imported the React library, our browser can correctly interpret JSX and manipulate the DOM through JavaScript functions.

And there you go! We’ve created a React component. The next step is using it.

A common practice for developers using React is to have a main component titled ‘App’ which will combine all of the components into one file to be rendered by the browser. So let’s imagine that our app is suuuper simple and (at least for now) only has the one component. We will make our ‘App’ component in exactly the same way as our ‘Navbar’ and call the Navbar function in the return statement. We can call the function by enclosing the function name inside the < and/> HTML-like symbols, like this: <Navbar /> .

Now we have our ‘App’ component returning the Navbar function call from the ‘Navbar’ component. But the code as it is will not run. That is because the components are not actually connected to each other yet. That’s where importing and exporting come in.

A functional component hanging out by itself not connected to anything isn’t very useful.

You can export a component by adding the command export default immediately before the function expression.

So now we have our ‘Navbar’ kind of shouting into the ether, but nobody is listening.

We need to import the component into the ‘App’ component, in the same way we imported the React library, using the filepath to the Navbar.js file.

And there you go! Your components are now linked up and you’re ready to Phoebe Buffay yourself to React programming glory!

Related posts:

In one of my previous articles I wrote about URM and how it works. In another I mentioned about test cases and how to keep ideas for a simple function. Now it’s time to wrap up with TDD. TDD is the…

According to the dictionary the word ‘certain’ means known for sure or established beyond doubt. I like things to be certain in my life with no maybe, but I know that that isn’t always possible. Most…

The clocks have gone back, and the year is winding its way towards its end. The summer with its heat is now nothing more than a memory. As I was out walking today toward the supermarket to buy my…