#301DaysOfCode – Learning React – Week 1

My 1st week of #301DaysOfCode has concluded, and I wanted to create a quick write-up of the notes I have taken while learning React these past days. A lot of what I learned was through CodeAcademy. You can take a look at their React course if you want to practice what I wrote up here in more detail.

Pros

Some of the pros React boasts:

  • Fast
  • Modular
  • SEO friendly
  • Flexible
  • Popular
  • Scalable

I will definitely take a look into how and why these pros exist as I continue on my learning journey.

JSX

JSX is a JavaScript syntax extension. It is an HTML/JavaScript hybrid, and is written in JavaScript files. It is not considered valid JavaScript on it's own and web browsers cannot read it without it being compiled first.

Ex:

const hello = <h2>Hi!</h2>

The section that looks like HTML is JSX above, and the statement creates a React element, and saves it to a variable named 'hello'.

Basic Usage

JSX elements can be used in the same places JavaScript expressions can: functions, objects, arrays, variables, etc.

To use a JSX expression that is more than 1 line you must wrap it in ().

Also, you can have nested expressions, but there must only be one outermost element, 2 outermost elements will not work.

OK:

const divOK = (
 <div>
   <p>Hi</p>
   <p>Bye</p>
 </div>
)

Not OK:

const divWrong = (
 <div>
   <p>Not</p>
 </div>
 <div>
   <p>OK</p>
 </div>
)

Rendering

After coding your elements, you must render the JSX elements you created, and the .render() function is the most common way to do so. .render() is part of the ReactDOM JavaScript library, which must be imported as it contains React specific methods that deal with the DOM:

ReactDOM.render(
    <h2>Subtitle here!</h2>, document.getElementById('app')
);

.render() takes a JSX expression as parameter one, creates the corresponding tree of DOM nodes and adds that tree to the DOM at the location of the second parameter, in the example above, at 'app'.

.render() is special in that it only updates DOM elements that have changed. It is able to achieve this using the virtual DOM. I found this part super interesting myself, since not having to update the entire DOM on small changes is great for user experience. Another topic for me to dig deeper into!

Usage cont.

Since 'class' is already a reserved keyword in JavaScript, JSX uses 'className' instead to denote the 'class' attribute of an element.

<h2 className="myClassName">Hi!</h2>

Self-closing tags must include the closing slash, or the JSX element will not be valid.

<img />

Code between the tags of a JSX element will be read literally as text so it will not do things like add up numbers. You can however, add curly braces {}, to have it execute like normal JavaScript. The curly bracers are treated as markers.

Event Listeners

You can put event listeners in JSX elements just like HTML elements. You can add an attribute like onClick={myFunction}

The difference is JSX uses camelCase for the naming convention instead of all lower case as HTML does.

Conditionals

"If" statements cannot be injected into JSX. You have to create the if statement outside of JSX tags with regular JavaScript. You can, however, use a ternary statement inside of a JSX tag.

You can also use && in conditionals.

.map()

.map() is used often in React, especially for creating lists of JSX elements.
Ex:

const items = ['Book', 'Apple', 'Car'];

const listItems = items.map(item => 
    <li>{item}</li>
);

<ul>{listItems}</ul>

Keys

Sometimes your JSX list elements will need to include keys.

A Key is a JSX attribute, with the attribute's name being key. Its value should be unique.

<li key={someUniqueValue}>{listItem}</li>

React uses the unique keys to make sure your lists stay ordered properly.

Keys are usually necessary if:

  • The items have memory, they need to remember between renders. To-do list items must remember if they were checked off or not.

  • The list order might change. A list of search results could be changed from one render to the next.

Behind the Scenes

React can be written without JSX, since every element is actually a React.createElement() function call, that looks like the below:

React.createElement(
  "p",
  null,
  "I'm a paragraph"
);

This is obviously not as pretty or quick to write, but good to know that this is what is done behind the scenes. It's easy to get lost in the "magic" of what is actually happening when coding.

Wrap-up

I definitely feel good about what I was able to learn this week, and have enjoyed learning about React so far. I think the JSX syntax extension is neat, clean and intuitive. Hopefully this was able to be informative to at least one person. I will be continuing to make these write-ups weekly throughout the rest of the year to the best of my ability. Cheers!