Commit26 //JS React [Let's Get Functional]
I am studying JavaScript React with @skillcrush, in this module we will cover how to reuse code with functional components
I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!
🤖 👽 🍄 Greetings travelers! We are diving back into our JS React course with Skillcrush. I’ve been struggling with a back injury issue and when I’ve found time to code I’ve been focusing on my JavaScript30 challenges.
I’m taking a break this week from working out due to my back, so that has freed up some time for me to focus on my bootcamp courses again.
Let’s Get Functional
My SC modules always begin with a video. I love this. It helps to incorporate different styles of learning. So we will watch a video about the module’s subject matter. Then there is a written lesson on the subject. After that we dive into challenges and usually round out the module with a quiz.
These are my somewhat raw notes of what I’m learning along the way.
Functional Components
Defining functional components
Rendering functional components
Pass props to components
FUNCTIONAL COMPONENTS
a javascript function that returns JSX
Defining a component is similar to writing a standard function, except you capitalize the first letter of the component to tell React that it is a component.
PROPS
data passed as attributes when rendering a component
Functional Components
Now we move on to the written lesson, where I’ll share some code snippets for illustration.
const GroceryList = () => (
<ul>
<li>Eggs</li>
<li>Bagels</li>
<li>Cheese</li>
<li>Sausage</li>
<li>Butter</li>
<li>Old Bay</li>
</ul>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<GroceryList />, rootElement);
As mentioned in the previous lesson, defining a function as a component, you capitalize the first word.
From what I am seeing we are using the arrow function in this as well. We aren’t passing it through anything. We are rendering a shopping list. It seems we are attaching this rendering directly to the DOM root in the HTML.
Rendering a Functional Component
Write the name of the component in a self-closing tag
Always capitalize the first letter of the component name (to tell React you want to render a component)
Otherwise it will default to using a built-in DOM element
// You can render standard DOM elements in our JSX with familiar lowercase tag names
const standardDomElement = <div>Nothing Special Here</div>;
// When rendering a functional component, use a capital starting letter, and a self-closing tag
const userDefinedElement = <MyComponent />;
How to pass a Prop
Write your functional component (like Greeting in the example below)
Tell React you want to include a prop in the component (writing “props” at the argument")
Identify where the prop will show up in your code (like “Hi, {props.name}”)
Define a component to return JSX with the value of that prop (GreetGuests holds the values of the names in the Greeting component. When rendering the names will display where the prop was placed)
// always name components with a leading capital letter
const Greeting = props => (
<div>
<h2>Welcome!</h2>
<p>Hi, {props.name}.</p>
<p>We are so happy that you have come to crush React dev skillz with us!</p>
</div>
);
const GreetGuests = () => {
const weCanUseVariablesAsPropValues = "Grace";
return (
<div>
<Greeting name="Caroline" />
<Greeting name="Marie" />
<Greeting name={weCanUseVariablesAsPropValues} />
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<GreetGuests />, rootElement);
I feel like they are trying to cram a lot into this lesson. I’m hopeful that it will come together through doing the challenges.
Write a Functional Component
On to the challenges. We are working to build a bulk name tag generator. It appears that the challenges will build off of each other. So for this first one, we created the following code block.
// import the react library to write JSX
import React from "react";
/* write an arrow function called "NameTag" that returns JSX
The JSX returned should consist of:
- a div element with className attribute of "name-tag" and three nested children elements:
- an h3 element with className attribute of "title" and the inner text of "HELLO"
- a p element with className attribute of "subtitle" and the inner text of "my name is"
- a h2 element with className attribute of "name" and the inner text of your name
*/
const NameTag = () => (
<div className="name-tag">
<h3 className="title">HELLO</h3>
<p className="subtitle">my name is</p>
<h2 className="name">Twixmixy</h2>
</div>
);
/* export our functional component definition to be
imported then rendered within another module */
export default NameTag;
We worked in our NameTag.js
file. I was able to code up all of this except for the export. I couldn’t remember what that needed to explicitly be. By the time I got to that part I noticed there was a code-along video in the lesson, so I watched that to review my code and find the answer.
Render Your Functional Component
Continuing the challenge, we’ll fork our code and then code-along with the Teacher Assistant.
We only wrote two lines of code for this one.
import React from "react";
import ReactDOM from "react-dom";
import NameTag from "./NameTag.js";
import "./styles.css";
const App = () => (
<div className="App">
<h1>Name Tag Generator</h1>
<NameTag />
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
For this challenge we worked in the index.js
file. We pulled in the NameTag code with our import statement.
import NameTag from "./NameTag.js";
The “.js” doesn’t have to be typed. It would be inferred if we left it off.
Then simply added our component to the App
rendering.
<NameTag />
And then our name appears!
A pretty quick and simple challenge. Of course made much easier with code-along instructions from the TA.
Pass Props to Your Functional Component
We get another code-along video! Final challenge of this module. Fork again.
We will be editing both the index.js and NameTag.js for this challenge. We are wanting to replace out the basically “hard coded” name Twixmixy to be able to iterate multiple names.
NameTag.js
import React from "react";
const NameTag = (props) => (
<div className="name-tag">
<h3 className="title">HELLO</h3>
<p className="subtitle">my name is</p>
<h2 className="name">{props.name}</h2>
</div>
);
export default NameTag;
To start we replaced Twixmixy with {props.name}
. We also updated the NameTag
functional component to pass props
through it.
const NameTag = (props) =>
index.js
import React from "react";
import ReactDOM from "react-dom";
import NameTag from "./NameTag.js";
import "./styles.css";
const App = () => (
<div className="App">
<h1>Name Tag Generator</h1>
<NameTag name={"Twixmixy"} />
<NameTag name={"Janet"} />
<NameTag name={"Dandy"} />
<NameTag name={"Rolf"} />
<NameTag name={"Winona"} />
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Now in the index.js file where we previously had <NameTag />
listed we added name={“value”}
. This way we could replicate it as many times as needed and allow for multiple name tags to be generated.
Now for me I always want to take that next step of integrating some sort of API when it comes to data input like this. I want data input to be more user friendly, etc. or something. I mean that could also look like adding a prompt and collecting those in an array I think?? I’m not sure - you tell me what you think!
Quiz: Reuse Code with Functional Components
I got one question wrong.
Question #1: A functional component is simply a JavaScript function that returns ________.
INCORRECT
Your Answer: HTML
Correct Answer: JSX
I guess where I get confused about this is that it LOOKS like HTML, when it is actually JSX and referred to as JSX.
That was a pretty quick module to get through! Of course the code-along videos helped. Next we will cover Rendering Array Data Models. I’m looking forward to that. For now, it’s been a lot of computer time already. I need to find some ways to take care of my body and let my back heal.