Learning Full-Stack JavaScript Development: MongoDB, Node, and React
3h 36mAdvanced2022-12-21
Authors
Samer Buna
Polyglot Coder and Instructor
Course details
Learn by doing! Learn full-stack JavaScript development by building a web application with MongoDB, Node.js, and React.js. Learn how to use Node as a web server and an API server, how to consume data and build user interfaces with React, and how to read and write data with a MongoDB database. React allows you to build full-featured, data-driven applications faster and more efficiently than what is possible with JavaScript alone. Samer Buna introduces modern JavaScript programming concepts, with an emphasis on functional methods and open-source tools. The lessons are almost completely hands-on, with live coding demonstrations that bring the concepts home.
Skills covered
Express.jsMongoDBNode.jsReact.jsJavaScript FrameworksMetaFull-Stack Web DevelopmentDatabase DevelopmentFront-End Web DevelopmentDatabase ManagementLearningWeb DevelopmentProgramming LanguagesOpen SourceSoftware Development
Concepts
Introduction
- Learning full-stack JavaScript development
Getting Started
- Project repo and NPM
- Express and TypeScript
- Middlewares and templating
- Node modules
- MongoDB and Docker
- React and webpack
- ESLint
React Fundamentals
- Why React
- JSX syntax
- Function components and props
- State and event handlers
- Component life-cycle and side effects
Working with Data
- Creating a mock API endpoint
- Using an API endpoint from the browser
- Rendering a list of items
- React s key for items in a list
- Fetching data while React is rendering
- Server-side rendering of the root path
- Sharing data between server and client
- Fetching data from MongoDB
Routing and History
- Invoking component actions in children
- Displaying a different root component
- Fetching data after navigating to a new view
- Handling browser navigation history
- Server-side rendering of a custom path
- Fetching data conditionally
- Navigating on link click
Persisting Data
- Handling data in an array
- Reading form data with the DOM API
- Understanding HTTP request methods
- Using an API endpoint to update data
- Updating UI based on API response
- Project challenge
- Next steps