Commit15 //JavaScript React [Writing React Code]

Photo of Winona being a complete goober while sleeping

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!

Writing React Code

Writing React in JSX:

1. Tags
2. Comments
3. Attributes
4. Expressions

The Basics of Writing React Code

JSX tags a similar to HTML tags

// An element with no children, which holds a single img tag.
const elementWithNoChildren = <img src="http://link-to-some-funny-cat-pic">;

// An element with children, holding a div, h1, and h2.
const elementWithChildren = (
  <div>
    <h1 id="page-title">skillcrusher</h1>
    <h2 classname="section-title">I crush skillz. All day, everyday.</h2>
  </div>
);

Comments for JSX are {/* */}

For example:

const componentWithAComment = (
  <div>
    {/*Sometimes it is helpful to write comments in our JSX.
    The way to do this is to use a slash and star to open and close a JavaScript comment inside of curly brackets... Just like this! */}
    <h1>How to comment in JSX, in a comment in JSX</h1>
    <p>Whoaaaaaaaaaaa! Sooooooooooooooooooo meta</p>
  </div>
);

Attributes define a property of an object or element.

For example:

// STATIC // attribute value will not change, so we just pass a string
const elementWithNoChildren = <img src="http://link-to-some-funny-cat-pic">;

// VARIABLE // attribute value will change, so we pass a variable
const divStyle = { backgroundColor: "blue" };

divStyle.backgroundColor = "red";

const whatColorWillIBe = (
  <div style="{divStyle}">
    <h1>Im a fancy title on a colorful background</h1>
  </div>
);

Expressions can function in the middle of a JSX tag and helps to build more dynamic and interactive variable changes.

They are placed in the {curly braces}. They are also camelCase.

Some examples:

// this element will render an h1 element with "Hey Skill Crusher!" as the text
const firstName = "Skill";
const lastName = "Crusher";
const renderVariables = <h1>Hey {firstName + " " + lastName}!</h1>;
// this element will render a p element with 8 as the text
const evaluateAnyExpressions = <p>{1 + 2 + 5}</p>;
function getTime() {
  const now = new Date();
  return now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
}

// this element will render a span element with the current time as the text
const renderTheResultOfAFunctionCall = <span>{getTime()}</span>;

Writing React Code Cheatsheet

At Skillcrush they provide us with cheatsheet materials for us to easily reference or do a quick CTRL/COMMAND+F search to help with our projects and challenges.

Fix Our Buggy Code

Buggy Code Fixed!

Had a few typos to fix and then needed to add the red className to change the values of the h3 property.

Met with my TA at Skillcrush this morning to see how things are going for me. These past few weeks I feel like have been great since I attended the "how to study" session (included with my bootcamp classes!)

I'm really enjoying the learning process right now and I am glad I can take the time til I have to jump into a new job.

Really hopeful that I can kind of power through my courses in the next couple months while I'm on my career break.

In addition to JS React (already finished HTML, CSS, and JavaScript Vanilla), I will be taking Advanced CSS, Wordpress/PHP, Ruby, and Python.

Turn our Pseudocode into… JSX

Another challenge! This one all of the instructions were in the codesandbox. Everything was going fine til I wrote a div and then I was getting an error... of course then to find I just needed to write my closing div toward the bottom of the code.

Pretty straight forward. It was fun to mix the feeling of HTML with JS.

Quiz: Writing React Code

All correct, except for one.

Attributes define a property of an object or element, like a QUANTITY

Well that wraps Writing React Code! We are plugging right along with this class.

How is JS React going/gone for you? Any thoughts, tips or tricks? Share with me below! <3