Michael Kang michaelkang84

## gist:a8df8a27662eda4d9205929ba60753ba
class Nav extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
        <nav class="main_nav"><span class="fa fa-times header-burger-btn"
          style="color: black; font-size: 30px; border: none!important; height: 30px; width: 30px; position: absolute; top: 30px; right: 30px"></span>
          <div class="menu-main-menu-container">

## <View> vs <Text> - A Summary
<View> vs <Text> - A Summary
<Text> and <View> are probably THE most important/ most-used components built into React Native.

---

<View> is your #1 component if you need to group and structure content (= provide a layout) and/ or if you want to style something as a container (e.g. the <Card> look we built in our custom <Card> component).

<View> uses Flexbox to organize its children - have a look at the Flexbox deep dive earlier in this course (in module 2) to learn more about how that works.

A <View> can hold as many child components as you need and it also works with any kind of child component - it can hold <Text> components, other <View>s (for nested containers/ layouts), <Image>s, custom components etc.

## JSX Virtual-Real DOM steps
A JSX element renders
The entire virtual DOM updates
The virtual DOM "diffs," comparing its current self with its previous self
Part of the real DOM updates
The screen looks different than it used to

## .map in JSX
If you want to create a list of JSX elements, then .map() is often your best bet.

const strings = [ 'Home', 'Shop', 'About Me' ];

const listItems = strings.map(string => <li>{string}</li>)

ReactDOM.render(
  <ul>{listItems}}</ul>,
  document.getElementById('app');
);

## gist:782763257280c5a68ce7e9f933b65ba2
import React from 'react';
import ReactDOM from 'react-dom';

// judgmental will be true half the time.
const judgmental = Math.random() < 0.5;

const favoriteFoods = {
  <div>
    <h1>My Favorite Foods</h1>
    <ul>

## Javascript map() Basics
const arr = ['1', '2', '3'];
// callback function takes 3 parameters
// the current value of an array as the first parameter
// the position of the current value in an array as the second parameter
// the original source array as the third parameter
const cb = (str, i, origin) => {
  console.log(`${i}: ${Number(str)} / ${origin}`);
};
arr.map(cb);
// 0: 1 / 1,2,3

## RN-FlatList.txt
import React from 'react';
import { View, Text, Stylesheet, FlatList } from 'react-native';

const ListScreen = () => {
  const friends = [
    { name: 'Friend #1' },
    { name: 'Friend #2' },
    { name: 'Friend #3' },
    { name: 'Friend #4' }
  ];

## gist:81a7abc8be2b563f68cfc6e1193bcaeb
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 * @format
 */

## Active Button
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;

## React Getting Started
function Button(props) {
  const handleClick = () => props.onClickFunction(props.increment)
  return (
    <button onClick={handleClick}>
      +{props.increment}
    </button>
  );
}

function Display(props) {
	class Nav extends HTMLElement {
	constructor() {
	super();
	}

	connectedCallback() {
	this.innerHTML = `
	<nav class="main_nav"><span class="fa fa-times header-burger-btn"
	style="color: black; font-size: 30px; border: none!important; height: 30px; width: 30px; position: absolute; top: 30px; right: 30px"></span>
	<div class="menu-main-menu-container">
	<View> vs <Text> - A Summary
	<Text> and <View> are probably THE most important/ most-used components built into React Native.

	---

	<View> is your #1 component if you need to group and structure content (= provide a layout) and/ or if you want to style something as a container (e.g. the <Card> look we built in our custom <Card> component).

	<View> uses Flexbox to organize its children - have a look at the Flexbox deep dive earlier in this course (in module 2) to learn more about how that works.

	A <View> can hold as many child components as you need and it also works with any kind of child component - it can hold <Text> components, other <View>s (for nested containers/ layouts), <Image>s, custom components etc.
	A JSX element renders
	The entire virtual DOM updates
	The virtual DOM "diffs," comparing its current self with its previous self
	Part of the real DOM updates
	The screen looks different than it used to
	If you want to create a list of JSX elements, then .map() is often your best bet.

	const strings = [ 'Home', 'Shop', 'About Me' ];

	const listItems = strings.map(string => <li>{string}</li>)

	ReactDOM.render(
	<ul>{listItems}}</ul>,
	document.getElementById('app');
	);
	import React from 'react';
	import ReactDOM from 'react-dom';

	// judgmental will be true half the time.
	const judgmental = Math.random() < 0.5;

	const favoriteFoods = {
	<div>
	<h1>My Favorite Foods</h1>
	<ul>
	const arr = ['1', '2', '3'];
	// callback function takes 3 parameters
	// the current value of an array as the first parameter
	// the position of the current value in an array as the second parameter
	// the original source array as the third parameter
	const cb = (str, i, origin) => {
	console.log(`${i}: ${Number(str)} / ${origin}`);
	};
	arr.map(cb);
	// 0: 1 / 1,2,3
	import React from 'react';
	import { View, Text, Stylesheet, FlatList } from 'react-native';

	const ListScreen = () => {
	const friends = [
	{ name: 'Friend #1' },
	{ name: 'Friend #2' },
	{ name: 'Friend #3' },
	{ name: 'Friend #4' }
	];
	/**
	* Copyright (c) Facebook, Inc. and its affiliates.
	*
	* This source code is licensed under the MIT license found in the
	* LICENSE file in the root directory of this source tree.
	*
	* @flow
	* @format
	*/
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	/* Style the buttons */
	.btn {
	border: none;
	outline: none;
	padding: 10px 16px;
	function Button(props) {
	const handleClick = () => props.onClickFunction(props.increment)
	return (
	<button onClick={handleClick}>
	+{props.increment}
	</button>
	);
	}

	function Display(props) {