Skip to content

Instantly share code, notes, and snippets.

@qfarenwald

qfarenwald/react-app-setup.md

Last active May 19, 2020 21:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save qfarenwald/ac30fb1ee18f749d6cdac7681ca7854c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save qfarenwald/ac30fb1ee18f749d6cdac7681ca7854c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. qfarenwald revised this gist Nov 17, 2019. No changes.
  2. qfarenwald revised this gist Nov 17, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    # React Notes
    # Mod 3 Notes

    # Change remote
    https://help.github.com/en/articles/changing-a-remotes-url
  3. qfarenwald revised this gist Nov 9, 2019. 1 changed file with 1 addition and 32 deletions.
    33 changes: 1 addition & 32 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,35 +1,4 @@
    # Exam Notes

    *Mid-Mod Notes*

    Time: 3 hrs
    - Spec like IdeaBox
    - Build out an app from a boilerplate / work through iterations
    - Dependencies installed
    - 2 repos (1 FE and 1 BE)
    - Bring in data from an API
    - Display data, build out a form
    - Don’t worry about nested fetch requests
    - Don’t worry about React Router

    Review:
    - Fetch (GET, POST, DELETE)

    Testing:
    - Snapshot
    - Changes in state
    - Testing methods
    - Event simulation tests
    - Extension: Async testing

    You can use your notes and lessons, and google! You can’t look at previous code!

    Git workflow
    git clone their link
    cd into it
    do what read me says
    sync/push up to new repo
    make a branch
    # React Notes

    # Change remote
    https://help.github.com/en/articles/changing-a-remotes-url
  4. qfarenwald revised this gist Nov 6, 2019. 1 changed file with 12 additions and 0 deletions.
    12 changes: 12 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -558,6 +558,18 @@ npm test -- --coverage --watchAll=false
    }
    ```

    # Async / Await
    ```
    export const fetchData = async (url) => {
    const response = await fetch()
    if (response.ok) {
    const data = await response.json()
    } else {
    throw Error(response.statusText)
    }
    }
    ```

    # propTypes
    ```
    import PropTypes from 'prop-types';
  5. qfarenwald revised this gist Nov 6, 2019. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -671,7 +671,7 @@ In Component
    <Link to={`/shuttle/${name}`}><button className="Trail-btn" id={name}>BOOK</button></Link>
    ```

    **How To Disable Button/check for values in inputs"
    **How To Disable Button/check for values in inputs**
    ```
    this.state = {
    disabled: true
    @@ -690,6 +690,10 @@ this.state = {
    ```
    <button disabled={this.state.disabled} onClick={e => this.handleSubmit(e)}>
    ```
    error message
    ```
    <p>{ this.state.disabled ? 'PLEASE FILL OUT NAME' : null }</p>
    ```

    **How To Console Log In A Render**

  6. qfarenwald revised this gist Nov 6, 2019. 1 changed file with 20 additions and 0 deletions.
    20 changes: 20 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -671,6 +671,26 @@ In Component
    <Link to={`/shuttle/${name}`}><button className="Trail-btn" id={name}>BOOK</button></Link>
    ```

    **How To Disable Button/check for values in inputs"
    ```
    this.state = {
    disabled: true
    };
    ```
    ```
    formReady = () => {
    this.setState({ disabled: true })
    if (this.state.name !== '' && this.state.ingredients !== []) {
    this.setState({ disabled: false })
    } else {
    this.setState({ disabled: true })
    }
    }
    ```
    ```
    <button disabled={this.state.disabled} onClick={e => this.handleSubmit(e)}>
    ```

    **How To Console Log In A Render**

    ```
  7. qfarenwald revised this gist Nov 6, 2019. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -733,6 +733,11 @@ If you make new changes to your `master` branch, GitHub Pages doesn't automatica
    1. Run `npm run build` in the command line
    1. Run `npm run deploy` in the command line

    #Postman

    ```
    body, raw, json
    ```

    # Original Sources

  8. qfarenwald revised this gist Nov 6, 2019. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -36,6 +36,21 @@ https://help.github.com/en/articles/changing-a-remotes-url

    https://github.com/turingschool-examples/webpack-starter-kit

    ```
    $ git remote -v
    > origin [email protected]:USERNAME/REPOSITORY.git (fetch)
    > origin [email protected]:USERNAME/REPOSITORY.git (push)
    $ git remote set-url origin https://github.com/USERNAME/REPOSITORY.git
    Verify that the remote URL has changed.
    $ git remote -v
    > origin https://github.com/USERNAME/REPOSITORY.git (fetch)
    > origin https://github.com/USERNAME/REPOSITORY.git (push)
    git push -u origin master
    ```

    # Creating a React App

    1. In the terminal run `npx create-react-app NAMEOFYOURAPP`
  9. qfarenwald revised this gist Nov 6, 2019. 1 changed file with 13 additions and 0 deletions.
    13 changes: 13 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -295,6 +295,19 @@ functionName = (parameter) => {
    };
    ```

    **apiCalls**
    ```
    export const funcName = async(url) => {
    const response = await fetch(url)
    if(response.ok) {
    const data = await response.json()
    return data;
    } else {
    throw Error(response.statusText)
    }
    }
    ```

    # Boilerplates - Tests

    **Snapshot Test**
  10. qfarenwald revised this gist Nov 5, 2019. 1 changed file with 56 additions and 0 deletions.
    56 changes: 56 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -392,6 +392,62 @@ it('should run funcName on click', () => {
    });
    ```

    **apiCall Tests**
    ```
    import { fetchData } from './apiCalls';
    describe('fetchData', () => {
    const mockResponse = {
    results: [{
    key: 46286
    },
    {
    key: 601365
    }],
    };
    const mockUrl = 'https://www.address.com/...';
    beforeEach(() => {
    window.fetch = jest.fn().mockImplementation(() => Promise.resolve({
    ok: true,
    json: () => Promise.resolve(mockResponse),
    }));
    });
    it('should fetch with the correct url', () => {
    fetchData(mockUrl);
    expect(window.fetch).toHaveBeenCalledWith(mockUrl);
    });
    it('should return an array of ?? (HAPPY)', () => {
    fetchData(mockUrl)
    .then((results) => expect(results).toEqual(mockResponse));
    });
    it('should return an error (SAD)', () => {
    window.fetch = jest.fn().mockImplementation(() => Promise.resolve({
    ok: false
    }));
    const mockUrl = 'https://www.address.com/...YOLO';
    expect(fetchData(mockUrl)).rejects.toEqual(Error());
    });
    it('should return an error if the server is down', () => {
    window.fetch = jest.fn().mockImplementation(() => ({
    status: 500
    }))
    expect(fetchData()).rejects.toEqual(Error());
    });
    });
    ```

    **Mock A Function**
    ```
    const mockFunction = jest.fn();
  11. qfarenwald revised this gist Nov 5, 2019. 1 changed file with 70 additions and 2 deletions.
    72 changes: 70 additions & 2 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -108,9 +108,77 @@ const router = (
    ReactDOM.render(router, document.getElementById('root'));
    ```

    App.js
    In neccessary files:
    ```
    import { Route, NavLink } from 'react-router-dom'
    import { Route, Link } from 'react-router-dom'
    <Route path="/" render={() => <Component />} />
    <Route exact path="/" render={() => <Component prop={this.prop} />} />
    <Link to="/" className="link"><h5>BACK</h5></Link>
    ```

    **Setup Redirect**

    Used when a change needs to happen based on state

    Import: Redirect

    Need: setRedirect and renderRedirect functions

    ```
    import { Redirect } from 'react-router-dom';
    export class ComponentName extends Component {
    constructor() {
    super();
    this.state = {
    redirect: false
    };
    }
    handleSubmit = (e) => {
    const { actionName } = this.props;
    e.preventDefault();
    actionName(this.state);
    this.setRedirect();
    }
    setRedirect = () => {
    this.setState({
    redirect: true,
    });
    }
    renderRedirect = () => {
    if (this.state.redirect) {
    return <Redirect to="/confirmation" />;
    }
    }
    render() {
    return (
    <form className="ComponentName">
    <input
    className="class-name"
    name="name"
    type="text"
    placeholder="Enter Name"
    value={this.state.name}
    onChange={this.handleChange}
    />
    {this.renderRedirect()}
    <button disabled={!this.state.formReady} type="button" className="class-name" onClick={this.handleSubmit}>SUBMIT BOOKING</button>
    <Link to="/" className="link"><h5>BACK</h5></Link>
    </form>
    );
    }
    }
    }
    ```


  12. qfarenwald revised this gist Nov 5, 2019. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -114,7 +114,7 @@ import { Route, NavLink } from 'react-router-dom'
    ```


    # Boilerplates
    # Boilerplates - Components

    **Class Component**
    ```
    @@ -227,6 +227,8 @@ functionName = (parameter) => {
    };
    ```

    # Boilerplates - Tests

    **Snapshot Test**
    ```
    import React from 'react';
  13. qfarenwald revised this gist Nov 5, 2019. No changes.
  14. qfarenwald revised this gist Nov 5, 2019. 1 changed file with 27 additions and 0 deletions.
    27 changes: 27 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -87,6 +87,33 @@ Note that the frontend should be running on `localhost:3000` and the backend sho

    Clone down the backend repo - but NOT inside your existing frontend repository!


    # Set Up React Router
    https://frontend.turing.io/lessons/module-3/react-router-v4.html

    ```
    npm i react-router-dom -S
    ```

    index.js
    ```
    import { BrowserRouter } from 'react-router-dom'
    const router = (
    <BrowserRouter>
    <App />
    </BrowserRouter>
    )
    ReactDOM.render(router, document.getElementById('root'));
    ```

    App.js
    ```
    import { Route, NavLink } from 'react-router-dom'
    ```


    # Boilerplates

    **Class Component**
  15. qfarenwald revised this gist Nov 5, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -137,7 +137,7 @@ const Funcname = () => {
    export default Funcname;
    ```

    # Form
    **Form**
    Functions needed
    ```
    handleChange = event => {
    @@ -163,7 +163,7 @@ handleChange = event => {
    }
    ```

    # Input Structure
    **Input Structure**
    ```
    <input
    name=''
  16. qfarenwald revised this gist Nov 5, 2019. 1 changed file with 86 additions and 80 deletions.
    166 changes: 86 additions & 80 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -73,6 +73,20 @@ import { shallow } from 'enzyme';
    import ClassName from './ClassName';
    ```

    # Backend Setup

    ```
    git clone [https://github.com/ REPO NAME THEY GIVE US]
    cd [CD INTO REPO]
    npm install nodemon -g
    npm i
    npm start
    ```

    Note that the frontend should be running on `localhost:3000` and the backend should be running on `localhost:3001`.

    Clone down the backend repo - but NOT inside your existing frontend repository!

    # Boilerplates

    **Class Component**
    @@ -123,6 +137,43 @@ const Funcname = () => {
    export default Funcname;
    ```

    # Form
    Functions needed
    ```
    handleChange = event => {
    this.setState({
    [event.target.name]: event.target.value
    })
    }
    submitNewData = event => {
    event.preventDefault()
    const newData = {
    match key/value pairs of required data
    }
    this.props.funcFromApp(newData)
    this.clearInputs()
    }
    clearInputs = () => {
    this.setState({
    key1: '',
    key2: ''
    })
    }
    ```

    # Input Structure
    ```
    <input
    name=''
    placeholder=''
    value={this.state.key}
    onChange={() => {}}
    />
    ```


    **setState**
    ```
    .then(ideas => this.setState({
    @@ -326,63 +377,17 @@ npm test -- --coverage --watchAll=false
    }
    ```

    # Form
    Functions needed
    ```
    handleChange = event => {
    this.setState({
    [event.target.name]: event.target.value
    })
    }
    submitNewData = event => {
    event.preventDefault()
    const newData = {
    match key/value pairs of required data
    }
    this.props.funcFromApp(newData)
    this.clearInputs()
    }
    clearInputs = () => {
    this.setState({
    key1: '',
    key2: ''
    })
    }
    # propTypes
    ```
    import PropTypes from 'prop-types';
    # Input Structure
    ```
    <input
    name=''
    placeholder=''
    value={this.state.key}
    onChange={() => {}}
    />
    ```
    # propTypes
    ```
    Card.propTypes = {
    Component.propTypes = {
    title: PropTypes.string.isRequired
    }
    ```
    https://reactjs.org/docs/typechecking-with-proptypes.html#react.proptypes

    # Backend Setup

    ```
    git clone [https://github.com/ REPO NAME THEY GIVE US]
    cd [CD INTO REPO]
    npm install nodemon -g
    npm i
    npm start
    ```

    Note that the frontend should be running on `localhost:3000` and the backend should be running on `localhost:3001`.

    Clone down the backend repo - but NOT inside your existing frontend repository!

    # Spread An Array
    ```
    @@ -401,32 +406,6 @@ const Component = ({ isFavorite }) => {
    }
    ```

    # Original Sources

    **React I: The What and The Why**
    https://frontend.turing.io/lessons/module-3/react-i.html

    **React II: The How, building IdeaBox**
    https://frontend.turing.io/lessons/module-3/react-ii.html

    **React III: Workshop Ideabox With A Backend**
    https://frontend.turing.io/lessons/module-3/react-iii.html

    **Unit Testing React Components**
    https://frontend.turing.io/lessons/module-3/unit-testing-react.html

    **Get Your Site On GH Pages**
    https://github.com/turingschool-examples/webpack-starter-kit/blob/master/gh-pages-procedure.md

    **Webpack Starter Kit**
    https://github.com/turingschool-examples/webpack-starter-kit

    **Network Request GET/POST Requests**
    https://frontend.turing.io/lessons/module-3/network-request-exercises.html

    **All Lessons**
    https://frontend.turing.io/lessons/

    # Extras

    **Setting Up ESLint**
    @@ -528,13 +507,13 @@ In Component

    **Required Steps**

    1. In the `package.json` file, within the `"repository"` object, edit the `"url"` value to be `"git+https://github.com/USERNAME/REPONAME.git"` where USERNAME and REPONAME are replaced with your GitHub username and your repository name, respectively
    In the `package.json` file, within the `"repository"` object, edit the `"url"` value to be `"git+https://github.com/USERNAME/REPONAME.git"` where USERNAME and REPONAME are replaced with your GitHub username and your repository name, respectively

    **OR NOT?**
    **OR**

    1. In the `package.json` file, add the line: `"homepage": "http://USERNAME.github.io/REPONAME",` where USERNAME and REPONAME are replaced with your GitHub username and your repository name, respectively
    In the `package.json` file, add the line: `"homepage": "http://USERNAME.github.io/REPONAME",` where USERNAME and REPONAME are replaced with your GitHub username and your repository name, respectively

    **DO THIS** `"homepage": ".",`
    **OR** Just `"homepage": ".",`

    1. Add these two lines to the `scripts` section of the `package.json` file:
    ```json
    @@ -571,4 +550,31 @@ If you make new changes to your `master` branch, GitHub Pages doesn't automatica

    1. After you're done making changes, checkout your `master` branch and double-check to make sure it is up-to-date and there is nothing needed to be committed at this point
    1. Run `npm run build` in the command line
    1. Run `npm run deploy` in the command line
    1. Run `npm run deploy` in the command line


    # Original Sources

    **React I: The What and The Why**
    https://frontend.turing.io/lessons/module-3/react-i.html

    **React II: The How, building IdeaBox**
    https://frontend.turing.io/lessons/module-3/react-ii.html

    **React III: Workshop Ideabox With A Backend**
    https://frontend.turing.io/lessons/module-3/react-iii.html

    **Unit Testing React Components**
    https://frontend.turing.io/lessons/module-3/unit-testing-react.html

    **Get Your Site On GH Pages**
    https://github.com/turingschool-examples/webpack-starter-kit/blob/master/gh-pages-procedure.md

    **Webpack Starter Kit**
    https://github.com/turingschool-examples/webpack-starter-kit

    **Network Request GET/POST Requests**
    https://frontend.turing.io/lessons/module-3/network-request-exercises.html

    **All Lessons**
    https://frontend.turing.io/lessons/
  17. qfarenwald revised this gist Nov 4, 2019. 1 changed file with 17 additions and 0 deletions.
    17 changes: 17 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -500,6 +500,23 @@ package.json
    }
    ```

    **How To Pass Match**

    In App
    ```
    <Route exact path="/shuttle/:trail" render={(match) => <ShuttleForm match={match}/>} />
    ```
    In Component
    ```
    <Link to={`/shuttle/${name}`}><button className="Trail-btn" id={name}>BOOK</button></Link>
    ```

    **How To Console Log In A Render**

    ```
    {console.log(this.props.match)}
    ```

    # Getting Your Site on GitHub Pages

    **Preparation**
  18. qfarenwald revised this gist Nov 4, 2019. 1 changed file with 16 additions and 0 deletions.
    16 changes: 16 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -484,6 +484,22 @@ body {
    }
    ```

    **Dont Test Certain Things**

    package.json
    ```
    "jest": {
    "snapshotSerializers": [
    "enzyme-to-json/serializer"
    ],
    "collectCoverageFrom": [
    "src/**/{!(serviceWorker),}.js",
    "!src/index.js",
    "!src/reducers/index.js"
    ]
    }
    ```

    # Getting Your Site on GitHub Pages

    **Preparation**
  19. qfarenwald revised this gist Nov 4, 2019. 1 changed file with 22 additions and 0 deletions.
    22 changes: 22 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -435,6 +435,28 @@ https://frontend.turing.io/lessons/
    2. Add a script called `"lint": "eslint src/" in your package.json` (in the scripts object)
    3. In your terminal, run: `npm run lint`

    https://github.com/turingschool-examples/javascript/blob/master/linters/module-3/linter-setup.md
    1. In terminal, `npm i eslint-config-airbnb -D`
    2. In package.json,
    ```
    // update the scripts and eslintConfig portions of your package.json to match below
    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*.js --ignore-pattern node_modules/ --ignore-pattern src/serviceWorker.js"
    },
    "eslintConfig": {
    "extends": [
    "react-app",
    "airbnb"
    ]
    },
    ```
    3. In terminal `eslint src/**/*.js --ignore-pattern node_modules/ --ignore-pattern src/serviceWorker.js`
    4. If want to fix, `eslint src --fix`

    **Install SCSS/Sass**

    1. Run: `npm install node-sass --save`
  20. qfarenwald revised this gist Nov 4, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    # Exam Checklist
    # Exam Notes

    *Mid-Mod Notes*

  21. qfarenwald revised this gist Nov 4, 2019. 1 changed file with 57 additions and 56 deletions.
    113 changes: 57 additions & 56 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -279,61 +279,6 @@ In package.json, under scripts, edit the "test" script:
    npm test -- --coverage --watchAll=false
    ```

    # Getting Your Site on GitHub Pages

    **Preparation**

    1. Checkout your `master` branch and double-check to make sure it is up-to-date and there is nothing needed to be committed at this point
    1. Navigate to the root of your project directory
    1. Open your project in your text editor
    1. Double-check that all image tags in your HTML have the `src` attribute have `./` to start the path, e.g `src="./images/turing-logo.png"`

    **Required Steps**

    1. In the `package.json` file, within the `"repository"` object, edit the `"url"` value to be `"git+https://github.com/USERNAME/REPONAME.git"` where USERNAME and REPONAME are replaced with your GitHub username and your repository name, respectively

    **OR NOT?**

    1. In the `package.json` file, add the line: `"homepage": "http://USERNAME.github.io/REPONAME",` where USERNAME and REPONAME are replaced with your GitHub username and your repository name, respectively

    **DO THIS** `"homepage": ".",`

    1. Add these two lines to the `scripts` section of the `package.json` file:
    ```json
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
    ```
    1. In the terminal, run `npm install --save-dev gh-pages`
    1. You should see these lines of JSON added to your `package.json` file:
    ```json
    "devDependencies": {
    "gh-pages": "^1.1.0"
    }
    ```
    1. Run `npm run build` in the command line
    1. Run `npm run deploy` in the command line

    All of this will create a `gh-pages` branch in your repo with the contents from the `build` directory.

    If you go to the GitHub pages site (http://USERNAME.github.io/REPONAME) in a minute, you should see your app! If not, check out the console to see what errors you're getting and troubleshoot from there.

    **Deploying with React Router**

    1. npm install --save gh-pages
    2. “homepage”: “.“,
    3. “predeploy”: “npm run build”,
    “deploy”: “gh-pages -d build”
    5. import { HashRouter as Router } from ‘react-router-dom’ in `index.js` file and change to just `<Router></Router>`
    6. run npm run and build commands, done, go check GitHub Pages.

    **When You Make New Changes**

    If you make new changes to your `master` branch, GitHub Pages doesn't automatically know about these changes, and your site won't be up-to-date. You need to update the `gh-pages` branch to see those changes live on GitHub Pages. Here is how to update and keep everything in sync:

    1. After you're done making changes, checkout your `master` branch and double-check to make sure it is up-to-date and there is nothing needed to be committed at this point
    1. Run `npm run build` in the command line
    1. Run `npm run deploy` in the command line

    # Fetch and Post
    ```
    componentDidMount() {
    @@ -515,4 +460,60 @@ body {
    font-family: $heading-font;
    margin: 0;
    }
    ```
    ```

    # Getting Your Site on GitHub Pages

    **Preparation**

    1. Checkout your `master` branch and double-check to make sure it is up-to-date and there is nothing needed to be committed at this point
    1. Navigate to the root of your project directory
    1. Open your project in your text editor
    1. Double-check that all image tags in your HTML have the `src` attribute have `./` to start the path, e.g `src="./images/turing-logo.png"`

    **Required Steps**

    1. In the `package.json` file, within the `"repository"` object, edit the `"url"` value to be `"git+https://github.com/USERNAME/REPONAME.git"` where USERNAME and REPONAME are replaced with your GitHub username and your repository name, respectively

    **OR NOT?**

    1. In the `package.json` file, add the line: `"homepage": "http://USERNAME.github.io/REPONAME",` where USERNAME and REPONAME are replaced with your GitHub username and your repository name, respectively

    **DO THIS** `"homepage": ".",`

    1. Add these two lines to the `scripts` section of the `package.json` file:
    ```json
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
    ```
    1. In the terminal, run `npm install --save-dev gh-pages`
    1. You should see these lines of JSON added to your `package.json` file:
    ```json
    "devDependencies": {
    "gh-pages": "^1.1.0"
    }
    ```
    1. Run `npm run build` in the command line
    1. Run `npm run deploy` in the command line

    All of this will create a `gh-pages` branch in your repo with the contents from the `build` directory.

    If you go to the GitHub pages site (http://USERNAME.github.io/REPONAME) in a minute, you should see your app! If not, check out the console to see what errors you're getting and troubleshoot from there.


    **Deploying with React Router**

    1. npm install --save gh-pages
    2. “homepage”: “.“,
    3. “predeploy”: “npm run build”,
    “deploy”: “gh-pages -d build”
    5. import { HashRouter as Router } from ‘react-router-dom’ in `index.js` file and change to just `<Router></Router>`
    6. run npm run and build commands, done, go check GitHub Pages.

    **When You Make New Changes**

    If you make new changes to your `master` branch, GitHub Pages doesn't automatically know about these changes, and your site won't be up-to-date. You need to update the `gh-pages` branch to see those changes live on GitHub Pages. Here is how to update and keep everything in sync:

    1. After you're done making changes, checkout your `master` branch and double-check to make sure it is up-to-date and there is nothing needed to be committed at this point
    1. Run `npm run build` in the command line
    1. Run `npm run deploy` in the command line
  22. qfarenwald revised this gist Nov 4, 2019. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -187,8 +187,13 @@ describe('NameOfTested', () => {
    const mockData = ?
    const expected = ?
    wrapper.instance().functionName(mockData);
    // Expectation
    expect(wrapper.state('stateKeyName')).toEqual([]);
    // Execution
    wrapper.instance().funcName(argumentName);
    // Expectation
    expect(wrapper.state('stateKeyName')).toEqual(expected);
    })
    })
  23. qfarenwald revised this gist Nov 4, 2019. 1 changed file with 1 addition and 267 deletions.
    268 changes: 1 addition & 267 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -510,270 +510,4 @@ body {
    font-family: $heading-font;
    margin: 0;
    }
    ```

    # Redux
    https://frontend.turing.io/lessons/module-3/ideabox-to-redux.html
    https://frontend.turing.io/lessons/module-3/react-to-redux-workshop.html

    **Set Up**
    ```
    git clone https://github.com/filepath.git rename-if-you-want
    cd rename-if-you-want
    npm i
    npm start
    ```
    repeat for both UI and API
    ```
    npm i redux react-redux redux-devtools-extension -S
    ```

    **Cycle**

    App.js should be set up as normal React with a state...

    /App/App.js
    What is in state that you want in store? Identify the method...

    **Action Creator**
    Create directory and files

    /src/

    ```
    mkdir Actions
    ```
    ```
    touch index.js
    ```
    Create action in index.js
    Name variable the same as the method
    ```
    export const addToDo = todo => ({
    type: 'ADD_TODO',
    todo
    });
    ```
    No need to export or import anything

    **Reducer**
    Create directory and files
    Name individual reducer file what you would name the property in state
    Create an individual reducer file for each property in state we want to update

    /src/

    ```
    mkdir Reducers
    ```
    ```
    touch index.js todos.js
    ```
    Create reducer in todos.js file
    ```
    export const todos = (state = [], action) => {
    switch (action.type) {
    case 'ADD_TODO':
    return [...state, { id: Date.now(), todo: action.todo, completed: false }];
    default:
    return state;
    }
    }
    ```

    **Combine Reducers**

    /reducers/index.js

    ```
    import { combineReducers } from 'redux';
    import { todos } from './todos';
    const rootReducer = combineReducers({
    todos,
    });
    export default rootReducer;
    ```

    **Set Up In Index**

    /src/index.js

    Import: Provider, createStore, composeWithDevTools, rootReducer
    Create store
    Wrap App
    ```
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import { createStore } from 'redux';
    import { composeWithDevTools } from 'redux-devtools-extension';
    import rootReducer from './reducers';
    import App from './components/App';
    import './index.css';
    const store = createStore(rootReducer, composeWithDevTools());
    ReactDOM.render(
    <Provider store={store}>
    <App />
    </Provider>,
    document.getElementById('root')
    );
    ```
    Go to console, redux tool, check to see if state is updated

    **Connect React Components To Store**

    /App/App.js

    Import: connect
    In render(), edit where method is coming from, move from `= this.state` to `this.props`
    Set up mapStateToProps
    Edit export

    ```
    import React, { Component } from 'react'
    ??? import { addToDo } from '../actions'; ???
    import { connect } from 'react-redux';
    class AddTodoForm extends Component {
    render(){
    const { selectedId } = this.props;
    const { coWorkers, error } = this.state;
    }
    }
    const mapDispatchToProps = dispatch => ({
    addToDo: text => dispatch( addToDo(text) )
    })
    export default connect(null, mapDispatchToProps)(App);
    ```

    Where is the method being invoked
    Goal is to be able to delete the method from in app and from apps state
    Eventually App will have no methods or state

    **Display Things From Store**

    /where method is being invoked
    ex /containers/TodoList.js

    Import: connect, action, ?bindActionCreators
    Create mapStateToProps
    ```
    import React from 'react';
    import Todo from '../components/ToDo';
    import { connect } from 'react-redux';
    const ToDoList = ({ todos }) => {
    const displayTodos = todos.map(todo => {
    return (
    <Todo
    {...todo}
    key={todo.id}
    />
    )
    })
    return (
    <ul>
    {displayTodos}
    </ul>
    )
    }
    const mapStateToProps = state => ({
    todos: state.todos
    });
    export default connect(mapStateToProps)(ToDoList);
    ```

    ???????? BELOW
    ```
    // components/ToDo.js
    import React from 'react';
    const ToDo = ({ id, text, completed }) => {
    return (
    <li>{text}</li>
    )
    }
    export default ToDo;
    ```

    # React Router
    https://frontend.turing.io/lessons/module-3/react-router-v4.html

    ```
    npm i react-router-dom -S
    ```

    index.js
    ```
    import { BrowserRouter } from 'react-router-dom'
    const router = (
    <BrowserRouter>
    <App />
    </BrowserRouter>
    )
    ReactDOM.render(router, document.getElementById('root'));
    ```

    App.js
    ```
    import { Route, NavLink } from 'react-router-dom'
    ```

    # Testing

    **actions**

    ```
    import * as actions from '../actions';
    describe('actions', () => {
    describe('actionName', () => {
    it('should have a type of TYPE_NAME', () => {
    const whatYouAreFeedingTheAction = [
    {
    key: value,
    key: value
    },
    {
    key: value,
    key: value
    }
    ]
    const expectedAction = {
    type: 'TYPE_NAME',
    varInAction: [
    {
    key: value,
    key: value
    },
    {
    key: value,
    key: value
    }
    ]
    }
    const result = actions.actionName(varFeedingToTheAction);
    expect(result).toEqual(expectedAction);
    });
    });
    });
    ```

    ```
  24. qfarenwald revised this gist Nov 4, 2019. No changes.
  25. qfarenwald revised this gist Nov 3, 2019. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -497,6 +497,21 @@ https://frontend.turing.io/lessons/

    Any time `.toHaveBeenCalledWIth()` is called it needs to be used with a mock function so it can be spied on.

    **Background Image in CSS**

    ```
    body {
    background-image: url('../images/bright-colors-daylight-2742812.jpg');
    background-size: cover;
    background-position: 50% 30%;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    font-family: $heading-font;
    margin: 0;
    }
    ```

    # Redux
    https://frontend.turing.io/lessons/module-3/ideabox-to-redux.html
    https://frontend.turing.io/lessons/module-3/react-to-redux-workshop.html
  26. qfarenwald revised this gist Nov 3, 2019. 1 changed file with 44 additions and 0 deletions.
    44 changes: 44 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -718,3 +718,47 @@ App.js
    import { Route, NavLink } from 'react-router-dom'
    ```

    # Testing

    **actions**

    ```
    import * as actions from '../actions';
    describe('actions', () => {
    describe('actionName', () => {
    it('should have a type of TYPE_NAME', () => {
    const whatYouAreFeedingTheAction = [
    {
    key: value,
    key: value
    },
    {
    key: value,
    key: value
    }
    ]
    const expectedAction = {
    type: 'TYPE_NAME',
    varInAction: [
    {
    key: value,
    key: value
    },
    {
    key: value,
    key: value
    }
    ]
    }
    const result = actions.actionName(varFeedingToTheAction);
    expect(result).toEqual(expectedAction);
    });
    });
    });
    ```

  27. qfarenwald revised this gist Nov 1, 2019. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -694,6 +694,7 @@ export default ToDo;
    ```

    # React Router
    https://frontend.turing.io/lessons/module-3/react-router-v4.html

    ```
    npm i react-router-dom -S
    @@ -716,3 +717,4 @@ App.js
    ```
    import { Route, NavLink } from 'react-router-dom'
    ```

  28. qfarenwald revised this gist Nov 1, 2019. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -711,3 +711,8 @@ const router = (
    ReactDOM.render(router, document.getElementById('root'));
    ```

    App.js
    ```
    import { Route, NavLink } from 'react-router-dom'
    ```
  29. qfarenwald revised this gist Nov 1, 2019. 1 changed file with 19 additions and 0 deletions.
    19 changes: 19 additions & 0 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -692,3 +692,22 @@ const ToDo = ({ id, text, completed }) => {
    export default ToDo;
    ```

    # React Router

    ```
    npm i react-router-dom -S
    ```

    index.js
    ```
    import { BrowserRouter } from 'react-router-dom'
    const router = (
    <BrowserRouter>
    <App />
    </BrowserRouter>
    )
    ReactDOM.render(router, document.getElementById('root'));
    ```
  30. qfarenwald revised this gist Oct 23, 2019. 1 changed file with 72 additions and 22 deletions.
    94 changes: 72 additions & 22 deletions react-app-setup.md
    View file
    Original file line number Diff line number Diff line change
    @@ -499,34 +499,63 @@ Any time `.toHaveBeenCalledWIth()` is called it needs to be used with a mock fun

    # Redux
    https://frontend.turing.io/lessons/module-3/ideabox-to-redux.html
    https://frontend.turing.io/lessons/module-3/react-to-redux-workshop.html

    **Set Up**
    ```
    git clone https://github.com/turingschool-examples/redux-lesson-boilerplate.git redux-workshop
    cd redux-workshop
    git clone https://github.com/filepath.git rename-if-you-want
    cd rename-if-you-want
    npm i
    npm start
    ```
    repeat for both UI and API
    ```
    npm i redux react-redux redux-devtools-extension -S
    ```

    **Cycle**

    App.js should be set up as normal React with a state...

    /App/App.js
    What is in state that you want in store? Identify the method...

    **Action Creator**
    ```
    // actions/index.js
    Create directory and files

    /src/

    ```
    mkdir Actions
    ```
    ```
    touch index.js
    ```
    Create action in index.js
    Name variable the same as the method
    ```
    export const addToDo = todo => ({
    type: 'ADD_TODO',
    todo
    });
    ```
    No need to export or import anything

    **Reducer**
    ```
    // reducers/todos.js
    Create directory and files
    Name individual reducer file what you would name the property in state
    Create an individual reducer file for each property in state we want to update

    /src/

    ```
    mkdir Reducers
    ```
    ```
    touch index.js todos.js
    ```
    Create reducer in todos.js file
    ```
    export const todos = (state = [], action) => {
    switch (action.type) {
    case 'ADD_TODO':
    @@ -537,10 +566,11 @@ export const todos = (state = [], action) => {
    }
    ```

    **Creating The Store**
    ```
    // reducers/index.js
    **Combine Reducers**

    /reducers/index.js

    ```
    import { combineReducers } from 'redux';
    import { todos } from './todos';
    @@ -552,9 +582,13 @@ export default rootReducer;
    ```

    **Set Up In Index**
    ```
    // src/index.js

    /src/index.js

    Import: Provider, createStore, composeWithDevTools, rootReducer
    Create store
    Wrap App
    ```
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    @@ -573,35 +607,49 @@ ReactDOM.render(
    document.getElementById('root')
    );
    ```
    Go to console, redux tool, check to see if state is updated

    **Connect React Components To Store**

    /App/App.js

    Import: connect
    In render(), edit where method is coming from, move from `= this.state` to `this.props`
    Set up mapStateToProps
    Edit export

    ```
    // components/AddTodoForm.js
    import React, { Component } from 'react'
    import { addToDo } from '../actions';
    ??? import { addToDo } from '../actions'; ???
    import { connect } from 'react-redux';
    class AddTodoForm extends Component {
    submitForm = (e) => {
    e.preventDefault()
    this.props.addToDo(this.state.todo)
    this.setState({ todo: '' });
    render(){
    const { selectedId } = this.props;
    const { coWorkers, error } = this.state;
    }
    // render()...
    }
    const mapDispatchToProps = dispatch => ({
    addToDo: text => dispatch( addToDo(text) )
    })
    export default connect(null, mapDispatchToProps)(AddTodoForm);
    export default connect(null, mapDispatchToProps)(App);
    ```

    Where is the method being invoked
    Goal is to be able to delete the method from in app and from apps state
    Eventually App will have no methods or state

    **Display Things From Store**
    ```
    // containers/TodoList.js

    /where method is being invoked
    ex /containers/TodoList.js

    Import: connect, action, ?bindActionCreators
    Create mapStateToProps
    ```
    import React from 'react';
    import Todo from '../components/ToDo';
    import { connect } from 'react-redux';
    @@ -629,6 +677,8 @@ const mapStateToProps = state => ({
    export default connect(mapStateToProps)(ToDoList);
    ```

    ???????? BELOW
    ```
    // components/ToDo.js