Skip to main content
No Frills React
- Brian live codes setting up the foundation for a vanilla react app including the source file, index.html, linking to a stylesheet, and opening the application. The stylesheet for this application is pre made and provided on the course website. A student's question regarding why they are not using Create React App is also covered in this segment.
- Brian walks through creating a React component using a script tag and constant App to return React.createElement. App is a component that can be used to "stamp" the written function at different locations and, therefore, reduce the amount of repeated code. Students questions regarding why React.createElement is being used inside the return statement and how to know what div is being anchored to are also covered in this segment.
- Brian demonstrates how to create a Pet component, which represents a single pet, and answers student's questions. The questions covered in this segment include why the last element in the array has a comma, if a for loop can be used to generate components, why there are multiple instances of React.createElement, and why the spread operator is being used.
- Brian demonstrates how to refactor the Pet component to accept properties of objects for more flexibility. With the introduction of props, information can be passed down from a parent component to a child component. A student's question regarding if the current code is production ready is also covered in this segment.
Core React Concepts
- Brian demonstrates how to use JSX which will transpile HTML tags into React.createElement calls making the code more readable. Conversion of the current App component to JSX is also covered in this segment.
- Brian walks through how to configure ESLint so it will recognise that React is being used and not throw errors. How to configure ESLint so it also enforces accessibility rules in JSX is also covered in this segment.
- Brian live codes a SearchParams function with the useState hook to manage the state of the location input. The hook will set a placeholder location on first load and automatically update itself on input change.
- Brian discusses the rules hooks follow including strict ordering. Student's questions regarding what part of the page gets rendered, where data that isn't updated frequently should be stored, what to do with state to not affect the rerender, and best practices for dependent state. The non destructured version of setLocation is also briefly covered in this segment.
- Brian walks through how to configure ESLint to enforce rules for hooks recommended by the React team. A brief demonstration of some of the rules enforced by ESLint is also provided in this segment.
- Brian live codes the selector for animal type and breed using the useState hook and demonstrates what it looks like when ESLint throws an accessibility error. The breed selector will utilize an API call to generate options which will be covered in the useEffect & Fetching API Data segment.
- Brian answers student questions about hooks, if a self closing option tag is valid, if keys have to be unique, when to use index as the key, and if the state of ANIMALS is being mutated. Other questions covered in this segment include how to set a default value in a selector, if there is a difference when setting a state object as opposed to individual states, if it's safe to use useState for animations, and if you can use state with objects.
- Brian live codes the useEffect hook and requestPets function to make API calls and render the Pets information received. A student's question regarding when to garbage collect is also covered in this segment.
- Brian live codes a custom hook that makes an API call and returns a list of breeds that corresponds with the animal selected and the loading status of the hook. The hook will store the data returned in the local cache to avoid making multiple calls to the API.
- Brian demonstrates how to refactor a form with onSubmit and preventDefault so the form will submit either by clicking the button or pressing enter and prevent an automatic page refresh. React can handle other types of user input events including copy and paste, focus, blur, and touch.
- Brian simplifies the SearchParams component by refactoring the results display into a Results component. Narrowing the scope of a component allows for easier debugging.
- Brian walks through refactoring the Pet component by destructuring the props, adding an image property to Pet, setting a placeholder image for if no image is found, and creating a link to the details page for each pet.
- Brian shares some tips for development including switching the node environment from development to production when the project is being shipped. A student's question regarding how the environmental variables should be set for a build is also covered in this segment.
- Brian demonstrates setting React into strict mode which will throw stronger errors. Strict mode will throw errors on deprecated code and not allow the use of old APIs.
- Brian demonstrates using the different React dev tools including inspecting elements, viewing a component's render tree, and viewing a applications performance profiler.