React and Deno: A Practical Guide

Install Deno in your project, run simple commands from the terminal, create and execute files, and enable network access with the --allow-net flag to fetch dependencies.

Build a Deno app with Oak, configure a router and routes for / and /new that return hello world, test on port 8000, and export the router to separate file.

Learn to automate live reloading with Denon by installing the package, setting up a watch script, and mapping TypeScript files for automatic updates.

Connect to a MySQL database by installing MySQL Workbench and connecting to localhost:3306 with root. Create the Daynard schema and the DINO admin database, then prepare to create tables.

Learn to build a register endpoint in a React and Deno project by creating a controllers directory, an OAuth controller, and a post /api/register route that echoes request bodies.

Learn to validate user input for registration using the Validus package, enforcing required fields, email format, password confirmation, and handling bad requests.

Move validations into a validations folder and export a register validation function to streamline register flow. Use next after validation to proceed, turning it into middleware that enforces required fields.

Create a user model class with id as primary key, first name, last name, email, and password, using model and column decorators to map to the database.

Build a user registration flow in a React and Deno project by configuring two database connections, creating a user repository, hashing the password, and saving the user via a manager.

Implement a login flow with a synchronous request–response, validate email and password, fetch the user by email, verify the password with decrypt, and return 404, 401, or the user.

Learn to generate a JWT with a library, build a payload with user id and a 1-day expiry, and store it in an http only cookie for secure server authentication.

Decode and verify the JWT from cookies to identify the authenticated user, fetch the user data by id, and return it without the password.

Implement a robust logout flow in a React and Deno app by clearing cookies and JWTs, returning a success message, and protecting routes with an OAuth middleware that validates authentication.

refactor oauth controllers into a class to reuse the user repository and JWT service via dependency injection, and route through anonymous functions to pass context to register, login, and logout.

Create and export a user controller connected to the user repository, expose an api endpoint to fetch all users, and incorporate authentication context.

Introduce a user service that injects a user repository, moving password filtering and data formatting from the controller to the service, while the repository handles database queries.

Implement dependency injection with the die library via a service collection and transient registrations to auto inject repositories, services, and controllers, including jwt and gwg services.

Execute admin-created users CRUD in React and Deno, including create with validation and auto-generated password, read, update, delete by id, and 204 no-content responses.

Add update info and password update endpoints for authenticated users to modify their data, validating password confirmation and returning a 400 when passwords do not match.

Create and manage roles with migrations and a roles schema, defining admin, Ed, and a viewer, and implement a role model, repository, service, and controller.

Explore abstract service and repository design, protected versus private access, crud methods including find and find one, create, update, and delete with super calls to extend user and url services.

Develop and test a roles crud api, creating roles with a name and placeholder permissions, retrieving by id, listing all roles, updating a role name, and deleting roles.

Learn how to implement a foreign key for user roles, migrate and relate users to roles with belongs to, and create users with an admin role.

Learn to include related models in queries with find options, and extend the user service to return roles like admin.

Refactor the upstart service and repository to support multi-key where conditions by introducing a where interface, applying dynamic key-value searches, and simplifying the controller with email-based lookups.

Create and migrate a permissions table modeled after roles, with permissions such as view users, add users, add products, and edit orders, and implement the model, repository, service, and controller.

Demonstrate a many-to-many relationship between roles and permissions using a join table with role_id and permission_id, and implement the role permissions model and controller to attach permissions to roles.

Update role permissions by deleting existing permissions before inserting new ones, and adapt the service to support deletes based on conditions to ensure data integrity.

Implement pagination for the user list by adding find and count, configuring limit and offset, and returning data with total and page info while omitting passwords.

Build a complete products module in a Deno-based backend, creating the products table and model, and implementing repository, service, and controller layers to perform create, read, update, and delete operations.

Create an image controller and enable multipart form uploads. Implement endpoints to upload and serve images from an uploads folder.

Implement an orders feature with migrations to create orders and order items tables, add timestamps, a foreign key from items to orders, and build models, repository, service, and controller.

Model orders with a has-many relation to order items and return orders with concatenated names and included order items. Compute per-order totals with reduce for easy front-end rendering.

Export orders to a csv file by importing a csv writer, building headers and rows from orders and order items, and returning a downloadable attachment via a post route.

