Guided Project: Build a COVID Dashboard with React from edX

React.js is a declarative component-based JavaScript library for creating web-based user interfaces, while Chart.js is a JavaScript charting, or visualization, library. These frameworks can be used to develop applications which use APIs to connect with data sources. By combining the capabilities of these libraries and APIs, users can create engaging front-end web experiences.

This guided project is ideal for developers with basic JavaScript and HTML/CSS experience who want to sharpen their front-end skills.

In this hands-on guided project, you will use front-end JavaScript frameworks React.js and Chart.js to create a dynamic single-page application that visualizes data from COVID-19 Canada Open Data Working Group's API as a dashboard. You will learn how to utilize and integrate front-end frameworks with APIs to build simple but powerful applications. By the end, you will understand the fundamentals of React and be able to create your own React application from scratch.

To complete this project, you will be provided with a Cloud-based IDE from IBM that already has many libraries, such as React.js and Chart.js, preinstalled. Also, note that this platform works best with current versions of modern browsers.

What's inside

Learning objectives

After completing this project, you'll be able to:
Develop a react application from scratch
Apply and interpret jsx syntax

Describe and create a react component
Utilize react hooks to store data and work with renders/re-renders
Use third-party libraries to streamline development

After completing this project, you'll be able to:
Develop a react application from scratch
Apply and interpret jsx syntax
Describe and create a react component
Utilize react hooks to store data and work with renders/re-renders
Use third-party libraries to streamline development

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Develops front-end web development competencies by creating, visualizing, and interacting with cross-origin data using React.js and Chart.js

Suitable for beginners and intermediate developers in front-end web development

May not be appropriate for complete beginners in JavaScript

Strong emphasis on practical, hands-on experience building a real-world application

Utilizes a cloud-based IDE with pre-installed libraries, providing a convenient development environment for learners

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Guided Project: Build a COVID Dashboard with React with these activities:

Review HTML/CSS

Show steps

Solidify your HTML and CSS skills, which are foundational to React.

Browse courses on HTML

Show steps

Review the HTML and CSS syntax
Practice creating simple web pages

Follow React Tutorial

Show steps

Deepen your understanding of React concepts

Show steps

Find a well-rated React tutorial
Follow the tutorial step-by-step
Build a small React project to practice

Build a React Calculator

Show steps

Apply your React skills to create a functional project

Show steps

Plan the calculator's functionality
Implement the React components
Test and debug the calculator

Four other activities

Expand to see all activities and additional details

Show all seven activities

Solve React Coding Challenges

Show steps

Sharpen your React problem-solving skills

Show steps

Find online React coding challenges
Attempt to solve the challenges
Review your solutions and learn from mistakes

Create a React Weather App

Show steps

Build a practical React application to showcase your skills

Show steps

Design the app's interface
Integrate with a weather API
Implement React components for the UI
Test and deploy the app

Read 'React: Up and Running'

Show steps

Supplement your knowledge with an industry-leading React book

View The Road to Firebase: Your journey to master... on Amazon

Show steps

Read the chapters relevant to the course
Take notes and highlight key concepts

Contribute to Open Source React Projects

Show steps

Gain real-world experience and contribute to the React community

Show steps

Find open React projects on GitHub
Identify areas where you can contribute
Submit pull requests with your contributions

Career center

Learners who complete Guided Project: Build a COVID Dashboard with React will develop knowledge and skills that may be useful to these careers:

Front-End Web Developer

Front-End Web Developers are responsible for the design and implementation of the user interface of a website or web application. They use HTML, CSS, and JavaScript to create visually appealing and functional websites. This course can help you develop the skills you need to become a Front-End Web Developer. You will learn how to use React.js and Chart.js to create dynamic and interactive web applications. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any Front-End Web Developer.

See salaries and explore the career path for Front-End Web Developer

Web Application Developer

Web Application Developers are responsible for designing, developing, and maintaining web applications. They use a variety of programming languages and technologies to create applications that run on the web. This course can help you develop the skills you need to become a Web Application Developer. You will learn how to use React.js and Chart.js to create dynamic and interactive web applications. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any Web Application Developer.

See salaries and explore the career path for Web Application Developer

User Experience Designer

User Experience Designers are responsible for the design and implementation of user interfaces for websites and web applications. They focus on creating user interfaces that are both visually appealing and easy to use. This course can help you develop the skills you need to become a User Experience Designer. You will learn how to use React.js and Chart.js to create dynamic and interactive web applications. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any User Experience Designer.

