Tutorial

📚 Getting Started

Let's learn how to develop simple pieces of the website to prepare you for coding the actual site!

Lost? Make sure to read the README.md first!

Stuck? Check out branch tut-kdo for reference!

1. Pull the branch called tutorial
2. Create a branch tut-<First Name Initial + Last Name> from the tutorial branch

First Name: Kevin (k)
Last Name: Do (do)
Branch name: tut-kdo

3. With VSCode open, open the terminal and type yarn (You should be in the AztecGameLaboratory directory!)

C:\Users\YOUR_COMPUTER_NAME\WHERE_THE_REPO_WAS_CLONED\AztecGameLaboratory> yarn

4. Start your development locally on your computer with yarn start
5. Open the tutorial folder located in src/
6. Create your own folder as tut-<First Name Initial + Last Name> within the tutorial folder

First Name: Andrew (a)
Last Name: De Leon (deleon)
Folder name: tut-adeleon

7. Change directory to the folder you just created

⚛️ React

React Documentation

1. Create a file named Tutorial.js
2. Create a class component within the file you just made <First Name + Last Name> + Tutorial

Git Commit Reference

import React, { Component } from "react";

class KevinDoTutorial extends Component {
  render() {
    return ();
  }
}

export default KevinDoTutorial;

3. Create a functional component and add it to your class component

import React, { Component } from "react";

class KevinDoTutorial extends Component {
  state = {
    count: 0
  };

  onClickHandleCount = e => {
    this.setState({
      count: (this.state.count += 1)
    });
  };

  render() {
    return (
      <React.Fragment>
        <FunctionalComponent />
        <button onClick={this.onClickHandleCount}>Click me to increase count!</button>
        <p>Count: {this.state.count}</p>
      </React.Fragment>
    );
  }
}

const FunctionalComponent = () => {
  return <h1>Hi, I am a FunctionalComponent</h1>;
};

export default KevinDoTutorial;

3. Import that component you just made in App.js

Git Commit Reference

import KevinDoTutorial from "./tutorial/tut-kdo/Tutorial";

...

class App extends Component {
  render() {
    return (
      <div className="App">
        ...
        <KevinDoTutorial />
      </div>
    );
  }
}

export default App;

⚛️ Redux

Redux Documentation

Reselect Documentation

1. Import react-redux to Tutorial.js

import { connect } from "react-redux";

2. Connect your component and replace the previous export in Tutorial.js

export default connect(mapStateToProps)(KevinDoTutorial);

3. Add mapStateToProps right above the export

const mapStateToProps = state => {
  return {
    testData: selectTestData(state)
  };
};

4. Use a selector to retrieve testData

import { selectTestData } from "../../redux/testSelector";

5. Display testData.test within in your Tutorial.js

Git Commit Reference

...

render() {
  return (
    <React.Fragment>
      <FunctionalComponent />
      <p>Redux Data: {this.props.testData.test}</p>
      <button onClick={this.onClickHandleCount}>Click me to increase count!</button>
      <p>Count: {this.state.count}</p>
    </React.Fragment>
  );
}

...

📑 Redux Actions

1. Import testAction to Tutorial.js

import { bindActionCreators } from "redux";
import { testAction } from "../../redux/testActions";

2. Add a mapDispatchToProps and reconfigure the export default connect

...

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      testAction
    },
    dispatch
  );

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(KevinDoTutorial);

3. Create a button to use the testAction

Git Commit Reference

...

render() {
  return (
    <React.Fragment>
      <FunctionalComponent />
      <p>Redux Data: {this.props.testData.test}</p>
      <button onClick={this.onClickHandleCount}>Click me to increase count!</button>
      <p>Count: {this.state.count}</p>
      <button onClick={this.props.testAction}>Click me to run testAction!</button>
    </React.Fragment>
  );
}

...

4. Observe that in Redux Dev Tools that the state changed!
5. Make your own action in testActions.js in the folder redux

...

export const kevinAction = () => {
  return {
    type: "KEVIN",
    payload: "hehe xd"
  };
};

6. Edit the testReducer.js in the folder redux to receive and change it's state based on that action!

Git Commit

export default (state = initialState, action) => {
    switch (action.type) {
        case "TEST_ACTION":
            return { test: "Hello Redux" };
        case "KEVIN":
            return { test: "KEVIN WAS HERE" };
        default:
            return state;
    }
};

7. Update the Tutorial.js!

import { testAction, kevinAction } from "../../redux/testActions";

...

<button onClick={this.props.kevinAction}>Click me to run kevinAction!</button>

...

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      testAction,
      kevinAction
    },
    dispatch
  );

Testing

Jest Documentation
Install the prerequisites for using jest with React:

• Enzyme Adapter for React v16:
  
  • yarn --save-dev enzyme enzyme-adapter-react-16
    
  • Alternatively: npm i --save-dev enzyme enzyme-adapter-react-16

1. Refactor counter in tutorial to its own Component

Git Commit for Tutorial
Git Commit for Counter

2. Create a unit test for your component

Git Commit

3. yarn test and make sure all tests pass

Workflow

1. Submit a PR to merge your tut-<First Name + Last Name> into tutorial

2. Use the PR template under .github folder or in the wiki
3. Assign reviewers and yourself as assignee on the right sidebar

My Example PR Here

Finally, the checks will run, someone will approve and you're officially a AGL Developer! Please ping me if you have any questions and check out my tutorial branch tut-kdo if you get stuck!