Day 6: React

Wednesday, July 5, 2017

Lecture Videos

Pending

Topics

React

JavaScript

  • Named and default exports
  • Named and default imports

Package Managers

  • NPM - Node Package Manager
  • Yarn - Facebook’s version of npm

Examples

React

Using map with Components

See this example live on CodePen →

Person.js



class Person extends React.Component {
  render() {
    return (
      <li>Hello, {this.props.person.name}!</li>
    )
  }
}

export default Person

PersonList.js



import Person from './Person'

class PersonList extends React.Component {
  render() {
    const people = [
      { name: 'Seth', hair: 'blonde' },
      { name: 'Nichole', hair: 'long' },
      { name: 'Davey', hair: 'long gone' }
    ]
    return (
      <div>
        <h2>People</h2>
        {
          people.map((person => <Person person={person} />))
        }
      </div>
    )
  }
}

export default PersonList

Stateless Functional Components

Not every React Component needs to have state. Many simply render a bit of props and UI. For such components, we don’t need to instantiate a whole class that inherits from React.Component, we can simply write a function that accepts props as an argument and returns the markup we need.

For instance, in the previous example, the Person component can easily be re-written as a Stateless Functional Component.



function Person (props) {
  return (
    <li>Hello, {props.person.name}!</li>
  )
}

// Or...

const Person = (props) => <li>Hello, {props.person.name}!</li>

JavaScript (ES6+)

Named and default exports and imports

Prior to ES6, there were many competing ways to export and import JavaScript modules. The most common were CommonJS and AMD. Luckily ES6 defined a specification for standardizing module export and import.

There are two types of exports from any JS file - named and default. The important thing to remember is that there can only be one default export per module, but there can be as many named exports as you want.

myModule.js 



export const myNumber = 8

export function sayHi () {
  console.log('hello')
}

export default class MyClass {
  add (a, b) {
    return a + b
  }
}

The main difference is how they are imported. Default exports get the most concise syntax:



import MyClass from 'myModule'

const classInstance = new MyClass()
classInstance.add(1, 2) // => 3

Default import naming

Since there can be only one default export per module, the name by which you import the default export is not important - you can name it whatever you want. For instance, instead of importing as MyClass, we could have said import LuftBallons from 'myModule', and it would have worked just fine. To read more about default and named exports, click here.

Named exports get a slightly more verbose syntax for importing, and the names are important (otherwise it can’t determine what you want to import).



import { myNumber, sayHi } from 'myModule'

console.log(myNumber) // => 8

sayHi() // => 'hello'

If you need to import a named export under a different name—if, for example, you have another import or local variable with the same name—you can specifiy a different name using as.



import { myNumber as num, sayHi as yo } from 'myModule'

console.log(num) // => 8

yo() // => 'hello'

You can also combine default and named imports in the same line.



import MyClass, { myNumber, sayHi } from 'myModule'

Package Managers

Node Package Manager (npm)

Node Package Manager hosts almost half a million packages of free, reusable JavaScript code and is the largest software registry in the world. It allows you to easily add any module to your project, and it will install the requested package, as well as any required dependencies of that package.

user@localhost ~
  
npm install react

Yarn

Yarn is Facebook’s version of npm, designed to improve performance and resolve several important issues. The key differences are:

  • Deterministic installation - packages will always install in the same order on every machine
  • yarn.lock - this lockfile locks dependency versions for consistency and security
  • Local cache of downloaded packages - faster and can still work with no internet connection after initial installation
  • Parallel installation - Dependency installation can happen in parallel, greatly increasing speed

To install yarn (npm was already installed as part of setup instructions), type the following command (Mac):

user@localhost ~
  
brew install yarn

Or on Windows, download the installer.

Once installed, you can use yarn with following commands:

user@localhost ~
  
yarn
# installs all packages and dependencies listed in your project's package.json

yarn add {package_name}
# installs a new package and adds it to package.json

yarn start
# starts your local development web server (in project from create-react-app)

Projects

Day 7 Homework

  • Load data in the form when a note is clicked in the list.

Bonus Credit

  • Add a note to the list when the form is submitted.

Super Mega Bonus Credit

  • Make the delete button work.

Super Mega Bonus Credit Hyper Fighting

  • Make the “+” button in the sidebar clear out the form so a new note can be added.