Create a daily sales chart by joining orders with order items and grouping by date. Expose the results via the order service chart endpoint.

Learn to build a permission middleware that validates JWT, fetches the user and role permissions, and guards routes by view, edit, and add access for different roles.

Install the tools and run the create-react-app command with the TypeScript template to name it react admin. Then navigate into the folder and start the dev server on port 3000.

Open the React and Deno project, add bootstrap styles, copy the dashboard template, and adjust markup by using className, removing extraneous sections, to render a clean dashboard interface.

Split emails into components by building a navigation component and a menu component in React, demonstrating class-based and hooks-based patterns with import/export and TypeScript/JSX usage.

Learn to build navigation in a React and Deno project using react-router-dom by adding dashboard and users components, configuring BrowserRouter, Route paths, and links with exact routing.

Create a dedicated register page using a wrapper component to provide a unique template, wrap the dashboard and other components, and render children via props.

Build a registration form in a React and Deno setup by adapting a template, wiring inputs to state, and handling onChange and submit events with prevent default for backend submission.

Install axios and its types, import axios, and post to localhost:8000/api/register with user data; handle the response using .then or async/await to access response.data.

Learn how to redirect from registration to the login page by implementing a login component and a redirect state in React, with conditional rendering of the email state.

Explore how to implement state in React using useState by managing a count variable, updating it with setCount from an input, and reflecting changes in the UI.

build a login form in react using useState for email and password, handle onChange, submit with preventDefault, post to localhost:1000/api/login with credentials, receive a jwt cookie, and redirect.

Explore using the useEffect hook with axios to fetch the authenticated user and display their name in navigation, handling authentication and sign-out in React and Deno.

Configure Axios defaults globally by setting a base URL prefix and withCredentials to true, streamlining login and endpoint calls while ensuring authenticated user retrieval.

Explore how NavLink attaches an active class to the current route, contrasting it with Link, and learn to use exact path matching to prevent multiple highlights.

Learn to implement paginated user data in React and Deno by adding next and prev controls, tracking page state, refetching data with useEffect on page changes, and enforcing last-page bounds.

Delete a user by clicking a delete button, confirm the action, send a delete request with the user id via Axios, and update the UI by filtering the remaining users.

Create a user creation form in a React and Deno guide, wiring input fields for first name, last name, email, and role, fetch roles with Axios, and redirect on success.

Learn how to convert a user creation form into a user edit workflow by fetching existing user data via the url, pre-filling fields, and submitting updates to the server.

Learn to implement a roles management page in a React and Deno app by fetching all roles, rendering a roles table, and adding a delete operation with confirmation.

Create roles by building a form with a name and a permissions checklist sourced from a permissions model, posting the data to the backend, and redirecting after success.

Update roles by editing a role’s name and permissions, prefill data from the server, and submit changes via a put request to persist updated roles and permissions.

Create the products page, build a products table, and implement a product model with id, title, description, image, and price, plus delete and pagination controls.

Create a reusable paginator component to handle product and user pagination. Pass last page and a page change handler via props to wire events and reuse code.

Create a product creation form by building a product component with title, description, image, and price fields, managing input state and on-change handlers, and submitting to add new products.

Learn how to implement uploading images in a React and Deno project by wiring an image input, on change, and a dedicated image component that uploads via form data.

Prefill a product edit form using useEffect and axios, then update the product with a put request while using useRef to manage the image input.

Create a React orders component that fetches orders with axios, renders a table of orders plus order items, and implements pagination with view actions.

Learn to implement click-driven animations in React by toggling item visibility with max height, overflow-hidden, and a 1000ms transition to reveal or collapse content.

Export orders to csv by clicking an export button, posting data to the backend, handling a blob response, and downloading via a generated object URL.

Install c3 and TypeScript types, build and bind a chart, and fetch backend data with axios to map dates to x and sales to y.

Create a React profile page with two forms to update account information and password, prefill data with useEffect, and submit via redux actions to fix updates and reduce user calls.

Install redux, create actions and reducers, and configure a store to manage a user's state with a set user action. Connect React components with provider and implement immutable state updates.

Wire Redux into a React app by using connect with mapStateToProps and mapDispatchToProps to share and update the user state across components.