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 tut-kdo, I've created commits that follow the tutorial and finished the process

1. Pull branch tutorial
2. Create a branch tut-<First Name Initial + Last Name> from the tutorial branch
   • tut-kdo
3. yarn
4. yarn start
5. Open the tutorial folder
6. Create your own folder as tut-<First Name Initial + Last Name>

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

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!