React + Next JS with TypeScript

React + Next JS with TypeScript

React + Next JS with TypeScript

A practical guide to developing full stack web apps with react and next js using TypeScript

Language: english

Note: 0/5 (0 notes) 16 students  New course 

Instructor(s): Mayank Chaudhari

Last update: 2022-07-07

What you’ll learn

  • Quick refresher/crash course to strengthen fundamental modern JS and React concepts
  • Learn all key Next JS features like pre-rendering, SSR, data fetching, file-based routing and authentication
  • Learn how to build client-side and full-stack React JS apps with Next JS
  • Learn while Building real projects / apply what you learned with hands-on projects and examples

 

Requirements

  • Knowledge of basic programing concepts like conditional statements and loops
  • Familiarity with JavaScript, it is ok if you don’t know the modern JS features
  • An Open Mind and Willingness to Learn

 

Description

If you are a beginner developer or a seasoned one, it doesn’t matter. I have designed this course to cater to both the beginner and the seasoned developers. This course is designed to get you start building full stack web apps really fast and do it right and safe way. What do I mean? We will use TypeScript, a superset of JavaScript to make sure that the code we write is type-safe and we get early warnings for errors that would otherwise be hard to predict until they actually occurred in production. TypeScript provides features like static typing, enhanced IDE support, strict null checks (null errors have historically been most notorious), etc. And don’t worry! TypeScript if largely interoperable with JavaScript, though it might require some hacks at times when using js libs with Typescript.


Yes, so the course if targeting a larger audience and thus feel free to skip certain sections as per your needs. If you are a beginner developer, or new to web development some advanced concepts might not be very relevant to you immediately. Or if you are already familiar with modern JS and react JS, you might want to skip those sections. However, I have tried to make this course comprehensive as well as concise. I have tried to include as much depth and breadth of the concepts in an easy to understand yet concise fashion as possible. So, I recommend you to at least skim through the entire course with 2x speed if you like.


Next.js is a production-ready, full-stack-capable framework for React JS – one of the most popular JavaScript UI library you can learn these days!


Indeed, Next JS is a great choice for growing as a React developer and for taking your React apps to the next level!


Because Next JS is growing fast and therefore in high demand. And there are good reasons for that: Next JS allows you to build React apps with built-in server-side rendering, static rendering, page pre-rendering and automatic prefetching pages related to the current page. Building great user experiences and search engine friendly (SEO!) React apps has never been easier!


In addition, Next JS makes building full-stack React apps (frontend + backend code combined in one project) extremely easy as well! Blend client-side and server-side code and build a Node JS-based API side-by-side with your frontend React apps. It’s a breeze with Next JS!


This course contains a few explanatory lessons, a few challenges, quizzes and  assignments and a lot of hands on coding and screencasts. First we introduce you to next js, give a brief introduction to get you motivated about what you are going to accomplish after completing this course. Then we jump into learning/refreshing modern JS practices that are most commonly used in React community. We will do all these right in our Next.JS app setup! So, you will already start building the complete websites with Next.js even before we start digging into the Next.js concepts. Thirdly, we will cover React JS concepts with fair enough depth. We will stick just to React and will not cover things like React Router, Redux, the commonly used webpack configurations etc., which should be a part of a complete React course. However, when using Next JS, you really don’t need any of these for most cases. Or you need to use Redux or manipulate webpack configs directly only in rare cases. Finally, we will dig into the Next JS features and master them while creating multiple projects.


This course will take you from a mere acquaintance to React and Next JS to advanced Next JS full stack developer in no time!


We’ll start at the very basics, no Next JS, react or modern JS knowledge is required at all. Though you should be familiar with the basic programing concepts and JavaScript. We will learn both in theory as well as with multiple real projects where all concepts will be applied step-by-step.


After finishing this course, you’ll be well prepared to build your own Next JS projects from the ground up and apply for Next JS positions!


In detail, this course will cover:

  • What is NextJS? And why would you use it?

  • Why is just React (in many cases) not enough?

  • Creating NextJS projects from the ground up & understanding these projects

  • Working with file-based routing

  • Adding dynamic routes and catch-all routes

  • Implementing different forms of page static-rendering and server-side rendering

  • Working with data and adding data fetching + pre-fetching to your apps

  • Pre-generating dynamic and static pages

  • Adding optimizations like metadata to pages

  • Optimizing images with the NextJS Image component

  • Building fullstack apps with API routes

  • Managing app-wide state with React context (in Next JS apps)

  • Multiple complete apps where we’ll apply all these core concepts!

  • A complete React.js crash course/refresher module

  • And much more!


I can’t wait to start this journey together with you! 🙂

 

