Guided Project
Build a COVID Dashboard with React V2
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.
Read more
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.
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
Save this course
Save
Activities
Read 'React and React Native' by Adam Boduch
Show steps
Introduces the fundamental concepts and principles of React and its mobile implementation, React Native.
View
React and React Native - Fifth Edition
on Amazon
Show steps
-
Read through the chapters on React fundamentals and core concepts.
-
Set up a development environment and try out the examples in the book.
Compile a list of React resources and tutorials
Show steps
Creates a valuable resource for yourself and others by organizing and curating React learning materials.
Show steps
-
Search for and identify high-quality React resources, such as tutorials, articles, and videos.
-
Organize the resources into a structured list or document.
Complete the React Tutorial on the official React website
Show steps
Provides a hands-on introduction to the basic concepts and syntax of React.
Show steps
-
Go through the interactive tutorial on the official React website.
-
Complete the exercises and quizzes to test your understanding.
Five other activities
Expand to see all activities and additional details
Show all eight activities
Seek guidance from experienced React developers
Show steps
Provides access to expert knowledge and support to accelerate your learning.
Show steps
-
Attend meetups or online events where you can connect with React developers.
-
Reach out to experienced React developers on social media or online forums.
Join a React study group or online forum
Show steps
Connects you with other React learners and provides opportunities for discussion and collaboration.
Show steps
-
Join a React study group or online forum dedicated to React development.
-
Participate in discussions, ask questions, and share your knowledge.
Solve React exercises on Codewars
Show steps
Challenges your understanding of React by solving coding exercises.
Show steps
-
Create an account on Codewars.
-
Solve the React katas to practice your skills.
Build a simple React project
Show steps
Applies your knowledge of React by building a practical application.
Show steps
-
Design a simple React application with a specific functionality.
-
Implement the application using React components and state management.
-
Test your application to ensure it works as intended.
Contribute to an open-source React project on GitHub
Show steps
Expands your React skills and contributes to the open-source community.
Show steps
-
Find an open-source React project on GitHub that aligns with your interests.
-
Read the project documentation and familiarize yourself with the codebase.
-
Identify an area where you can contribute, such as bug fixes or feature enhancements.
-
Create a pull request with your proposed changes.
-
Collaborate with the project maintainers to get your changes merged.
Read 'React and React Native' by Adam Boduch
Show steps
Introduces the fundamental concepts and principles of React and its mobile implementation, React Native.
View
React and React Native - Fifth Edition
on Amazon
Show steps
- Read through the chapters on React fundamentals and core concepts.
- Set up a development environment and try out the examples in the book.
Compile a list of React resources and tutorials
Show steps
Creates a valuable resource for yourself and others by organizing and curating React learning materials.
Show steps
- Search for and identify high-quality React resources, such as tutorials, articles, and videos.
- Organize the resources into a structured list or document.
Complete the React Tutorial on the official React website
Show steps
Provides a hands-on introduction to the basic concepts and syntax of React.
Show steps
- Go through the interactive tutorial on the official React website.
- Complete the exercises and quizzes to test your understanding.
Seek guidance from experienced React developers
Show steps
Provides access to expert knowledge and support to accelerate your learning.
Show steps
- Attend meetups or online events where you can connect with React developers.
- Reach out to experienced React developers on social media or online forums.
Join a React study group or online forum
Show steps
Connects you with other React learners and provides opportunities for discussion and collaboration.
Show steps
- Join a React study group or online forum dedicated to React development.
- Participate in discussions, ask questions, and share your knowledge.
Solve React exercises on Codewars
Show steps
Challenges your understanding of React by solving coding exercises.
Show steps
- Create an account on Codewars.
- Solve the React katas to practice your skills.
Build a simple React project
Show steps
Applies your knowledge of React by building a practical application.
Show steps
- Design a simple React application with a specific functionality.
- Implement the application using React components and state management.
- Test your application to ensure it works as intended.
Contribute to an open-source React project on GitHub
Show steps
Expands your React skills and contributes to the open-source community.
Show steps
- Find an open-source React project on GitHub that aligns with your interests.
- Read the project documentation and familiarize yourself with the codebase.
- Identify an area where you can contribute, such as bug fixes or feature enhancements.
- Create a pull request with your proposed changes.
- Collaborate with the project maintainers to get your changes merged.
Career center
Reading list
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
