Development
React.js Professional Course
Larger React apps: routing, data loading, and components that stay maintainable.
React.js Professional Course is for someone who has built a small React screen and wants the next layer: routing, shared state, and data loading that does not tangle the components. It assumes the React.js Development course or equivalent practice.
Course syllabus
01. Feature folders
- Folders and component boundaries
A screen owns its pieces, and a shared control does not own the screen's data.
- One folder for the feature
The list, the detail, and the form sit together.
- What other routes may import
They import the page, not the private pieces beside it.
- Props are the surface
The child receives what it may use, and the parent keeps the rest.
- A view that only displays
It renders the props and does not know the URL or the request.
- The page knows the route
The page component reads the path and starts the load.
- A helper used by one feature
The function stays in that folder until a second feature needs it.
- Split a file that has two jobs
If the name needs and, it is two modules.
02. Routes and links
- One router for the app
A single map sends each path to a page.
- Pages and links
Every screen has a path, and the navigation uses those paths.
- A layout route that stays mounted
The shell remains while the child route changes.
- Mark the link for the current path
The active item is a style on the real link.
- A page for a path you do not have
An unknown URL renders a deliberate page.
- A section with nested routes
The section layout and the inner page are two levels.
- Send an old path to the path you kept
A redirect is a route with a destination, not a special case in a click handler.
- Navigate through the router
The URL changes, and the tree stays in agreement with it.
03. The id and the query
- Read the id from the path
The detail page takes the id from the URL.
- An id that is not in the path
You do not guess a record when the param is missing.
- Put a filter in the search string
A refresh keeps the filter because it is in the query.
- Change the query and keep the path
The page stays put while the search string updates.
- Treat a param as a string until you check it
The router gives you text, not a trusted id.
- Back should restore the list
The list query is still in the history entry.
- Build paths in one function
Links and redirects call the same helper.
- The open record is the id in the URL
Any component that needs the current item reads the route.
04. Waiting, empty, and failure
- The page starts the request
The screen that renders the data is the one that asks for it.
- Draw waiting, a result, or a failure
Each outcome has markup, and only one of them shows.
- Loading and empty states
A spinner, zero rows, and an error are three different screens.
- Zero rows is a result
The empty view says there are no records and what would add one.
- Say that the load failed
The person gets a sentence and a way to try the request again.
- Keep the current rows during a refetch
A refresh does not blank the list while the next response is on the way.
- Drop a response for a previous id
If the route changed, the older request must not render.
- Pass status into the view
The display component does not fetch the list itself.
05. List and detail
- Use the record id as the key
The key stays stable when the list reorders.
- The row is a link to the detail path
Opening an item is navigation, so the URL can be shared.
- The detail loads by id
Do not rely on an object that only existed in the list's memory.
- An id the server does not know
The page says the record is missing.
- Keep the editor off the list
The form has its own route or its own state.
- Ask for a page of rows
The first load has a limit you chose.
- The new record shows up on the list
After a save, the list includes what the server stored.
- Highlight the row that matches the path
The selected id is the one in the URL.
06. State two screens share
- Leave a toggle in the component that draws it
Panel open state does not belong in a store for the whole app.
- Lift a value when siblings both use it
The parent holds it and passes it down.
- Lifting state and context
Context carries a value many routes read, and local state stays where it is.
- Place the provider above those routes
A provider inside one page cannot supply the next page.
- Read the context through a named function
Callers use a hook with a name, not a scattered lookup.
- Keep the context value stable
A new object on every render wakes every consumer.
- Leave the fetched list on the page that fetched it
A second screen shares it only when it truly must.
- Put restorable choices in the URL
A filter in memory disappears on refresh.
07. Forms that send a draft
- Forms and predictable updates
The draft, the request, and the saved record are three values.
- Hold the draft in one object
Each field writes into that object.
- The inputs show the draft
The screen matches the object before you send it.
- Submit the object you hold
The request body is the draft, not a fresh read of the DOM.
- Ignore a second submit while the request runs
The button stays quiet until the status returns.
- Show field errors the server named
A rejected body maps messages onto those fields.
- Replace the draft only after a success
A failure leaves what the person typed.
- Start an edit from a copy of the record
The form does not mutate the object the list is rendering.
08. The list after a write
- Use the id from the create response
The server's id is the one the routes will use.
- Update the list from that response
Insert the record or refetch, and do it in a place you can find.
- Leave the draft in place when the save fails
The person can correct a field and send again.
- Remove the id you deleted
The list drops the row, and the detail route treats it as gone.
- Open the new record's path after create
The URL becomes the id you just stored.
- Update the one copy the screens read
A second shadow object will drift.
- Do not refetch over an unsaved draft
A reload of the form must not wipe an edit in progress.
- Name the function that applies a response
The update lives in one function, called from the save.
09. Slots and composition
- A layout renders its child route
The shell does not import every page.
- A header receives the title
It does not fetch the record to learn the name.
- Two looks, one button
Primary and quiet are props on the same component.
- The dialog's open flag stays local
The parent opens it, and the dialog does not publish a global flag.
- Split a component that is mostly booleans
Separate components for separate cases.
- The row markup is a component
The map renders that component and passes the record.
- Pass an element when you need a slot
A child covers the case before a custom render function.
- Promote a component when a second feature needs it
Until then it stays next to the first feature.
10. A route that fails
- A boundary catches a render error
The parent shows a fallback instead of a blank tree.
- A failed request stays in request state
You already branch on it, so you do not throw for a missing record.
- Wrap the route, not the whole app
One page can fail while the shell remains.
- The fallback has a way back
A sentence, and a link to a path that still works.
- A bad import is still a bug
The boundary is not a cover for a missing module.
- Keep the detail in the log
The screen shows a sentence, and the console keeps the error.
- Reset when the path changes
The next route starts without the previous failure.
- Retry belongs on the request
A network failure uses the error state and asks again.
11. One feature from URL to save
- Say what the feature lets someone do
Create a record, then open it again later.
- Add the feature folder
Pages, the form, and the function that calls the API.
- Add the paths
A list path, a detail path, and a path for the form if it is separate.
- Load with three visible outcomes
Waiting, a result, and a failure.
- Share only what a second route must read
Everything else stays in the component that uses it.
- Save the draft and update the list
The response lands in the data the list renders.
- Include the failures
A missing id, rejected fields, and a request that does not return.
- Walk the path out loud
Which file reads the URL, which file sends the body, and which file paints the error.
Lecture videos stay with the course. Playback for enrolled students will open once payments are available. Video links are not published on this page.