Tutorial

📚 Getting Started

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

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

React

React Documentation

1. Create a file named Tutorial.js
2. Create a class component <First Name + Last Name> + Tutorial
   • KevinDoTutorial

Git Commit

3. Create a functional component and add it to your class component
4. Import that component in App.js

Git Commit

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!