Commit14 //JavaScript React [How Does React Work?]

Photo of Winona after being brushed

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!

How React Functions

3 Main Aspects to React's Functionality:

• JSX
• The Virtual DOM
• Data Models

JSX (JavaScript Extension)
A syntax that allows coders to write JavaScript that looks like HTML

Example:

<h1 className='large'>Hellow World</h1>

div, span, ul, ol, li, p, h1

We utilize these in JS React because of the Virtual DOM

The Virtual DOM
Acts as a copy of the DOM. React will use it to see what parts of the actual DOM need to change when an event occurs.

Data Models
How you represent the UI in JavaScript data types.

STRING -> "HELLO!"
BOOLEAN -> TRUE
NUMBER -> 9.8
OBJECT ->
{
key:'value',
key2: 9.8
nestObject: {
otherKey: false
}
}
ARRAY -> [0,4,0]

Data Models & React

JSX Example:

class HelloWorld extends React.Component
  render() {
    return (
    <div>
      <h1 classname="large">Hey girl!</h1>
    </div>
    );
  }
}

Common ways Data Models are used in UI:

1. Object – A profile of a user
2. Number – The temperature on a weather app
3. Array of objects – An online shopping cart that lists items and their prices
4. Array of strings – List of products you’ve previously purchased
5. Boolean – A checkbox to request extra guacamole on the Chipotle app
6. String – A user’s password on a website

Change Your Data Model and See What Happens

In this challenge we will change a light switch from off to on.

import React, { Component } from "react";

class App extends Component {
  state = { on: true };
  render() {
    let wallClass = "wall off";
    if (this.state.on) {
      wallClass = "wall on";
    }
    return (
      <div className={wallClass}>
        <div className="switch-plate">
          <div className="screw" />
          <div className="switch">
            <div className="switch-handle" />
          </div>
          <div className="screw" />
        </div>
      </div>
    );
  }
}

export default App;

Basically all we did was change the state on from false to true. This updated the UI to appear as the light switch was on.

Scenario Quiz: Choosing the Right Data Models

100% correct. It was a breakdown of the common ways data models are used in UI, see above!

Quiz: How Does React Work?

100% correct as well. Hopefully this means that I am understanding it all!

Well that's it for How React Works. Next we will move on to writing React code!

Any tips or tricks you may have? Insights? Sound off in the comments below!