Getting Started
Learn about React and the prerequisites required for this course.
React is an open-source JavaScript front-end library that allows developers to use UI components to create single-page applications (SPA) and user interfaces. These single-page applications could be anything, but in this course, we'll learn how to create an e-commerce application with React and Hygraph.
Hygraph is a headless content management system (CMS) that we’ll use to store and organize our products. Then we’ll utilize these products using GraphQL in our React application.
We’ll break each section down into lessons, making it easier for you to grasp and build similar or even more complex applications in the future.
Prerequisites
To fully understand this course and each lesson that comes with it, there are some prerequisites you’ll need.
Fundamental understanding of HTML, CSS, and JavaScript
Understanding HTML and CSS is critical because we’ll be writing HTML markup as JSX in React and using CSS to style our application for easier interaction and ensuring our application is appealing to users.
HTML is an abbreviation for HyperText Markup Language. It is the language used to create detailed instructions about a web page's style, type, format, structure, and markup before it displays to you via the internet/web.
CSS is an abbreviation for Cascading Style Sheets and is used to enhance the appearance of a web page. Adding CSS styles to a web page makes it more pleasant for end users to view and use.
JavaScript is the programming language that allows our website to "think and act." In general, it enables us to implement complex features on web pages, such as displaying timely content updates, interactivity, animation, and many others. When a web page does more than sit there and show static information for us to see, that's when we realize it was written in JavaScript.Also, because React is a JavaScript framework, understanding JavaScript and some of its core concepts is required to work effectively with React.
Some experience or knowledge of React
This course is not a beginner's guide to learning React, so a basic understanding of React and how it works is necessary before taking this course. Concepts such as JSX, React hooks, routing, directory structure, and so on are essentials for learning how to interact with JavaScript.
Even though this guide is slightly advanced, we’ll still sufficiently explain most of the topics and concepts covered in this course.
Additional prerequisites
In this course, we’ll build a React application locally on our PC, so it’s a good idea to keep the following few points in mind:
You must have Node.js and NPM installed on your machine.
You also need to have a basic understanding of how the terminal operates.
Learning outcomes
In this code-along course, we’ll build a complete e-commerce application (lesson by lesson). In the end, we’ll have an e-commerce application that fetches its content via GraphQL, which will enable us to implement a carting management system using Snipcart.
While building this application, we’ll learn the following:
Advanced routing: We’ll learn all forms of advanced routing, including dynamic routing, URL params, programmatic navigation, and many more.
Data consumption: We’ll learn how to consume data with GraphQL by fetching content from Hygraph..
Headless content management system (CMS): We’ll learn how Headless CMS works by creating a Schema to store all our products (text and images) with Hygraph.
React Hooks: While fetching content with GraphQL, we’ll use the
useState()
anduseEffect()
hooks from React.Snipcart: We’ll use Snipcart to handle all cart management operations such as checkout, add to cart, cart summary, and many others without creating this from scratch.
Deployment: By the end of this course, we'll want to have our application live for others to see what we've created. We'll learn how to deploy our code by pushing it to GitHub and then deploying it with Netlify.
Note: Some of these technologies may be unfamiliar to you; don’t worry. We’ll walk you through them step by step.
Project demo
Here's an example of what we'll be building in this course. Click the “Run” button to load our e-commerce application. Once loaded, you can always click on the live URL to open the application in a new tab in your browser.
PNG IHDR ¾ "%* gAMA ±üa cHRM z&