---
title: Deconstructing React
tags: presentation, fac19
slideOptions:
progress: true
theme: sky
transition: 'fade'
spotlight:
enabled: true
# parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'
---

# De[Constructing] React
A whistle stop tour

---

1. Intro
2. Key Concepts
3. Your questions
4. Neat tricks
5. Getting hired

----

## SPA week takeaways :man_in_steamy_room: :woman_in_steamy_room:
Why React?
1. Abstracts away DOM manipulation
2. Helps manage state

---

## About me (and React)
### Where's Whippy - Student Project :icecream:
- State Management: useContext hook
- React Router

----

### Humanibase - TFB :desert:
- Styled Components
- Storybook

----

### Spokesafe - TFB #2 :bike:
- TypeScript

----

### Flairbox :film_projector:
- TypeScript
- State management: MobX
- Formik, yup

---

## Key Concepts
### Virtual DOM
- [What the Fork is the React Virtual DOM](https://maggieappleton.com/react-vdom)

----


----


----


----


---

### Hooks & custom hooks
- [Building Custom React Hooks](https://maggieappleton.com/customhooks)
- [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html)

----


----

### Custom Hooks
- For more complex logic that may use several 'basic' hooks which you want to reuse in your app
- useAuth is quite a common one
- Check out [useHooks](https://usehooks.com/) for inspiration

---

## Your Questions
### State Management
- Passing props
- [useContext hook](https://reactjs.org/docs/context.html)
>*Context is designed to share data that can be considered “global” for a tree of React components*
>*Apply it sparingly because it makes component reuse more difficult.*

----

- MobX - "define state and make it observable"
- Currently using a store concept
- Redux
- redux-saga.js

----

### Folder Structure
- The flatter the better
- Reduce your cognitive overload

----

### Custom Components & Abstraction
- If your using the same logic 2/3 times

----

### Continuous Integration
[circleci](https://circleci.com/circleci-versus-travisci/) uses concepts of jobs, steps and workflows
1. Linting
2. Tests passing
3. Build step

---

## Cool stuff

---

## Getting Hired :female-construction-worker:
### JavaScript fundamentals
- Pramp & Leet code (two sum)
- Hash tables (objects) and why faster than using brute force
- Talking through your code
- More importantly talking through when your stuck

----

### TypeScript & React
- Will slow you down, be prepared for error city
- Really helpful on larger codebases
- Try it out

----

### But I want to be full stack!
- React has a lot of complexity to deal with
- Smaller dev teams engagement with BE likely (postgres, Express)

---

- https://reactjs.org/docs/composition-vs-inheritance.html
- https://reactjs.org/docs/react-component.html
- https://medium.com/@joshuablankenshipnola/react-component-lifecycle-events-cb77e670a093