React

What options does the webpack-dev-server command need (to make it allow live reloading)?

"--content-base src" (since you probably don't want to serve the current folder) "--inline --hot" (inline allows live reloading, and hot makes inline just a little bit better)

Since every component is basically a big Javascript object, we can use what key word when working within it?

"this"

What are the three main module loaders out there right now, and in what order did they come to the market?

1. require.js (way back in the day) 2. browserify (2011-12, eventually beat out require.js) 3. webpack (2014-15, duking it out with browserify)

What is redux?

A method of handling the state (or the data) of an app.

Props automatically get converted into what when they're injected into another component?

An object (JSON)

A React app is made up of a _____________ tree.

Component

One of the best features of React is that it automatically manages what?

DOM manipulation

If you ever want to render a component, you use it as if it were an _____ _____.

HTML tag. For example, the Layout component is rendered with <Layout />

What is the problem with running an Express server with just "node server.js"? What is the alternative?

If you make a change to any server code, it won't update automatically. You have to Ctrl+C exit and then restart. A better alternative is putting a nodemon script in the package.json file.

Why is it not bad to mix your HTML with your Javascript when using JSX Transformer?

Javascript creates HTML elements all the time. This is just an easy way to do it day-in, day-out.

What is used to pass in data to a component from the outside, or from a parent?

Properties (or "props")

What is the mentality behind state (as opposed to props)?

State only gets used if a component has an internal value that only affects that component and doesn't affect any of the rest of the app.

Think of React (or the React library) as what part of MVC?

The View

What does "handling state" mean? What exactly are we trying to handle?

The data that comes from the server.

What is the module loader of choice for React developers?

Webpack

How can you set state initially (within the constructor() method)?

constructor() { super(); this.state = { name: "Nick" }; }

What is the (better) equivalent of... var React = require('react');

import React from 'react'

When dealing with events in Javascript, how do you grab the value?

pass in the Javascript event (e) and call e.target.value handleChange(e) { var title = e.target.value; this.props.changeTitle(title); }

The first line of a React component constructor must call what?

super() class Layout extends React.Component { constructor() { super(); this.name = "Nick"; } }

Within a component, how can you access props that have been injected from a parent component?

this.props

How is state available, and what is it by default?

this.state == null

Does React have unidirectional or bidirectional data flow?

unidirectional (components down in the tree cannot update components above it, getting rid of circular dependencies)

What is the (worse) equivalent of... import React from 'react'

var React = require('react');

When data manipulation becomes very dynamic and complex, client side DOM manipulations become performance intensive. What is the (three-step) React approach to handling this?

1. Render the DOM server-side (the "virtual DOM"). 2. Compare the virtual DOM to the actual DOM and figure out the differences. 3. Update only the changed nodes of the actual DOM instead of re-rendering the entire DOM.

What port is the default where the webpack-dev-server will run?

8080 localhost:8080

How could you inject a "title" prop into a <Header /> component from within a parent Layout component?

Add a prop just like you would on an actual DOM element. <Header title={"Some title"} /> Now within Header.js you can access "this.props"

What is Babel and what does it do?

Babel is a great tool for transpiling our React code (which is JSX) and our ES6 code at the same time.

Is React a declarative or imperative way of writing code?

Declarative

Everything in React is a _____________, which return exactly one ____ __________.

Everything in React is a Component. Components return exactly one DOM element (a <div> or <ul> or <h1> or whatever).

What is the JSX portion of a component?

Everything inside parentheses of the return part of the render method.

True or False: A benefit of React is that data lives in multiple places.

False. The goal is to create apps that have data living only in one place, which is what React accomplishes.

What is the following saying? What is its (worse) equivalent? import { render } from 'react-dom'

Import the render() function from the react-dom library var render = require('react-dom').render;

What's a simple definition of "state"?

Whatever you're keeping track of in your app. (user data, server data, UI state, etc)

Flux (and Redux) prevents _____________ data flow, which is the problem in Backbone/Angular that React solves.

bidirectional

In the new ES6, what is a shorter/cleaner version of the following? changeTitle(title) { this.setState({title: title}); }

changeTitle(title) { this.setState({title}); } (no longer is {title: title} necessary to assign the value passed into the function)

When you have an app with data living only in one place, it allows you to make really ______ components.

dumb Child components don't really care where the data comes from or what the data is. They just know how to pass props or handle events.

What are the two ways that data gets handled in React?

state & props

How can you access something inside state?

this.state._____ inside JSX {} inside render if this.state = { name: "Nick" }; then... {this.state.name}

How could you use state and props together when passing data between components?

- set a default value with state (in the constructor) constructor() { super(); this.state = { title: "Welcome" }; } - inject that into a child with this.state render() { return ( <div> <Header title={this.state.title} /> </div> ); } - access it in any child component with this.props In Header.js... render() { return ( <div> <Title title={this.props.title} /> </div> ); }

What if you want an <input> that allows us to change a <Title /> component (within a <Header /> component) as we type through "two-way binding"? What (four) steps are involved?

1. Make a method on the parent component. It will receive a value and use setState(). changeTitle(title) { this.setState({title}); } 2. Pass the new method in as a prop to a child component. Make sure to bind(this)! <Header changeTitle={this.changeTitle.bind(this)} title={this.state.title} /> 3. Add an onChange event to the <input> in the child component. Again make sure to bind(this)! <input onChange={this.handleChange.bind(this)} /> 4. Make a handleChange() method on the child component. It will receive a Javascript event (e), get the updated title out of the element, and call the parent component's original method. handleChange(e) { var title = e.target.value; this.props.changeTitle(title); }

In most cases, you'll want to wrap the "return" part of your render function within what?

<div> tags render: function() { return ( <div> </div> ); }

How does a prop relate to state?

A prop is a portion of state passed down from a parent component to a child component.

For the absolute most basic React component, you need what method?

A render method The render method says "Hey, this is what we're spitting out."

Inside a component's render method, what is used to designate JSX syntax and what is the power behind that?

Anything wrapped in parentheses () can convert HTML to Javascript-created elements. So instead of writing... var h1 = document.createElement("h1"); h1.innerHTML = "It works!"; You can just write... <h1>It works!</h1> The JSX Transformer will convert it to the necessary Javascript.

In general, you want to hold your state where?

As high up as possible Then any components that need it will be children (and will allow them to be "dumb")

What if you want an <input> that allows us to change a <Title /> component (within a <Header /> component) as we type through "two-way binding"? What is the general thought process?

As the user enters text in the <input> (within the <Header /> component), we want to take that "change" and trigger some type of "event" on the overall <Layout /> parent component. That "event" will say to update the "state," which will then cause the whole React-style rendering process to begin because a state changed.

Why should you not install webpack-dev-server globally?

Because then all the other developers will also have to install it globally. The node_modules/.bin actually installs a command of "webpack-dev-server" too.

Why do we capitalize components?

Because they're a constructor. It is not a rendered DOM element YET, it just has the capacity to render out a DOM element whenever we print it (with something like <Header />).

True or False: A component can have two parent DOM elements.

False. It has to have ONE parent DOM element. (This is why typical practice is to wrap everything inside the render's return section in a <div>, so you don't have duplicate <h1> parent DOM elements, for example.)

True or False: A component that keeps track of state is a "dumb" component.

False. It's "smart," and we want as many "dumb" components as possible.

Describe the difference between imperative code (Backbone/Angular) and declarative code (React).

Imperative is "how" to do something. When a model updates, you tell the view to listen to that model, and then in the view you tell the HTML what to do. Declarative is "what" to do. It takes away the "how" allowing you to focus on what's most important.

Where and how should every Component be saved?

Inside a js/components directory. Capitalized first letter. js/components/Layout.js

What does it mean to call a component "smart"?

It keeps track of state. It has methods to update or change state, etc. (This makes it much more specific to your app only.)

In Backbone, there's always the question of "At what point should I update the DOM, and when I do, who should update that? Should the list component update and re-render the whole list? Or should just each <li> manage rendering itself?" How does React take all of that out?

It re-renders everything ... all the time ... on any change. The trick is.. it only does it in Javascript and only touches the DOM if something has actually changed that would reflect in a visual way.

What happens if you don't use "bind(this)" when passing functions or methods around with props?

It will execute in the context of whoever is calling it. If you try to call this.props.someMethod() within a child component, it's the same as calling it ON THAT COMPONENT. So it will setState within a component that doesn't have anything "listening" for this.state. The method fails silently, no errors, making it very hard to debug.

What is the main issue with touching or manipulating the DOM directly from the View layer?

It's expensive. It's slow. And we're probably not doing it efficiently.

In React, everything is _____________.

Javascript (which means updates happen very fast)

Since "webpack-dev-server --content-base src --inline --hot" is a mouthful to type every time (and it requires a global install of webpack-dev-server), what should be done instead?

Make it a script in the project's package.json file. "scripts": { "dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot" }, 1. "npm run dev" now runs that command 2. the "./node_modules/.bin" part of it makes sure you're not running a global "webpack-dev-server" executable command

What are the two main problems with traditional MVC frameworks (like Backbone or Angular, for example)?

Manipulating the DOM (slow and inefficient) Creating a very complicated mental model around our data and views because of circular dependencies (as apps grow, it becomes harder and harder to know where a bug is originating)

What is perhaps the most important concept to understand when talking about data in React?

No matter how many components "change" as data is injected down the tree, we'll only update the DOM with the actual element changes that have visual differences when the entire tree was rendered.

If you need logic, should you place it inside the JSX portion of a component?

No! Very basic logic can be placed inside the render method (but outside JSX's return() portion). More complex logic can be placed as methods on the class. class Layout extends React.Component { getVal() { return "Nick"; } render() { return ( <h1>It's {this.getVal()}!</h1> ); } }

