ReactJS

A JSX element event listener attribute's name should be like

'onClick' or 'onMouseOver' or similar 'on' event

Components can be written like <MyComponentClass /> or like...

<MyComponentClass></MyComponentClass>

JSX element

A basic unit of JSX found in a JavaScript file which is treated as, and has the functionality of, a JavaScript expression. It can also have attributes, just like HTML elements.

Names like onClick only create event listeners if they're used on

HTML-like JSX elements.

props

Information that gets passed from one component to another

JSX uses capitalization to distinguish between

JSX elements that are HTML-like and component instances.

How do you set default props on a component

MyComponent.defaultProps = { };

The compiler transforms every JSX element into this method

React.createElement()

This is a JSX callback function

ReactDOM.render(greeting, onClick={someCallbackFunc});

style={{ color: 'red' }} - What are the outer curly braces for?

They inject JavaScript into JSX. Everything between these braces should be read as JavaScript, not JSX.

ReactJS

This is a JavaScript (user-interface framework) library developed by engineers at Facebook.

ReactDOM

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

A component "mounts" when...

a component renders for the first time.

There is only one property that you have to include in your instructions:

a render method; e.g. render( )

A render method must contain

a return statement.

The body of your component class

acts as a set of instructions, explaining to your component class how it should build a React component.

A render method is a property whose name is render,

and whose value is a function.

Component class variable names must begin with

capital letters which adheres to a broader programming convention in which class names are written in UpperCamelCase.

React applications are made out of

components

dependencies (within package.json)

contains all the required node modules and versions required for the application.

These are markers that signal the beginning and end of a JavaScript injection into JSX.

curly braces

state

data in our application that can change

A render() function can also have simple calculations and conditional statement but they must be placed

inside the render( ) function and before the return statement

A key

is a JSX attribute that React uses to internally keep track of lists. The value should be something unique ( <li key="li-01">Example1</li> )

a 'component class'

is like a factory that creates components. You can use that class to produce as many components as you want.

React uses them internally to keep track of lists. If you don't use them, React might accidentally scramble your list-items into the wrong order.

keys

If a component has only one child, then this.props.children will return the single child,

not wrapped in an array

This command generates a boilerplate version of a React application.

npm install -g create-react-app

Bundles the app into static files for production.

npm run build

Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can't go back!

npm run eject

Within your React app, this directory contains assets that will be served directly without additional processing by webpack.

public

This file takes care of caching and updating files for the end-user. It allows for offline capability and faster page loads after the initial visit.

registerServiceWorker.js

A self-closing tag in JSX

requires a forward-slash / ( e.g. <br /> )

To see a component's props object, you use the expression...

this.props

To read a component's state, use the expression

this.state.name-of-property

Passing information: pass props from a stateful parent component

to a stateless child component

Rendering is the only way for a component

to pass props to another component.

JSX written between {curly braces}

will render like a regular JavaScript expression not like JSX.

&&

works best in conditionals that will sometimes do an action, but other times do nothing at all based on the condition

To pass info to a component, the values that aren't strings are...

wrapped in curly braces

If a JSX expression takes up more than one line

you must wrap the multi-line expression in parentheses.

What are the four phases of a component's lifecycle?

Instantiated, Mounted, Unmounted, Destroyed

style={{ color: 'red' }} - What are the inner curly braces for?

These curly braces create inject a JavaScript object literal into JSX. They make this a valid JavaScript object.

JSX

This is an HTML-like syntax extension for JavaScript written to be used with React. This is specifically how React adds XML syntax to JavaScript which is compiled to JavaScript at runtime.

ReactDOM.render()'s first argument should be

a JSX expression to be rendered to the screen

this.props refers to that storage object. At the same time, each piece of passed-in information is called...

a prop

If a component class expects a prop, then you can give that component class ...

a propType

the virtual DOM

a representation of a DOM object (i.e. a lightweight copy). It has the same properties as a real DOM object, but it lacks the real DOM's power to directly change what's on the screen.

