Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS AWS Certified Developer - Associate CompTIA Security+
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-01-16 15:56:29
30-Day Money-Back Guarantee

This course includes:

  • 3.5 hours on-demand video
  • 7 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
Development Web Development React

React Data Visualization - Build a Cryptocurrency Dashboard

Learn industry secrets of building beautifully fast dashboards with React, Context API, styled-components & CSS Grid.
Rating: 4.2 out of 54.2 (473 ratings)
2,605 students
Created by react.school _
Last updated 10/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Modern React Development with React & React Context API for State Management
  • Build a Complete CryptoCurrency Financial Reporting App
  • Styled-components v4 : Dynamic CSS-in-JS
  • HighCharts : Graphing Historical Price Data
  • CSS Grid : Responsive Layouts
  • CryptoCompare API : Fetch Real Pricing Data
  • Moment : Date Manipulation
  • Lodash : Functional Programming
  • Create-React-App 2.0 : Boilerplate Quickly
  • localStorage : Save Coins

Course content

10 sections • 41 lectures • 3h 45m total length

  • Preview04:29
  • Overview
    04:01
  • Beginner Setup
    01:45
  • Preview02:34

  • Functional Components
    Preview03:40
  • What are styled-components?
    05:00
  • Styled-components Exercises
    07:08

  • Google Fonts
    01:22
  • AppLayout
    01:55
  • AppBar
    04:29
  • Style AppBar
    06:46

  • React Context - Providers & Consumers
    08:25

  • Warning if you get: TypeError: Cannot read property 'map' of undefined
    00:19
  • localStorage
    10:41
  • CryptoCompare API
    02:41
  • [Optional] CryptoCompare API Key
    00:11
  • Page
    02:07
  • Content
    02:22
  • CoinGrid
    02:36
  • Styles.js
    00:25
  • Shared Styles
    01:10
  • Shared Tile
    06:27
  • CoinTile
    09:24
  • TopSection CoinGrid
    05:26
  • Add/Remove Coins
    11:38

  • Responsive Grid
    05:47

  • Search
    06:11
  • Fuzzy Search
    17:57

  • IMPORTANT FIX FOR "Cannot read property 'USD' of undefined"
    00:28
  • Fetch Prices
    07:11
  • Dashboard
    20:20
  • CurrentFavorite
    09:55
  • Coin Spotlight
    09:40
  • HighCharts
    04:32
  • HighCharts Theme Link (Updated)
    00:05
  • HighCharts Theme
    06:42
  • Historical Data
    17:37
  • Bugs
    02:11
  • Chart Select
    06:37

  • Light Theme
    02:46

  • Bonus Lecture
    00:02

Requirements

  • This course requires some existing knowledge of React, but many beginners have successfully completed the course.

Description

Warning: This is an advanced course for web developers already familiar with the basics of React and JavaScript!

Build a complete Cryptocurrency Dashboard with this professional React Course! 

  • Settings Page with Intro greeting

    • Greeting the user on first visit, asking them to choose their favorites

    • Providing a default 5 coins as favorites & a complete list of all coins

    • Searching for coins with fuzzy search

    • Hovering and Selecting coins

    • Adding/Removing coins on the list of favorites

    • Disabling out chosen coins

    • Confirm Favorite Coin

      • Remembers those values for the user

      • Generates dashboard prices & historical data

  • Dashboard

    • Data initializes from remembered favorites, or forwards to Settings page

    • Displays 5 major Cards for first 5 favorites and compact Cards for next 5

    • Renders a line chart for the 10 historical points on current favorite symbol

    • Select coins changes and re-fetch data, remembers current favorite

    • Select to render historical points on Date: Days Weeks Months

    • Display name and image of coin next to chart

  • BONUS: Themes

    • Easily configure the app’s theme to be dark or light


React isn't just for experts in the industry, in fact beginners should start with React, as it is truly the easiest way to build apps.

The create-react-app project is an amazing boilerplate to rapidly build apps. You no longer need to stress about Webpack, build tools, etc. This is all taken care of with the only starter project you need: create-react-app.

Every line of code is walked through, as the project is built from scratch with no steps skipped or time wasted.

You'll see how quickly things get done with the power of React Context, styled-components v4, the latest advancement in the CSS-in-JS paradigm.

With HighCharts, we'll show you how to run HighCharts with React, and customize the theme to fit our project.

Complex data modifications to our favorites entail a strict knowledge of the state flow, and so we must take care to explain every aspect of how maintaining our React state is important, and only clean variables are created.

If you have any questions at all, please reach out. We are happy to help respond to all issues relating to your journey.

Best of luck with CryptoDash, I know you'll love this project.

Who this course is for:

  • Anyone from complete beginners in web development to experts looking to build the provided project.

Featured review

Anthony Walker
Anthony Walker
406 courses
20 reviews
Rating: 5.0 out of 52 years ago
I just finished this course and it was a fun project. I had fun customizing mine a bit and enjoyed the instructor. I think the pace was perfect and the project was concise. My favorite part of the course was using the "styled-components" libraries. I will add this to my projects now. I actually was unaware of it before this course. Definitely worth while. I like these project-based courses and would love to see more from this instructor. Thank you!

Instructor

react.school _
React Project Tutorials
react.school _
  • 4.1 Instructor Rating
  • 725 Reviews
  • 3,536 Students
  • 4 Courses

Learn by building. We believe project-focused web development is the best way to prepare for a software engineering career. Our courses give you an inside look at a React developer's day-to-day duties.

React is the future. In a survey of over 20,000 developers, The State of JavaScript 2018 found that an astonishing 65% developers "have used React and would use it again", up from 58% in 2017.

We're Lead Software Engineers with decades of experience deploying and maintaining web applications in the wild. We work professionally with React, delivering high performance data visualization, advanced single page applications, and all things UI to clients.

We offer premium software projects built for practical career workflows, with dedicated support and full source code reference.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.