<commit_before>import React from 'react';
import createTheme from 'spectacle/lib/themes/default';
import {Appear, Deck, Fill, Fit, Heading, Image, Layout, Link, List, ListItem, Slide, Text} from 'spectacle';
import preloader from 'spectacle/lib/utils/preloader';
import Terminal from 'spectacle-terminal';
import CodeSlide from 'spectacle-code-slide';
import 'normalize.css';
import 'spectacle/lib/themes/default/index.css';
import Typist from 'react-typist';

const theme = createTheme({
  primary: '#333',
  secondary: '#fff',
  tertiary: '#61dafb'
});

const images = {
  enzyme: require('../../assets/react-in-isolation/enzyme.png'),
  unidirectional: require('../../assets/react-in-isolation/unidirectional-data-flow.png'),
  userAction: require('../../assets/react-in-isolation/flux-client-action.png')
};
preloader(images);

const cursor = {show: false, blink: true, element: '|', hideWhenDone: false, hideWhenDoneDelay: 1000};

export default function Presentation() {
  return (
    <Deck transition={['zoom', 'slide']} transitionDuration={500} theme={theme}>
      <Slide
        transition={['zoom']}
        bgDarken={0.75}
        bgImage={require('../../assets/react-in-isolation/react-logo.svg')}
      >
        <Heading size={1} fit caps>Learn React</Heading>
        <Heading size={2} fit caps>in Isolation</Heading>

        <Text textColor="#888" textSize="1em" margin="40px 0px 0px" bold><NAME></Text>
      </Slide>

      <Slide transition={['zoom']}>
        <Heading size={1} fit>Not an intro to React</Heading>
        <Heading size={2} fit>Instead, how to learn React</Heading>
      </Slide>

      <Slide>
        <Heading size={2} fit>React, by itself, can be simple</Heading>
      </Slide>

      <Slide>
        <Heading size={2} fit>
          That simplicity is clouded in an application
        </Heading>
      </Slide>

      <Slide>
        <Heading size={2} fit>Build Tools</Heading>

        <List>
          <ListItem>Transpilation (Babel)</ListItem>
          <ListItem>
            Bundling for the browser (Webpack)
            <List>
              <ListItem>Dev Server</ListItem>
              <ListItem>Hot Reload</ListItem>
            </List>
          </ListItem>
        </List>
      </Slide>

      <Slide>
        <Heading size={2} fit>Application Wiring</Heading>

        <List>
          <ListItem>Loading data into the browser (Redial, etc)</ListItem>
          <ListItem>State management (Redux, MobX, etc)</ListItem>
          <ListItem>Routing (React Router)</ListItem>
          <ListItem>Server-side Render?</ListItem>
        </List>
      </Slide>

      <Slide transition={['zoom']}>
        <Heading size={1} fit>How can we isolate React</Heading>
        <Heading size={2} fit>to learn it without the distractions?</Heading>
      </Slide><commit_msg>fix(flow): adjusted the flow of the beginning a bit<commit_after>import React from 'react';
import createTheme from 'spectacle/lib/themes/default';
import {Appear, Deck, Fill, Fit, Heading, Image, Layout, Link, List, ListItem, Slide, Text} from 'spectacle';
import preloader from 'spectacle/lib/utils/preloader';
import Terminal from 'spectacle-terminal';
import CodeSlide from 'spectacle-code-slide';
import 'normalize.css';
import 'spectacle/lib/themes/default/index.css';
import Typist from 'react-typist';

const theme = createTheme({
  primary: '#333',
  secondary: '#fff',
  tertiary: '#61dafb'
});

const images = {
  enzyme: require('../../assets/react-in-isolation/enzyme.png'),
  unidirectional: require('../../assets/react-in-isolation/unidirectional-data-flow.png'),
  userAction: require('../../assets/react-in-isolation/flux-client-action.png')
};
preloader(images);

const cursor = {show: false, blink: true, element: '|', hideWhenDone: false, hideWhenDoneDelay: 1000};

export default function Presentation() {
  return (
    <Deck transition={['zoom', 'slide']} transitionDuration={500} theme={theme}>
      <Slide
        transition={['zoom']}
        bgDarken={0.75}
        bgImage={require('../../assets/react-in-isolation/react-logo.svg')}
      >
        <Heading size={1} fit caps>Learn React</Heading>
        <Heading size={2} fit caps>in Isolation</Heading>

        <Text textColor="#888" textSize="1em" margin="40px 0px 0px" bold><NAME></Text>
      </Slide>

      <Slide transition={['zoom']}>
        <Heading size={1} fit>Less of an intro to React</Heading>
        <Heading size={2} fit>Instead, how to learn React</Heading>
      </Slide>

      <Slide>
        <Heading size={2} fit>React, by itself, can be simple</Heading>
      </Slide>

      <Slide>
        <Heading size={2} fit>
          That simplicity is clouded in an application
        </Heading>
      </Slide>

      <Slide notes="Transpilation, Bundling for the Browser, Auto rebuild when developing, Hot-reload">
        <Heading size={2} fit>Build Tools</Heading>
      </Slide>

      <Slide notes="Loading data to the browser, State management, Routing, SSR">
        <Heading size={2} fit>Application Wiring</Heading>
      </Slide>

      <Slide transition={['zoom']}>
        <Heading size={1} fit>How can we isolate React</Heading>
        <Heading size={2} fit>to learn it without the distractions?</Heading>
      </Slide>
{'fraction_non_alphanumeric': 0.15267466209784886, 'fraction_numerical': 0.012564249000571102, 'mean_word_length': 3.111111111111111, 'pattern_counts': {'":': 0, '<': 101, '<?xml version=': 0, '>': 101, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '916919', 'n_tokens_mistral': 1705, 'n_tokens_neox': 1630, 'n_words': 411}