Complete Intro to React V8, Frontend Masters
- Introduction.
- Links
- Build React basic project.
- Import the react library.
- On Dev tools console you can type in order to check the library.
- React
-ReactDom
- Show the basic way to create components in react.
QA:
- Why createRoot.
- Why use react?
- Library to render DOM.
- Handle state of the web app.
- Create Pet component.
- React have a data flow from parent to childs.
this makes the flow of data more easy to read and follow.
- Pass props to child component.
- Using JSX to render components.
- install npm.
npm init -y
- Using and configure Prettier.
npm i -D [email protected]
- Set up Eslint and Gitignore
- npm i -d [email protected] [email protected]
- Install vite
npm i -D [email protected] @vitejs/[email protected] --legacy-peer-deps.
- Install react 18.2.0
npm install [email protected] [email protected]
- ESLint + React
npm install -D [email protected] [email protected] [email protected]
- Hooks in react
https://react-v8.holt.courses/lessons/core-react-concepts/hooks
- How react render.
- They have to be called in the same order, not inside ifs or conditionals.
- Let's add the ESLint rule.
npm i -D [email protected]
- useEffect
useEffect allows you to say do a render of this component first so the user can see something then as soon as the render is done, then do something.
- use custom Hooks.
useBreedList
- Handling user input.
- Make subcomponts.
- Recommendation: Don't decompose too much.
- NODE_ENV=development.
- Strict Mode
- Dev Tools
React has wonderful dev tools that the core team maintains.
- React Router is by far the most popular client side router in the React community. It is mature, being used by big companies, and battle tested at large scales.
- npm i [email protected]
- https://react-v8.holt.courses/lessons/react-capabilities/react-router
- Right now react query is a must !
- The idea behind React is that you want to cache most of what you fetch from a database.
- npm install @tanstack/[email protected]
- how to fetch with react query.
- Refactor useBreedList to see react query simplicity.
- If it is possible, avoid useEffect.
- We do have a controlled input on animal to properly have it determine the useBreedList animal. But we're not using the controlled input to submit the form, we're just using the form event anyway
- Class components have lifecycle methods. These for the most part are what useEffect does for function components. They're for doing things like making API calls, starting and ending
- Frequently there's errors with APIs with malformatted or otherwise weird data.
- This is something you can't do with hooks so if you needed this sort of functionality you'd have to use a class component.
- Another nice feature React is something called a Portal. You can think of the portal as a separate mount point (the actual DOM node which your app is put into) for your React app.
- Refs are like instance variables for function components. Whereas on a class you'd say this.myVar to refer to an instance variable, with function components you can use refs.
They're containers of state that live outside a function's closure state which means anytime I refer to elRef
- Implement modal with portals..
- Context is like state, but instead of being confined to a component, it's global to your application. It's application-level state. This is dangerous. Avoid using context until you have to use it.
-- Course notes https://react-v8.holt.courses/lessons/welcome/intro -- https://react-v8.holt.courses/ -- Course repo https://github.com/btholt/complete-intro-to-react-v8 -- Course Github https://github.com/btholt/citr-v8-project/tree/main/01-no-frills-react