Component drill - navigation-bar

navigation-bar.js

/*
First thing we need to do is import the React library which we can do with the syntax
import NAME_WE_DECLARE from 'library-name'
So theoretically, we could import the 'react' library as Puppies. It would be confusing but just know that you can call it what you want. 
*/
import React from 'react';

// Next, in this file, we import the CSS styles using the following:
import './navigation-bar.css';

//After, we get to creating the component.
export default function NavigationBar(props) {
/*
Notice we use 'export default' -> this is okay to use when we're exporting only one thing. In this case, it's the component.
After, we use the word function, because the component is in itself a function which we call NavigationBar which is the name of the component. We have one parameter - props - which is an object and stands for the properties of the component.
*/

/*
Here, we create a const, or a variable that cannot be updated.
Let's break down links. So if we recall, props = the parameter for our component called NavigationBar. And if we remember, props is an object. So using dot notation, we're accessing the links property on the props object. Cool. Still with me? To give a quick example

We have something like this:

const props = {
  links: {
    href: 'https://facebook.com',
    text: 'Facebook'
  }
}

So by using props.links, we get access to the links object, or this: 
  {
    href: 'https://facebook.com',
    text: 'Facebook'
  }
  
Alright! So now, if we look at the next part, we have .map - what is that again? It's an array method. Cool! That tells us two things: links is an array and we're going to use this .map method on the links array. Okay, so if we look at the code, it looks similar to forEach. We're doing something for each 'link' in the array. 

So the .map method accepts two arguments, link which is equal to the elements themselves in the array and index which is self-explanatory.
*/
const links = props.links.map((link, index) => (

//First we create an <li> and we pass the index as the key attribute on the <li> element. Cool.
  <li key={index}>
//Then we create an <a> element within the <li> where we bind the array element's href value inside the href attribute.
    <a href={link.href}>
//Within hte <a> we add the array element's text value. Alright, this is starting to make sense.
      {link.text}
    </a>
  </li>
));
//To summarize, we map over each element in the array and create an <li> for each and use the index, the href property and the text property. Pretty cool!

//Next, we return an element. Here's where we use JSX, which is basically HTML in JS.
    return (
//We're creating a div and adding a class using the 'className' which Babel transpiles into class='navigation-bar' in this instance.
        <div className="navigation-bar">
//Then we pass the props.title into an <h1> element.
            <h1>{props.title}</h1>
//Then we create a <nav> element, add a class.
            <nav className="navigation-bar-nav">
//Then we create a <ul> and inside it, we add our links const which we created earlier. It's important to pass it in using {} so that JS knows it's an object. 
                <ul>
                    {links}
                </ul>
            </nav>
        </div>
    );
}

//Now what will the component look like when we 'call it' to be rendered in the DOM?
<NavigationBar title="Thinkful" links={links} />
//The syntax is <ComponentName property="value" property="value" />
 
//Also note this variable is defined in this file
  const links = [{
    text: 'Courses',
    href: 'http://www.thinkful.com/courses/'
}, {
    text: 'Mentorship',
    href: 'http://www.thinkful.com/mentorship/'
}];

//So to help drill it in further, it's kinda like this

const NavigationBar = {
  title: 'Thinkful',
  links: links
}
//Then React calls the component, which remember with the same name? So it does
NavigationBar({title: 'Thinkful', links: links});
//Which then creates our composable component by transpiling the JSX and returning HTML with all our values in place.

//Voila! Our first stateless React component! It's stateless because we have to pass in the props.

//Here's what the component looks like without the comments
import React from 'react';

import './navigation-bar.css';

export default function NavigationBar(props) {
    const links = props.links.map((link, index) => (
        <li key={index}>
            <a href={link.href}>
                {link.text}
            </a>
        </li>
    ));

    return (
        <div className="navigation-bar">
            <h1>{props.title}</h1>
            <nav className="navigation-bar-nav">
                <ul>
                    {links}
                </ul>
            </nav>
        </div>
    );
}