React.js

.map

Example: var listItems = strings.map(function(string){ return <li>{string}</li>; });

test: /\.js$/

First loader that represents all strings that end with the pattern, ".js". This means that this loader will perform a transformation on all ".js" files.

webpack

Install with: npm i -D webpack webpack-dev-server html-webpack-plugin

.isRequired

sends a warning a prop isn't sent

Create a React App

1. cd to the directory in which you wish to create your app 2. mkdir with the name of the app and cd into it 3. enter npm init 4. Press enter through all of the following prompts 5. Open the app in an editor 6. Install react with npm install --save react or npm i -S react. 7. Install react-dom with npm i -S react-dom 8. Install babel 9. Create a new file named .babelrc in the root directory 10. Add { presets: ['react'] } to .babelrc 11. Install webpack server and plugin 12. Create a file in the root called webpack.config.js

Component

A small, reusable chunk of code that is responsible for one job. That job is often to render some HTML. Every component must come from a component class. Components can also render other components in a component instance.

state

A way of getting dynamic information into a component. State is not passed in from the outside. A component decides its own state. A plain js object that is used to record and react to user events. Each class based component has it's own state object. Whenever it is changed the component and it;s children immediately rerenders. Functional components do not have state.

Automatic binding

Allows you to pass functions as props, and any this values in the functions' bodies will automatically refer to whatever they referred to when the function was defined.

Event Listener

Attribute's name should be something like onClick or onMouseOver: the word on, plus the type of event that you're listening for. An event listener attribute's value should be a function.

JSX if statements

Can't be injected so the conditional statement must be on the outside.

Class Component

Component for info storage and "awareness"

package.json

Contains metadata about your new project. Created upon npm init. It keeps track of the modules that you install. Other developers can look at your package.json file, easily install the same modules that you've installed, and run their own local versions of your project

const someFunc =() => {};

ES6 function declaration

How to Use Props

Here's how to make a component display passed-in information: 1 - Find the component class that is going to receive that information. 2 - Include this.props.name-of-information in that component class's render function's return statement.

props

Information that gets passed from one component to another. A component's props is an object. It holds information about that component. To see a component's props object, you use the expression this.props

{this.props.name}

Injects whatever the prop is defined as in the tag. Example: <h1>Hi there, {this.props.name}!</h1> + <Greeting name="name"/> => Hi there, name!

this.state.name-of-property

Reads the state of a component much like this.prop.name.

npm install --save

Tells npm to save it to the package.json file

var ReactDOM = require('react-dom');

The second line of a component which imports React methods for interacting with the DOM.

5 Lifecycle Methods

There are five updating lifecycle methods: -componentWillReceiveProps -shouldComponentUpdate -componentWillUpdate -render -componentDidUpdate Whenever a component instance updates, it automatically calls all five of these methods, in order.

Component Class

To make a component class, you use one of the methods in the React library: React.createClass. Component class variable names must begin with capital letters. JSX elements can be either HTML-like, or component instances. JSX uses capitalization to distinguish between the two. Example: var MyComponentClass = React.createClass({ render: function () { return <h1>Hello world</h1>; } });

ReactDOM

a JavaScript library. This library contains several React-specific methods, all of which deal with the DOM in some way or another.

ref

allows react to access an html with a particular reference Example: <div ref="map"> can be accessed anywhere with this.refs.map

componentWillReceiveProps

componentWillReceiveProps automatically gets passed one argument: an object called nextProps. nextProps is a preview of the upcoming props object that the component is about to receive. Example: componentWillReceiveProps: function (nextProps) { alert("Check out the new props.text that " + "I'm about to get: " + nextProps.text); },

babel-core

npm install --save-dev babel-core or -S -D or npm i -D babel-{core,loader} babel-preset-react This is because you will only be using Babel in development mode. When a React app is shipped into production, it no longer needs to make transformations: the transformations will be hard-coded in place.

Event Handler Syntax

on<Element><Event)() {};

propType

propTypes: { message: React.PropTypes.string }, To write propTypes for a stateless functional component, you define a propTypes object, as a property of the stateless functional component itself.

Component Biolerplate

var React = require('react'); var ReactDOM = require('react-dom'); var = React.createClass({ render: function () { return ( ); } }); ReactDOM.render(< />, document.getElementById('app'));

React.createElement()

var h1 = <h1>Hello world</h1>; var h1 = React.createElement( "h1", null, "Hello, world" );

Stateful vs. Stateless

"Stateful" describes any component that has a getInitialState function; "stateless" describes any component that does not. In our pattern, a stateful component passes its state down to a stateless component.

import React from 'react';

== var React = require('react');

Using State vs. Props

A React component should use props to store information that can be changed, but can only be changed by a different component. A React component should use state to store information that the component itself can change.

Stateless Functional Component

A component class written as a function. Used when a component only has a render function. Example var CompnentClass = react.CreateClass({ render function () { return <stuff>; } }); => function ComponentClass () { return <stuff>; }

Keys

A key is a JSX attribute. The attribute's name is key. The attribute's value should be something unique, similar to an id attribute. keys don't do anything that you can see! React uses them internally to keep track of lists.

Constructor Function

All js classes have a this function which is the first and only function called automatically whenever a new instance is created. For initializing state: constructor(props) { super(props); this.state = { term: '' }; }

this.setState

Allows a component to *change* it's own state. this.setState takes two arguments: an object that will update the component's state, and a callback. You basically never need the callback. Major Key: Any time that you call this.setState, this.setState AUTOMATICALLY calls render as soon as the state has changed.

Event Handler

