App Structure and Authentication UI
Let's implement the concepts learned in the chapter on Reagent and React Router to build a login page..... plus the magic of REPL!
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:11] In the previous chapters we have seen how reagent, reactor outer and ratum work . In this chapter we will use those concepts and implement a login page.
[00:12 - 00:19] We will not go through the actual code in the video. Please refer to the chapter text to follow these steps.
[00:20 - 00:36] Once you are done building the login component and you can see it running in your browser, you can come back to this video and see the repellent action. You might want to review the chapter on endrepell if you are having a hard time connecting your repell to your editor.
[00:37 - 00:46] I have my code running in the browser. I have the source open in VS code and VS code is also connected to the browser via repell.
[00:47 - 01:03] Since repell is a bi-directional bridge between the runtime and the editor, I can read the state of the browser right inside my editor. Not just that, I can also modify the state inside my editor and the changes will reflect in the browser.
[01:04 - 01:14] In this comment, I set the email and password and you can see how the UI changes. Comments like these are called rich comments.
[01:15 - 01:26] They document the workflow and can be committed to Git. This makes it really easy to interact with the browser without leaving your editor leading to a fast feedback cycle.
[01:27 - 01:34] The entire scope of JavaScript is available inside your editor. For example, you can alert a message.
[01:35 - 01:49] You can also inspect third party libraries which is helpful to figure out the method started exposes. In this chapter, we implemented concepts about reagent and reactor and built the outline of our login page.
[01:50 - 01:53] We also saw the repell in action in the browser runtime.
This lesson preview is part of the Tinycanva: Clojure for React Developers course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Tinycanva: Clojure for React Developers, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Tinycanva: Clojure for React Developers](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20211025023718656_CoverImage_Tinycanva%2520%25281%2529.png&w=3840&q=75)