Tutorial

📚 Getting Started

Let's learn how to develop simple pieces of the website to prepare you for coding the actual site! Make sure to read the README.md of the repo before advancing!

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>
                Count: {this.state.count}
            </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
2. Connect your component
3. Add mapStateToProps
4. Use a selector to retrieve testData
5. Display testData.test within your tutorial component

Git Commit

Redux Actions

1. Add a mapDispatchToProps to your component
2. Import testAction
3. Create a button to use the testAction

Git Commit

4. Observe that in Redux Dev Tools that the state changed!
5. Make your own action in testActions.js
6. Edit the testReducer.js to receive and change it's state based on that action!

Git Commit

Testing

Jest Documentation

1. Create a unit test for your component
2. yarn test
3. Make sure it works

Git Commit

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!