\newline Logo
Left arrow icon.
Go to Preview Lesson
Go to Preview Lesson
LESSON 10.3How to Add Ant Design UI Framework to React
Course Thumbnail of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL.TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
  • MODULE 1
    Introduction
    • LESSON 1.1Build React Apps With GraphQL, MongoDB, and TypeScript
    • LESSON 1.2Syllabus
    • LESSON 1.3How To Go Through The Course
    • LESSON 1.4How to Setup a VS Code React Developer Environment
    • LESSON 1.5Part One Welcome
  • MODULE 2
    Getting Started With Our Server
    • LESSON 2.1Module 1 Introduction
    • LESSON 2.2What is Node? Intro to Node File System with JavaScript fs
    • LESSON 2.3How to Run Node.js With JavaScript Code
    • LESSON 2.4How to Build a Minimal Express.js Server With Node
    • LESSON 2.5How to Use Nodemon to Auto Reload Node.js
    • LESSON 2.6What is TypeScript? TypeScript vs JavaScript for Development
    • LESSON 2.7How to Add TypeScript to a Node.JS Server With ts-node
    • LESSON 2.8How to Compile TypeScript Code With tsc
    • LESSON 2.9Automatically Check TypeScript Code for Errors With ESLint
    • LESSON 2.10Build a Mock Array of Data Objects for TypeScript
    • LESSON 2.11How to Build GET and POST Routes With Express Router
    • LESSON 2.12Module 1 Summary
  • MODULE 3
    Comparing APIs
    • LESSON 3.1Module 2 Introduction
    • LESSON 3.2What is GraphQL?
    • LESSON 3.3GraphQL vs REST APIs - A Comparison With GitHub's APIs
    • LESSON 3.4A Guide to GraphQL Schema and Data Types
  • MODULE 4
    Using Apollo Server
    • LESSON 4.1Module 3 Introduction
    • LESSON 4.2How to Add Apollo Server for a GraphQL API in a Node.js App
    • LESSON 4.3Build a GraphQL Schema And Test it in GraphQL Playground
    • LESSON 4.4How to Query GraphQL Data And Mutate Data
    • LESSON 4.5How to Use GraphQL Schema Language
    • LESSON 4.6Module 3 Summary
  • MODULE 5
    Storing Data
    • LESSON 5.1Module 4 Introduction
    • LESSON 5.2SQL vs NoSQL - An Intro to MongoDB
    • LESSON 5.3How to Create a MongoDB Cluster in MongoDB Atlas
    • LESSON 5.4How to Connect Node.js to a MongoDB Database
    • LESSON 5.5How Add TypeScript Types to a MongoDB Database
    • LESSON 5.6Use Environment Variables With Node.js and MongoDB
    • LESSON 5.7How to Seed Data to a MongoDB Database
    • LESSON 5.8How to Use GraphQL to Query a MongoDB Database
    • LESSON 5.9How to Use lodash merge to Modularize GraphQL Resolvers
    • LESSON 5.10Module 4 Summary
  • MODULE 6
    Getting Started with React
    • LESSON 6.1Module 5 Introduction
    • LESSON 6.2React vs JavaScript - Reusable Components and JSX
    • LESSON 6.3How to Create a React App With Webpack
    • LESSON 6.4An Overview of the create-react-app File and Folder Structure
  • MODULE 7
    Building out Listings
    • LESSON 7.1Module 6 Introduction
    • LESSON 7.2How to Build Your First React Function
    • LESSON 7.3How to Define React TypeScript Props
    • LESSON 7.4An Intro to React Functional Components With TypeScript
    • LESSON 7.5Making GraphQL Requests With POST and fetch
    • LESSON 7.6How to Type Data from GraphQL With TypeScript Generics
    • LESSON 7.7How to Delete MongoDB Listing With GraphQL API
    • LESSON 7.8Module 6 Summary
  • MODULE 8
    GraphQL and Hooks
    • LESSON 8.1Module 7 Introduction
    • LESSON 8.2What are React Hooks? An Intro to Reusing Logic in React
    • LESSON 8.3How to Use the React useState Hook
    • LESSON 8.4How to Use the React useEffect Hook
    • LESSON 8.5How to Customize the React useQuery Hook
    • LESSON 8.6How to Manually Refetch React useQuery Hook Data
    • LESSON 8.7Customize GraphQL Errors with React useQuery Hook
    • LESSON 8.8How to Customize the React useMutation Hook
    • LESSON 8.9How to Use React's useReducer Hook to Handle State
    • LESSON 8.10Module 7 Summary
  • MODULE 9
    Introducing React Apollo
    • LESSON 9.1Module 8 Introduction
    • LESSON 9.2Build an Apollo Client With apollo-boost and GraphQL
    • LESSON 9.3How to Replace useQuery and useMutation With Apollo Hooks
    • LESSON 9.4How to Autogenerate GraphQL Types With Apollo CLI
    • LESSON 9.5Module 8 Summary
  • MODULE 10
    Styling with Ant Design
    • LESSON 10.1Module 9 Introduction
    • LESSON 10.2An Intro to CSS UI Frameworks With Ant Design
    • LESSON 10.3How to Add Ant Design UI Framework to React
  • MODULE 11
    Part One Conclusion
    • LESSON 11.1Part One Conclusion
Right arrow icon.
  • Go Pro
  • Courses
  • TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
  • Part One Conclusion
  • Go To Previous Lesson
    How to Add Ant Design UI Framework to React
    How to Add Ant Design UI Framework to React

    Throughout Part I of the course, we haven't made any changes to the presentation (i.e. CSS) of our client code. In this lesson, we'll introduce and use the Ant Design React UI framework to improve the appearance of our client application.