---
# System prepended metadata

title: Deconstructing React
tags: [presentation, ' fac19']

---

---
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)

----

![](https://i.imgur.com/5ahb1YH.png)

----

![](https://i.imgur.com/CGJg2HP.png)

----

![](https://i.imgur.com/nj8P7Lc.png)

----

![](https://i.imgur.com/FeNhGqJ.png)

---

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

----

![](https://i.imgur.com/i5X0AGC.png)

----

### 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
