Profile cover photo
Profile photo
Elijah Manor
11,840 followers -
Christian, Family Man, Developer
Christian, Family Man, Developer

11,840 followers
About
Posts

Post has attachment
๐Ÿ†• Migrating from UNSAFE_ #ReactJS Lifecycle Hooks

๐Ÿ“น https://www.youtube.com/watch?v=G9S1IghlkCI

โš›๏ธ In this video I take an example React app and migrate the UNSAFE_ lifecycle hooks to use safer alternatives

๐Ÿ—’ NOTE: You technically don't need to migrate yet. The original methods won't be deprecated until a v16.x release or removed until v17
Add a comment...

Post has attachment
๐Ÿ“น Rename Unsafe Lifecycle Hooks with react-codemod (6 mins) https://youtu.be/UqLh2K9j-wk

โœ… Download react-codemod
โœ… Learn jscodeshift options (dry run, print, etcโ€ฆ)
โœ… Run rename-unsafe-lifecycles.js

๐ŸŽ‰ Unsafe lifecycle hooks automatically prepended with `UNSAFE_`

โš›๏ธ #reactjs
Add a comment...

Post has attachment
๐Ÿ“น Polyfill React 16.3 New Lifecycle Hooks (5 mins) https://youtu.be/djXh1vaDarg

โœ… Import polyfill from react-lifecycles-compat
โœ… Wrap your component with polyfill
โœ… Export your polyfilled component

๐ŸŽ‰ Backwards compat for getDerivedStateFromProps & getSnapshotBeforeUpdate
Add a comment...

Post has attachment
๐Ÿ“น What's New in #ReactJS 16.3 (15 mins) https://www.youtube.com/watch?v=WhWqy-vxKS8

โœ… New Context API
โœ… New getDerivedStateFromProps & getSnapshotBeforeUpdate lifecycle methods
โœ… New react-codemod react-lifecycles-compat
โœ… New ref APIs (createRef & forwardRef)
โœ… New StrictMode & experimental AsyncMode components
โœ… New React Dev Tools
Add a comment...

Post has attachment
Add ESLint & Prettier to @Code for a Create React App (8 mins) https://www.youtube.com/watch?v=bfyI9yl3qfE

โœ… ESLint extension
โœ… tweak .eslintrc
โœ… Prettier extension
โœ… npm i prettier eslint-config-prettier eslint-plugin-prettier -D
โœ… tweak settings.json
โœ… npm i husky pretty-quick

#reactjs
Add a comment...

Post has attachment
โš›๏ธ Bootstrap a #ReactJS App with @Parceljs (5 mins) https://www.youtube.com/watch?v=ybjmUgKW3vU

โœ… mkdir playground && cd $_
โœ… npm init -y
โœ… npm i parcel-bundler react react-dom
โœ… touch index.{html,js}
โœ… npx parcel index.html
โœ… npx parcel build index.html --public-url ./
Add a comment...

Post has attachment
๐Ÿ“น Create React App: Part 4 - Forking instead of Ejecting (7min) https://youtu.be/I22TW-33dDE

โ›”๏ธ npm run eject
โœ… fork create-react-app
โœ… tweak webpack config & package.json
โœ… npm publish --access public
โœ… npx create-react-app playground --scripts-version @manorisms/react-scripts
Add a comment...

Post has attachment
๐Ÿ“น Create React App: Part 3 - Adding @Storybookjs Style Guide (6 mins)

๐Ÿ”— https://www.youtube.com/watch?v=va-JzrmaiUM

โœ… Generating Storybook
โœ… Looking at the generated files
โœ… Running in develop mode
โœ… Adding a new Component story
โœ… Building & serving locally

๐Ÿท #reactjs
Add a comment...

Post has attachment
๐Ÿ”ฅ Detect and Refactor #JavaScript Copy-Paste Code (5 mins) https://www.youtube.com/watch?v=by1wSlYJe8s

โœ… Run `jsinspect` or `jscpd` to detect copy-paste
โœ… Ignore paths & adjust token thresholds
โœ… Refactor duplicated code
โœ… Rerun unit tests to verify code
โœ… Verify duplication is gone & run app
Add a comment...

Post has attachment
โšก๏ธ Blogged: Debugging a Create React App with VS @Code

๐Ÿ“น Embedded Video for those who like to watch
๐Ÿ“– Supporting blog content for those who like to read

๐Ÿท #reactjs

๐Ÿ”— http://elijahmanor.com/cra-debug-vscode/
Add a comment...
Wait while more posts are being loaded