https://github.com/ryancoll/comp-3330-week3
https://github.com/ryancoll/comp-3330-week3
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ryancoll/comp-3330-week3
- Owner: RyanColl
- Created: 2021-09-24T22:48:57.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-10-04T00:17:20.000Z (over 4 years ago)
- Last Synced: 2025-02-25T21:35:22.252Z (about 1 year ago)
- Language: TypeScript
- Size: 435 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Getting Started With My Project!
## Week 3
### ES6 Usage Examples
In this project, I used the following EC6 features:
Arrow Function from line 9 of List.tsx:
const linkPress = (course: string) => {
store.dispatch(actions.addCourse(course));
console.log(store.getState())
}
Destructuring from line 23 of App.tsx:
const [courses, setCourses] = useState([])
Default from line 5 of reducer.js:
export default function reducer(state = [], action) {}
Let from line 10 of Item.tsx:
let path = useLocation().pathname.substr(6);
This is the extent of my EC6 feature usage in this project.
### Typescript
Typescript is involved in the project, but do not worry, simply using ```npm install``` when you enter the project solves any sort of dependency problems. To install typescript in a react-app of your own, visit this [link.](https://create-react-app.dev/docs/adding-typescript/)
### Ternary
[Ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) is used to check a condition that returns a boolean, and then executes code based on whether it is true or false. Ternary can look at a boolean directly, or it can look at a comparison, as it always resorts to a boolean.
### State
State is used to update a component. Updating a component re-renders it, but with the re-rendered value.
For example, in the following code, we will destructure our state variable and our component-updating function (as described in the [docs](https://reactjs.org/docs/hooks-state.html)) and give it an initial value of a an empty array. In our actual code, we fill this array with a 7-piece data-set, so we will not include it here. Can be found on line 23 of App.tsx.
const [courses, setCourses] = useState([])
### How It Works
My app is simple and introduces the use of redux, but not in a way that is meaningful yet. Redux is a new topic, and I have implemented into some buttons the logic required to dispatch into state the name of the current course selected. I have provided a back button that returns to the list, and filters through the state and pulls the course out of state. I see that when state is changed in Redux, we may have to re-render a component to see it. I will leave that for another time. The react router dom handles requests from the url parameters. I made a courses array in state, sent it as props down to both list and item. I used to handle the ``` /list ``` url, and to handle any parameter after the list url, like ``` /list/COMP-3330 ```. I use the parameter in item to filter through the courses array and grab the correct course. I then map the course into an ``` h1 ``` tag and a ``` span ``` tag.
### Redux
I have also added a state tracker on the page using Redux. You will see that the state matches the name of the course displayed. This is because I have included some logic inside of the onClick for the list:
const linkPress = (course: string) => {
store.dispatch(actions.addCourse(course));
console.log(store.getState())
}
What this does is take in the course from the link, put it into state, and log the new state. This new state is what is being read in Item.tsx on lines 30-32. When we want to return to our list, I have included a back button from [material-icons](https://mui.com/components/material-icons/). The logic placed in this back button is what is called that allows our state to be updated and the current course removed:
const onBack = () => {
store.dispatch(actions.removeCourse(courses.filter(course => course.course === path)[0]))
console.log(store.getState())
}
This dispatches an array that is produced from filtering the courses array to match the course that shares name with the current path. We then console log the state, which is now an empty array as expected.
Overall, I am starting to see the big picture with react redux, and look forward to potentially building it into a larger project. More study on Redux will be needed.
Please feel free to check out my website too, which is currently just a work in progress. [RyanColl](https://www.rcoll-dev.com)