Do you use JSX Transformer (or something like it) in production?

No. Instead you'd want to pre-compile. Use something like Browserify or Webpack to make it really simple.

Everything inside {} in the JSX portion of a component will execute as what?

Normal Javascript.

Every component has a render function, which is what?

Our declarative way of describing how we want the component to look on the page.

How would you pass in a "path" property for an image, and how would you access it?

Pass "path" property in with... React.render(<Avatar path="http://bit.ly/1NABbkf" />, document.body); and access it inside the render function with... render: function() { return ( <div> <img src={this.props.path}/> </div> ); }

What two things do you need to pull in on the main index.html file?

React and JSX transformer <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>

Describe what happens whenever state changes (in users, posts, UI state, etc) in a React app.

React goes through the component tree and re-renders everything. "The state has changed, so let's pass it down and see what needs to be updated."

What is one benefit of having "dumb" components (i.e., components that don't care where their data comes from or what the data even is)?

Reusability! (and stability) You could move components from app to app. Data can come from a completely different place. The component doesn't care.

What is JSX Transformer?

Something only used in development. Don't have to use it if you don't want to. It allows us to -- within our components -- write an HTML-like syntax. But then we need to compile that down to method calls (which is what the JSX Transformer does).

By using "bind(this)" when passing a method around with a prop, it will fire on what component no matter who calls it?

The parent component (i.e., whatever component defines the method instead of the child component calling it).

What does the "webpack" command do?

Transpiles all the Javascript down into one file.

True or False: When writing code in React, you are never directly grabbing the HTML and updating.

True. (React's diff algorithms are doing that for us.)

True or False: Within a parent component, you can render two of the same child component and give it two different values for the same prop.

True. <Header title={"Some title"} /> <Header title={"Another title"} /> This creates multiple, different versions of a Header.

True or False: You can inject multiple props into a child component.

True. const title = "Welcome Nick"; ... <Header name={"Some name"} title={title} />

What does the "webpack --watch" command do?

Watch your code for changes. As you save, it will re-transpile everything.

When we say that Component2 is a child of Component1, what is happening inside Component1's render function?

We are displaying Component2.

If Component2 (child) needs to know about something in the state of Component1 (parent), how is that transferred?

We pass it down via a prop.

In Webpack, what is used to get some type of live page reload happening?

Webpack dev server npm install -S webpack-dev-server (Do NOT install webpack-dev-server globally)

Why is webpack preferred over browserify for React projects?

Webpack is more featureful, and React kinda requires you to be more featureful in some ways.

Explain what happens with React's "virtual DOM" whenever render fires, and why it's so great.

Whenever React renders the component tree, it looks for changes from the virtual DOM to the actual DOM. If there are changes, it will update only the affected nodes in the most efficient way. If there are no changes, it doesn't even touch the webpage. This is great because Javascript is so fast, but the DOM is so slow. Whenever we have to actually go to the DOM and update elements, that's the slow part of any webpage. By having a virtual DOM where everything is updated behind the scenes and only changed in the actual DOM if there's differences, it allows our applications to become super fast.

What is so cool about state within a component (in regards to changes)?

Whenever state changes on a component, the component will automatically re-render and update the DOM if there are any changes. If there are no changes, the DOM won't get touched at all. This is the first major thing React brought to the world; it manages a virtual DOM for you.

You can think of your components as a _________ that takes in _________ and outputs __________.

You can think of your components as a function that takes in state and outputs HTML(ish). (It doesn't truly output HTML, but React takes care of that for you.)

In React, your state is held ________ your components.

above whatever state is needed in components below is passed down

What is a VERY important thing to remember when passing functions or methods around with props?

bind(this)! <Header changeTitle={this.changeTitle.bind(this)} title={this.state.title} />

Since a React component is just a Javascript class, you can use a ___________ method within them.

constructor method

How do you set up and run an Express server?

create a server.js file "node path/server.js"

In order to be able to "import" a component from a different script, what do you need to do within each component?

export it! Either as "export default class Layout......." or at the bottom.... "module.exports = component"

What if you want a default property so you don't have to define/call it when you render?

getDefaultProps getDefaultProps: function() { return { path: 'https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg' } },

Exporting a component allows you to _____________.

import it somewhere else

How could the following be cleaned up into one line? var render = require('react-dom').render; var method1 = require('react-dom').method1;

import { render, method1 } from 'react-dom'

Props are __________ into other components

injected

What's a good rule for when state may be appropriate? If there's something that affects ________ and absolutely nothing else.

layout

What does "nodemon" stand for? What does it do? What's an important thing to remember with nodemon?

node monitor monitors all code and restarts the server any time a file changes. must install it globally with "npm install -g nodemon"

How do you install webpack globally, and what does that allow you to do?

npm install -g webpack (might require sudo) Allows you to run the "webpack" command from anywhere.

As an alternative, sometimes people create a ______ directory, which has all the very top-level components like Layout.js, and then components would be everything that lives inside of a page.

pages (or it could also be called routes)

As you develop, you'll end up using which of the two data handling methods (state & props) more than the other?

props

Every component has a render function, and every render function needs a __________ statement.

return

What is the one method you need to know with state?

setState() this.setState({ name: "Nick2" });

Failing to use "bind(this)" when passing a method around with a prop results in it failing _________, which makes it very difficult to ________.

silently debug

The goal with any event in React is to get the _______ to change.

state