---
# System prepended metadata

title: Frontend

---

# Frontend 
## HTML
## CSS
## Javascript - JS
  - Basic data structures: variables, objects, and arrays
  - Array methods and working with array data: .map(), .filter(), and .reduce()
  - Function Declarations and Arrow Functions
  - Template Literals
  - Short Conditionals: &&, ||, Ternary Operator
  - Three Array Methods: .map(), .filter(), .reduce()
  - Object Tricks: Property Shorthand, Destructuring, Spread Operator
  - Promises + Async/Await Syntax, Asynchronous JavaScript: promises, making HTTP requests with Fetch API, async/await syntax can help
  - The DOM: learn to create, select and modify HTML elements as well as their attributes
  - ES Modules + Import / Export syntax
  [refrenece](https://www.freecodecamp.org/news/javascript-skills-you-need-for-react-practical-examples/)
## Typescript - TS
## REACT

### React fundamentals and React hooks
  - How to structure JSX elements
  - How to render (show) JSX elements and how to show or hide elements based on certain conditions
   - How to split JSX into components and how to reuse and organize those components to make our app interface.
- How to pass data (+ JSX elements and components) to components using props and when to do so
 - How to store and update data within components using state and how to "lift state up" to other components
 - How to use event data in React and handle events from onClick, onChange, and onSubmit events (i.e. events from buttons, inputs, and forms)
- useState: to store and manage data within individual components
 - useEffect: to perform actions like HTTP requests or working with a browser API
 - useRef: to reference JSX elements
 - useContext: to access data from React Context to share data among components more easily [rather than passing props]
 - useReducer: to store and manage data across multiple component


### Learn to fetch data from both REST and GraphQL APIs
- Just REST APIs would work for now
    
### Learn to style your React apps with a component library or utility class library
- Component Library eg: Material UI
- Utility class library eg: Tailwindcss
### Learn a React router. In particular, react-router-dom
