/react-pokedex

Get started with ReactJs by building your own Pokedex.

Primary LanguageJavaScriptMIT LicenseMIT

react-pokedex

Get started with ReactJs by building your own Pokedex.

Live demo: http://www.absingh.com/react-pokedex/

Installation

  1. NPM
    • Install: sudo apt install npm
    • Verify: npm -v
  2. Create project: npx create-react-app react-pokedex

Topics Covered

  • Part 1: Project structure
  • Part 2: Adding HTML content
  • Part 3: Class Components and Lifecycle Methods
  • Part 4: Creating Functional Components
  • Part 5: Props, State and Hooks
  • Part 6: Dynamically rendering components
  • Part 7: What the tutorials don't tell you
  • Part 8: What do I do now?

What the tutorials don't tell you

  1. You don't need to and shouldn't install CRA
  2. Functional Components over Class Components
  3. Project structure for large scale projects
    • PascalCase Components
    • camelCase functions
    • Maintain one file per component
    • Separate utility functions
    • Create abstractions wherever possible
    • Make components reusable with props
  4. TypeScript is JavaScript with Benefits
    • Provides type checking
    • More secure by nature
    • Easier to manage large projects
  5. Add Node gitignore to avoid uploading packages
  6. Never use var. Use const and let.
  7. Useful extensions
    • Prettier
    • Simple React Snippets
  8. You don't need to wrap components with <div> or <Fragment> since React v16.2.0.
  9. Avoid default exports
  10. You can live without Redux. Try Context API.

What to do now

  • Learn React Hooks, Context API and React Router by building your own photo search engine: Link
  • Explore Lifecycle Methods by searching Emojis:Link
  • Explore common use cases of the React Router: Link
  • Build a Full Stack application with your favorite database and backend.

Pokemon API

Deployment Instructions

https://create-react-app.dev/docs/deployment/#github-pages