this.state should be equal to

an object representing the initial "state" of any component instance (e.g. this.state = { mood: 'decent' };)

If a component has more than one child between its JSX tags, then this.props.children will return those children in an...

array

How do you define an event handler in React?

as a method on the component class

A React component should use props to store information that can be changed,

but can only be changed by a different component.

How do you pass a prop?

by giving an attribute to a component instance

In JSX, event listener names are written in

camelCase

A React component should use 'props' to store information that can be

changed, but can only be changed by a different component.

Every component's props object has a property named

children

diffing

comparing the new virtual DOM with a pre-update version to figure out which virtual DOM objects have changed.

A JSX expression must have

exactly one outermost element.

Any time that you call this.setState(), this.setState() AUTOMATICALLY calls

.render() as soon as the state has changed.

React components always have to call ________ for constructors to be set up properly.

super(props);

Mounting lifecycle events only execute...

the first time that a component renders.

you can't call this.setState() from inside of

the render function

Passing information: create a method that allows the stateless child component to update

the state of the parent component

A component changes its state by calling the function

this.setState( { someKey: newValue} );

Why can't you call this.setState() from inside of the .render() method?

this.setState() automatically calls .render(). If .render() calls this.setState(), then an infinite loop is created.

render( ) belongs to two lifecycle categories: mounting and...

updating lifecycle methods

If a React component wants to change information stored within itself, it should...

use state.

How do you accessing a passed-in prop?

via this.props.prop-name

Passing information: create a child component that updates its parent's state,

which then updates a sibling component.

React uses a tool called 'webpack'

which transforms the directories and files into static assets. Visitors to your site are served those static assets.

To create your own component class,

you must subclass React.Component (e.g. class BunnyClass extends React.Component)

whenever you define an event handler that uses 'this'

you need to add this.methodName = this.methodName.bind(this) to your constructor function.

A component is a

small, reusable chunk of code that is responsible for one job. That job is often to render some HTML.

'class' is a reserved word in JavaScript

so use 'className' in JSX

scripts (within package.json)

specifies aliases that you can use to access some of the react-scripts commands in a more efficient manner (e.g. npm test)

Besides props and state, every value used in a component should...

always stay exactly the same.

If your React app uses AJAX to fetch initial data from an API, which lifecycle method is best to use?

componentDidMount

You cannot call this.setState from the body of this update lifecycle method.

componentWillUpdate

The methods imported from 'react'

don't deal with the DOM at all but are only for pure React purposes, such as creating components or writing JSX elements.

You can access variables while inside of a JSX expression,

even if those variables were declared on the outside of the JSX expression

import React

from 'react'

import ReactDOM

from 'react-dom'

To make a component have state,

give the component a 'state' property declared inside of a constructor method.

Methods should never be comma-separated,

if inside of a class body. This emphasizes the fact that classes and object literals are different.

This directory contains the JavaScript that will be processed by webpack and is the heart of the React app.

src

A React component should use 'state' to

store information that the component itself can change.

This file within the "public" directory provides the entry point for the web app.

index.html

ReactDOM.render()'s second argument

indicates the element the first argument will be appended to and where on the screen it will appear.

Dynamic information

information that can change

In React, you define event handlers as methods on a component class placing them

inside the component class but before the render( ) function.

"private": true (within package.json)

is a failsafe setting to avoid accidentally publishing your app as a public package within the npm ecosystem.

onClick used here: <Button onClick={this.handleClick} />

is an attritbute name (a.k.a. prop name)

This file with the "public" dir configures how your web app will behave if it is added to an Android user's home screen

manifest.json

Starts the development server

npm start

Starts the test runner.

npm test

A component's props is an...

object

React.Component is a property

on the object which was returned by import React from 'react'

JSX elements can be either HTML-like,

or component instances.

There are two ways for a component to get dynamic information:

props and state