An event handler is a function that gets called in response to an event. In React, you define event handlers as property values on the instructions object. Example: React.createClass({ myFunc: function () { alert('Stop it. Stop hovering.'); }, render: function () { return ( <div onHover={this.myFunc}> </div>; ); } });

Controlled vs. Uncontrolled Component

An uncontrolled component is a component that maintains its own internal state. A controlled component is a component that does not maintain any internal state. Since a controlled component has no state, it must be controlled by someone else. A controlled component, on the other hand, has no memory. If you ask it for information about itself, then it will have to get that information through props. Most React components are controlled.

One Component Per File

Do it

Curly Braces {}

Everything inside of the curly braces will be treated as regular JavaScript.

getInitialState

Function that *sets initial* the state in a component. Inside the instrunction Example: getInitialState: function () { return { mood: 'decent' }; },

componentDidUpdate

Gets called after any rendered HTML has finished loading. It is usually used for interacting with things outside of the React environment, like the browser or APIs. It's similar to componentWillUpdate in that way, except that it gets called after render instead of before.

componentWillUnmount

Gets called right before a component is removed from the DOM. If a component initiates any methods that require cleanup, then componentWillUnmount is where you should put that cleanup.

Parentheses

If a JSX expression takes up more than one line, then you should wrap the multi-line JSX expression in parentheses.

require

If you want to use a variable that's declared in a different file, such as NavBar, then you have to import the file that you want. To import a file, you can use require and pass in a filepath. None of this behavior is specific to React. Module systems of independent, importable files are a very popular way to organize code. React's specific module system comes from Node.js. Example: var NavBar = require('./NavBar.js');

componentDidMount

If your React app uses AJAX to fetch initial data from an API, then componentDidMount is the place to make that AJAX call. More generally, componentDidMount is a good place to connect a React app to external applications, such as web APIs or JavaScript frameworks. Also the place to set timers using setTimeout or setInterval.

className

In JSX, you can't use the word class! You have to use className instead when using it as an attribute. This is because JSX gets translated into JavaScript, and class is a reserved word in JavaScript. This is used for styling.

Self Closing Tag

In JSX, you have to include the slash before the closing >.

Virtual DOM

In React, for every DOM object, there is a corresponding "virtual DOM object." A virtual DOM object is a representation of a DOM object, like a lightweight copy. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.

JSX

JS Syntax Extension. JSXA syntax extension for JavaScript. Basically HTML that goes into a js file to be compiled into real HTML. A JSX expression must have exactly one outermost element. Every JSX element is secretly a call to React.createElement(). Example: var h1 = <h1>Hello, World!</h1>

Lifecycle methods

Methods that get called at certain moments in a component's life. There are three categories of lifecycle methods: mounting, updating, and unmounting.

ReactDOM.render

Most common way to render JSX. It takes a JSX expression, creates a corresponding tree of DOM nodes, and adds that tree to the DOM. -first argument should be a JSX expression, and it will be rendered to the screen. -The first argument is appended to whatever element is selected by the second argument. -only updates DOM elements that have changed.(What makes it so fast) -place custom tag with <varName /> Example: ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

React Pattern II

Separate container components from presentational components. Here's the basic idea behind it: if a component has to have state, make calculations based on props, or manage any other complex logic, then that component shouldn't also have to render HTML-like JSX. Following this pattern separates your business logic from your presentational logic. Business = container logic Presentational component will always get rendered by a container component. In this programming pattern, the container component does the work of figuring out what to display. The presentational component does the work of actually displaying it.

getDefaultProps

Set a default prop by setting up a getDefaultProps function in the instructions component. getDefaultProps: function () { return {text: "yo"} },

shouldComponentUpdate

The best way to use shouldComponentUpdate is to have it return false only under certain conditions. If those conditions are met, then your component will not update. It receives two arguments: nextProps and nextState. It's typical to compare nextProps and nextState to the current this.props and this.state, and use the results to decide what to do.

var React = require('react');

The first line of a component which imports the React library. Recall that when a JSX element is compiled, it transforms into a React.createElement() call. For this reason, you have to require the React library and save it in a variable named React, before you can use any JSX at all.

Configure Webpack

The first thing that webpack needs to know is an entry point. The entry point is the file that Webpack will transform. Entry: entry: __dirname + '/app/index.js', Module Loaders - Each "loader" that you add to the loaders array will represent a transformation that your code will go through before reaching the browser. Exclude: /node_modules/ so they do not get transformed Loader: defines the transformation = 'babel-loader' Output object should have two properties: filename and path. filename will be the name of the new, transformed JavaScript file. path will be the filepath to where that transformed JavaScript file ends up: This will save your transformed JavaScript into a new file named build/transformed.js.

componentWillUpdate

The main purpose of componentWillUpdate is to interact with things outside of the React architecture. If you need to do non-React setup before a component renders, such as checking the window size or interacting with an API, then componentWillUpdate is a good place to do that.

Mounting Methods

There are three mounting lifecycle methods: -componentWillMount -render -componentDidMount When a component mounts, it automatically calls these three methods, in order. Mounting lifecycle events only execute the first time that a component renders

module.exports

When an expression is set to a module.exports it will be the only thing imported when the file is required elsewhere. Example: var faveManifestos = { futurist: 'http://bit.ly/1lKuB2I', SCUM: 'http://bit.ly/1xWjvYc', cyborg: 'http://bit.ly/16sbeoI' }; module.exports = faveManifestos; ES6: export default faveManifestos;

How Virtual DOM Works

When you render a JSX element, every single virtual DOM object gets updated. This sounds incredibly inefficient, but the cost is insignificant because the virtual DOM can update so quickly. Once the virtual DOM has updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update. By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called "diffing." Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM.

Babel

a JavaScript compiler that includes the ability to compile JSX into regular JavaScript.