|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/solid-js-firebase-the-complete-guide-twitter-clone-app/
课程评论：没有评论
课程名称：Solid JS与Firebase - X（Twitter）克隆的完整指南 课程概述： 此课程旨在帮助学习者使用Solid JS构建类似Twitter的应用程序，几乎不依赖第三方组件。课程中将逐步实现几乎所有功能，包括表单验证、分页、模态弹窗、提示条等，所有功能几乎都是从零开始构建。课程通过实际项目来讲解Solid JS库的API，使学习者掌握启动任何项目所需的信心和技能。学员需具备基本的JavaScript知识才能开始本课程。 什么是Solid JS？ Solid JS是一种受React JS启发的响应式UI库，采用组件化架构、响应式数据绑定和JSX。每个组件仅执行一次，而Hooks和绑定会根据依赖项的更新多次执行。Solid采用与React相同的单向数据流哲学、读写分离和不可变接口，但其实现方式完全不同，并不使用虚拟DOM。 什么是TypeScript？ TypeScript是一种开源语言，在JavaScript的基础上增加了静态类型定义，是全球使用最广泛的工具之一。 课程内容： 学员将在课程中从零开始构建一个类似Twitter的应用程序，HTML布局部分将由课程材料提供，以节省时间并专注于Solid JS的编码。主要内容包括： - 布局准备：通过几堂课准备应用的HTML，分离布局为Solid JS组件。 - Solid JS路由：讲解如何创建一个“多页面”应用，创建个人资料、登录和注册页面的路由。 - 信号与响应性：介绍如何使用createSignal和stores创建和管理响应式数据。 - 生命周期函数：介绍如何使用onMount和onCleanup。 - 认证表单：学习如何创建响应式表单并绑定数据到表单输入。 - 自定义表单验证：从头开始创建自定义输入/表单验证和错误处理。 - Firebase/Firestore：初始化Firebase应用（数据存储）。 - Hook函数：项目的重要部分，允许将功能相关代码分离到其上下文中。 - 认证：涵盖登录、注册和注销功能，学习如何在应用访问时进行用户认证。 - 提供者和上下文：创建提供者组件，根组件可以持有数据并提供给下层组件。 - 提示条：创建应用范围的功能，用于显示消息作为 toast 弹窗。 - Glide创建：学习如何创建新glide并在主页上显示。 - 关注功能：用户可以订阅其他用户，以查看他们发布的Glide（消息）。 - Glide的分页：学习如何实施延迟加载的分页，以便在用户浏览应用时加载数据。 - 创建子glide：使用户能够回应glides，创建一个子glide作为回复。 - 模态消息组件：学习如何从头开始创建模态组件，用于在任何页面上显示消息组件。 - 部署到Vercel：将应用程序上线，任何人都可以访问。 - 持久性：解释如何在应用级别存储数据并进行持久化以供后续使用。 通过上述功能的学习，学员将掌握Solid JS的特性，了解如何架构应用程序，并能够使用Solid JS创建自己的应用。
Is this course right for you?This course covers creating a Twitter-like application with Solid JS and minimal 3rd party dependencies. Almost every feature is made from scratch without any dependency package. This covers - Form Validation, Pagination, Modal, Popups, Snackbar, and more.The course covers the explanation of Solid JS library API by working on an actual project. This course will give you the confidence and skills required to start any project.Students should have basic javascript knowledge to start working on this course.What is Solid JS?Solid JS is a reactive UI library inspired by React JS. It utilizes Component-like architecture, reactive data binding, and JSX. Every Component executes once, and the Hooks and bindings execute many times as their dependencies update.Solid follows the same philosophy as React with unidirectional data flow, read/write segregation, and immutable interfaces. It, however, has an entirely different implementation that forgoes using a Virtual DOM.What is Typescript?TypeScript is an open-source language that builds on JavaScript, one of the world's most used tools, by adding static type definitions.What are you going to work on?Students will build a Twitter-like app from scratch - the HTML layout part is not part of the course (This will be provided in the course materials to save time and focus purely on Solid JS). The focus of this course is coding and not writing HTML content. You will learn how to use Typescript language - a superset of Javascript providing additional features and a static type checker.The course starts with the preparation of the base layout of the application. All designs - images, and content are provided by the instructor.Content can be briefly summarized in these points:Layout preparation - A few lectures to prepare the HTML for your application. Separation of layout into the Solid JS components. Solid JS Router - This part explains how to create a "multi-page" application. Students will learn how to create a routing with different routing strategies and navigation to the routes. Covers the creation of Profile, Login, and Register pages.Signals & Reactivity - Explains how to create and manage reactive data with createSignal and stores.Lifecycle function - How to use onMount and onCleanupAuth Forms - Students will learn how to create a reactive form and bind the data to form inputs.Custom Form Validation - Covers creating a custom input/form validation and error handling from scratch.Firebase/Firestore - Initialization of Firebase application (data storage)Hook Functions - Important part of the projects. Allows the feature-related code to be separated into its context. Authentication - This part covers creating a login, register, and logout functionality. Students will learn how to authenticate a user upon the application visit.Provider and Context - This creates a provider component, which can hold the data on the root level and provide them to underlying components. Snackbars - App-wise functionality created with Provider to display any message as a toast popup.Glide Creation - Covers how to create a new glide and display it on the main page. From this point on, students will often work with Firebase/Firestore.Follow Functionality - Follow functionality allows users to subscribe to other users. Display Glides from Following - Subscription (Following) to other users will allow seeing the Glides (messages) they post.Paginate Glides - It would be inefficient to fetch/display all of the glides on the initial load. Students will learn how to implement their lazy loaded pagination when data are loaded as the users browse the application.Create Sub-Glides - It's essential to have a way to respond to glides. This feature enables a user to create subglides, which is an answer to the glide.Modal Messenger - Students will learn how to create a modal component from scratch. This will be used to display a messenger component on any page.Deployment to Vercel - Finally, the application will be live hosted on Vercel. Anybody on the internet will be able to visit your application.Persistence - This section explains how to store data on the application level and persist them for later use.While working on the features above, the students will learn and understand Solid JS features. They will know how to architecture applications and will be able to create their applications with Solid JS.