Who this course is for

  • Beginner or seasoned web developers who want to build highly optimized, SEO friendly production ready apps
  • Web developers in general, who want to work with one of the most popular and in-demand tech stacks
  • Developers / Students looking to brush up on or learn essential modern JS, react JS and Next JS concepts

 

Course content

  • Getting Started
    • Why Next.js
    • Why TypeScript
    • Important TypeScript Features
    • (Optional) Old dev’s perspective and controversies on TypeScript
    • Prerequisites
    • Scaffolding Next.js app with TypeScript enabled
    • (optional) Demo – file system based routing
    • (optional) Demo – API routes
    • (optional) Demo – Prerendering
    • Add TypeScript to existing Next.js project
    • How to get best out of this course
    • Check your understanding
  • Modern JavaScript crash-course
    • Section Introduction
    • Block Scope – understand the difference between var and let keywords
    • Function Scope
    • Constant variable references vs immutability
    • Arrow Functions
    • Variable and function shorthand in object literal
    • Destructuring, spreading and rest-spreading
    • String templates
    • Classes
    • Promises and async-await
    • Test your modern JS skills
  • TypeScript crash-course
    • (optional) TypeScript overview
    • Configuring TypeScript
    • Basic Types
    • Automatic Type Inference, Union Types and Intellisense enhancement
    • Arrays and Tuples
    • Enum
    • Custom types and interfaces
    • Read-only attributes
    • Function Types and void
    • Access modifiers
    • Generics
  • Fundamental concepts of React.js
    • React.js overview
    • (optional) Why components?
    • JSX – syntactic sugar for writing React code
    • JSX Characteristics
  • Create To Do App (Class components + JSX fundamentals)
    • Introduction
    • Source code and resources
    • Our first class component
    • Embedding comments and expressions in JSX
    • List rendering
    • Conditional rendering and visibility
    • Decomposing into smaller components and using props
    • Declaring prop types for class components
    • Fragments
    • Event Handling; Props are immutable
    • Reactive Updates using state; using constructor
    • Passing callbacks to child components + binding methods in classes
    • Adding Styles: inline, global CSS and CSS modules
    • Practice styling JSX
    • Handling user input
    • Using ref (React.createRef)
    • Controlled Input
    • Life cycle methods
    • Section Sumarry
  • GitHub Cards App (Function components and React Hooks)
    • Conceptualizing the app that we are going to create
    • Introduction to functional components and React hooks
    • Scaffolding Next.js project with pnpx and adding SCSS support
    • Creating Functional Components
    • Props in functional component
    • Nested styles and “&” in SCSS
    • State in functional components
    • Adding side effects
    • Accessing DOM elements with useRef and fetching data with fetch
    • useContext to broadcast props to all children
  • Enhancing GitHub Cards App (Next.js file based routing & meta data)
    • Adding meta data to enhance SEO
    • Understanding Nested Routes
    • Dynamic routes, slugs and useRouter hook
    • Client side navigation using Link component
    • Nested dynamic routes
    • Code splitting and prefetching
    • Adding static assets
  • Turborepo: Brief introduction
    • Turborepo: high-performance build system for JavaScript and TypeScript codebase
    • Creating New Turborepo
    • Move GitHub card app to monorepo
    • Utilising common package in monorepo setup
  • Create blog (Pre-rendering and Data Fetching)
    • Section Introduction
    • Set up the Blog App in Turborepo
    • Pre-rendering concepts
    • Listing blogs based on file names using “fs” module
    • Statically generating dynamic routes (getStaticPaths)
    • Rendering blogs using ReactMarkdown
    • Enhancing ReactMarkdown with components
    • Styled Components – a handy CSS-in-JS library
  • Add likes feature (API routes, Prisma, Postgre database)
    • Section Introduction
    • Add like button
    • Set up Prisma and Postgre database
    • Create dynamic API routes
    • CURD operations on database using Prisma
    • Debounce API calls for better UX and performance
  • Challenge: Create your portfolio using Next.js and Linaria
    • Introduction to Linaria
    • Setting up linaria in Next.js
    • Linaria Basic Concepts
    • The Challenge
    • Introduction to CollapsibleStickyHeader from sticky-section-header library
    • Adding global styles with Linaria
    • Hint: Creating IQBadges, adding gentle animations, code organization
    • Introduction to StickyHeader, hint for organizing data and reusing the UI logic
    • Hint: Implementing dynamic backgrounds
    • Hint: Making portfolio mobile and print friendly
    • Deploying to static hosting service: Firebase Hosting

 

React + Next JS with TypeScriptReact + Next JS with TypeScript

Time remaining or 93 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate