Diving into React: The Final Module of Flatiron School

I'm in my fifth month of Flatiron's coding boot camp, and the time has simultaneously flown by while feeling like years. In the fifth and final module of Flatiron, I am learning React and Redux. Since React has felt very different from anything we've done so far, I figured now would be the perfect time to blog about some beginner concepts--components and props.

Programmers love the separation of concerns, and - based on my current understanding - React does an excellent job of making separation very easy.

Components

React has a class called Component which is used to declare and components built into your application. Any components made are technically classes that inherit from the Component class. Components are used to separate aspects of our application that will need to be appended to the DOM.

class Welcome extends React.Component {
  render() {
    return (
      <div>
        Hello World!
      </div>
    )
  }
}

To render that component to the DOM, the component is added in the App class using JSX (a tag language that is basically a combination of JS and XML to render HTML):

class App extends React.Component {
  render() {
    return (
      <div>
        <Welcome />
      </div>
    )
  }
}

This would append the 'Hello World' div to the ReactDOM in our application. Components become more dynamic by adding properties or 'props'.

Props

Let's say we wanted the welcome message in our application to be customized by name. We can do this by adding a 'name' prop to our Welcome component.

class Welcome extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}!
      </div>
    )
  }
}

Then when we call our component in our App class we can pass in a name prop to our welcome message.

class App extends React.Component {
  render() {
    return (
      <div>
        <Welcome name="Laura" />
        <Welcome name="John" />
        <Welcome name="Audrey" />
        <Welcome name="Charlie" />
      </div>
    )
  }
}

This would append 4 customized welcome messages to our ReactDOM. As the code stands now, the App class is still hardcoded, but this can be easily altered by iterating over an object containing the name data.

Default Props

If we also wanted to pass in a default name in case none was given, React has a 'defaultProps' method that makes this easy and very readable. After declaring our Welcome component, we can declare the default props we want to include.

class Welcome extends React.Component {
  render() {
    ...
  }
}

Welcome.defaultProps = {
  name: "stranger"
}

Et voilà, that is my simple intro to React components and props. So far I have been enjoying learning React. I love when code is very readable and clean, and that seems to be deeply ingrained in React. The concepts seem pretty logical and self-explanatory - but of course, I am just beginning to scratch the surface. I'm excited to dig deeper (next I'm learning about forms and events) and begin building some React apps.

React docs: https://reactjs.org/docs/getting-started.html

Happy new year to all!

My goal in 2020 is to continue building and learning. I'd like to dive into Swift (and maybe Kotlin) once I feel my understanding is deep enough in Ruby on Rails, JS/HTML/CSS, React, and Redux.