See salaries and explore the career path for User Experience Designer

Software Engineer

Software Engineers are responsible for designing, developing, and maintaining software applications. They use a variety of programming languages and technologies to create software that meets the needs of users. This course can help you develop the skills you need to become a Software Engineer. You will learn how to use React.js and Chart.js to create dynamic and interactive web applications. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any Software Engineer.

See salaries and explore the career path for Software Engineer

Data Analyst

Data Analysts are responsible for collecting, cleaning, and analyzing data to identify trends and patterns. They use data to make informed decisions and solve problems. This course can help you develop the skills you need to become a Data Analyst. You will learn how to use React.js and Chart.js to visualize data and identify trends. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any Data Analyst.

See salaries and explore the career path for Data Analyst

Data Scientist

Data Scientists are responsible for developing and implementing data-driven solutions to business problems. They use a variety of statistical and machine learning techniques to analyze data and make predictions. This course can help you develop the skills you need to become a Data Scientist. You will learn how to use React.js and Chart.js to visualize data and identify trends. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any Data Scientist.

See salaries and explore the career path for Data Scientist

Machine Learning Engineer

Machine Learning Engineers are responsible for designing, developing, and deploying machine learning models. They use a variety of programming languages and technologies to create models that can learn from data and make predictions. This course can help you develop the skills you need to become a Machine Learning Engineer. You will learn how to use React.js and Chart.js to visualize data and identify trends. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any Machine Learning Engineer.

See salaries and explore the career path for Machine Learning Engineer

Artificial Intelligence Engineer

Artificial Intelligence Engineers are responsible for designing, developing, and deploying artificial intelligence systems. They use a variety of programming languages and technologies to create systems that can learn from data and make decisions. This course can help you develop the skills you need to become an Artificial Intelligence Engineer. You will learn how to use React.js and Chart.js to visualize data and identify trends. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any Artificial Intelligence Engineer.

See salaries and explore the career path for Artificial Intelligence Engineer

Full-Stack Developer

Full Stack Developers are responsible for designing, developing, and maintaining both the front-end and back-end of web applications. They use a variety of programming languages and technologies to create applications that are both visually appealing and functional. This course can help you develop the skills you need to become a Full Stack Developer. You will learn how to use React.js and Chart.js to create dynamic and interactive web applications. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any Full Stack Developer.

See salaries and explore the career path for Full-Stack Developer

Information Architect

Information Architects are responsible for designing and organizing the structure of websites and web applications. They use a variety of techniques to create websites that are easy to navigate and find information. This course can help you develop the skills you need to become an Information Architect. You will learn how to use React.js and Chart.js to create dynamic and interactive web applications. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any Information Architect.

See salaries and explore the career path for Information Architect

Interaction Designer

Interaction Designers are responsible for designing the user experience of websites and web applications. They focus on creating user interfaces that are both visually appealing and easy to use. This course can help you develop the skills you need to become an Interaction Designer. You will learn how to use React.js and Chart.js to create dynamic and interactive web applications. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any Interaction Designer.

See salaries and explore the career path for Interaction Designer

Product Designer

Product Designers are responsible for designing the overall look and feel of products. They work with engineers and other stakeholders to create products that are both visually appealing and functional. This course can help you develop the skills you need to become a Product Designer. You will learn how to use React.js and Chart.js to create dynamic and interactive web applications. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any Product Designer.

See salaries and explore the career path for Product Designer

UI Developer

UI Developers are responsible for designing and implementing the user interface of websites and web applications. They use a variety of programming languages and technologies to create user interfaces that are both visually appealing and easy to use. This course can help you develop the skills you need to become a UI Developer. You will learn how to use React.js and Chart.js to create dynamic and interactive web applications. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any UI Developer.

See salaries and explore the career path for UI Developer

UX Designer

UX Designers are responsible for designing the user experience of websites and web applications. They focus on creating user interfaces that are both visually appealing and easy to use. This course can help you develop the skills you need to become a UX Designer. You will learn how to use React.js and Chart.js to create dynamic and interactive web applications. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any UX Designer.

See salaries and explore the career path for UX Designer

Web Developer

Web Developers are responsible for designing, developing, and maintaining websites and web applications. They use a variety of programming languages and technologies to create websites that are both visually appealing and functional. This course can help you develop the skills you need to become a Web Developer. You will learn how to use React.js and Chart.js to create dynamic and interactive web applications. You will also learn how to use APIs to connect your applications to data sources. These skills are essential for any Web Developer.

See salaries and explore the career path for Web Developer