Learn while you poop

IMAGINE WHAT YOU COULD BUILD πŸ—

IF YOU HAD TIME TO LEARN ALL OF REACT πŸ‘©β€πŸŽ“

Learn While You Poop! πŸ’©

πŸ‘‰ No pressure learning at 2 minutes per day.

Start with the basics, become a React 16.3 master

How frustrated do you get when you’re learning some tech and every resource you find is just wasting your time?

Either you’re reading random blogs that make no sense. Or you’re paying through the nose for expensive books and courses that you’ll never finish anyway.

HERE’S HOW IT USUALLY GOES πŸ‘‡

🎲 you give up piecing together random blogs

πŸ“” you buy a book

πŸ’Έ get the video course upgrade too

πŸ†• you start reading

πŸŽ“ learn some basics

βš’ you build some stuff

πŸ’Ό you get busy

πŸ™ life gets in your way

πŸ“½ and you forget all about your course

✈ 6 weeks fly by

πŸ‘Š you get stuck

🎲 you search random blogs for a solution

Twitter - Swizec Teller

Website - Learn While You Poop

Really loved the intro for the site!!!

Notes

MODULE 1: REACT ESSENTIALS

Introduction

Seperation of Concerns

🌟 Old JavaScript

// Togglable paragraph in old JavaScript
<div>
  <button id="showhide">Show paragraph</button>

  <p id="toggleMe">This is the paragraph that is only displayed on request.</p>
</div>

<script>
  function changeDisplayState(id) {
      var d = document.getElementById('showhide'),
          e = document.getElementById(id);
      if (e.style.display === 'none' || e.style.display === '') {
          e.style.display = 'block';
          d.innerHTML = 'Hide paragraph';
      } else {
          e.style.display = 'none';
          d.innerHTML = 'Show paragraph';
      }
  }
  document.getElementById('showhide').addEventListener('click', function (e) {
      e.preventDefault();
      changeDisplayState('toggleMe');
  });
</script>

🌟 JQuery

// Togglable paragraph in jQuery
<div>
  <button id="showhide">Show paragraph</button>

  <p id="toggleMe">This is the paragraph that is only displayed on request.</p>
</div>

<script>
  $("#showhide").on("click", function (e) {
    e.preventDefault();

    if ($("#toggleMe").is(":visible")) {
      $(this).html("Show paragraph");
      $("#toggleMe").hide();
    }else{
      $(this).html("Hide paragraph");
      $("#toggleMe").show();
    }
  })
</script>

🌟 React

// Togglable paragraph in React
class Toggled extends React.Component {
  state = { show: true }

  onToggle = () => this.setState({
    show: !this.state.show
  })

  render() {
    const { show } = this.state;

    return (
      <div>
        <button onClick={this.onToggle}>
          {show ? "Hide paragraph" : "Show paragraph}
        </button>
        {show && <p>This is the paragraph that is only displayed on request.</p>}
      </div>
  )
  }
}

WHY ARE COMPONENTS SO GREAT πŸ€”

🌟 You can think of components as LEGO blocks for your app.

Just keep in mind that components give you πŸ‘‡

  • composability, building blocks you can assemble into anything
  • encapsulation, components have clear APIs so you never have to worry about internals
  • reusability, build it once, use it everywhere

HOW JSX MAKES YOUR LIFE EASIER

Notes

Share on Twitter
Share on Facebook

Navin
Created by Navin. He loves to learn, blog and develop new applications.
Twitter LogoGithub LogoLinkedIn LogoFaceBook Logo