Hello Friends!

If you'd like to read up on Week 11, click here.

Finally! We finally began learning about a topic that began hearing whispers about ever since the beginning of the bootcamp...REACT!

DOM Manipulation in Plain JS

One of the big struggles of building a larger application front-end was managing how to manipulate the DOM and creating re-usable code that would render or update DOM elements.

In plain Javascript, you'd work with classes and/or functions that would explicitly create DOM, kinda of like the code I used to build my project last week:

class CharacterSelection{
    static renderPage(bodyElement){
        clearElements(bodyElement)
        let chooseTop = document.createElement('div');
        chooseTop.className = "choose-top";
        let chooseMid = document.createElement('div');
        chooseMid.className = "choose-mid";
        let chooseBottom = document.createElement('div');
        chooseBottom.className = "choose-bottom";
        this.renderTop(chooseTop);
        bodyElement.appendChild(chooseTop);
        this.renderMid(chooseMid);
        bodyElement.appendChild(chooseMid);
        this.renderBottom(chooseBottom);
        bodyElement.appendChild(chooseBottom)
    }

    static renderTop(chooseTop)
    {
        let titleText = document.createElement('p');
        titleText.textContent = "CHOOSE YOUR CHARACTER"
        chooseTop.appendChild(titleText);
    }

A limitation of this was that if I wanted to re-use an element in another page, I wouldn't easily be able to

REACT

React is a library built by Facebook specifically designed to build Web Application User Interfaces with an emphasis on performance.

In React, you no longer have to explicitly create HTML elements (like div, or img etc.), you work with Components.

Similar to how ActiveRecord provided some methods to help build backend stuff, React is an awesome tool to help us as long as we follow React convention and understand some React specific terminology and some advanced Javascript concepts like:

JSX (Javascript XML): Special React syntax that makes creating DOM elements really easy and easy to read when you get used to it. Here's a sample of it for a small practice program I was writing.

const GifDisplay = (props) => {
    return (
        <div>
            <img src={props.gifUrl} alt=""></img> 
        <div/>
    );
};

export default GifDisplay;

Context: As javascript programmers we need to be cognizant about where we are calling methods, especially when we call methods within classes. Understanding the this keyword is critical in React.

Callbacks: Certain Components may need to pass data around, or you might take data and map them into components. Either way, Javascript's callbacks definitely have significance in React.

Functional or Class: React components can (for the most part) be divided into either 'Functional' or 'Class'. I won't dive into this right now, but just know that it's important to understand why we use either.

State & Props: As a front-end designer, I now have to make decisions about how components hold data (state) and pass/handle data (props). Below is another snippet of a practice program I am currently building.

class IntroductionContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // set up the state
      buttonTextArray: ["Enter"] // the text that will be passed to the button container to create buttons
    };
  }

  //renders the content container and navBar for the introduction page
  render() {
    return (
      <div className="page-container">
        <IntroductionContentContainer />
        <NavBarContainer
          buttonTexts={this.state.buttonTextArray}
          handleButtonClick={this.props.handleEnterButtonClick}
        />
      </div>
    );
  }
}

export default IntroductionContainer;

The Challenge This Week

To be honest, the work load (pretty much all labs) has been heavy, but that isn't what was most challenging for me this week. The most challenging thing this week has been preventing myself from getting overwhelmed by the sheer amount of libraries and plug-ins that work with React to make some really jaw-dropping web applications.

I know we will be having a project due in the next couple weeks, and I want to be able to make an application somewhat similar to some absolutely fantastic websites I've seen! Here's one ESPECIALLY cool one I saw:

https://bruno-simon.com/

When I see super neat-o websites like Bruno's site, I find it hard not to explore libraries when really, I should be focusing on the React fundamentals

What's Next?

Next week is our code challenge, which I am feeling confident about. I still want to play around with some React styling libraries like Semantic UI. For the time being, I'll just be practicing React through lectures, videos, readings and actual mini coding projects. I'll be sure to update all of you next week!

Good luck in your own endeavors!
Shawn