Coder Social home page Coder Social logo

chadwyck242 / songs Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 1.0 162 KB

Songs mini project for Stephen Grider's Modern React with Redux [2019] course on Udemy

HTML 28.68% JavaScript 71.32%
react redux jsx es6 semantic-ui lifecycle udemy stephengrider single-page-app

songs's Introduction

Songs App

A follow along React application from Stephen Grider's Modern React with Redux (2019) Udemy course, which can be found here

App Description

Songs app is mainly a React-Redux demonstration lesson, in that we would learn how to implement the React side of an application, then the Redux side of the application, and as Stephen Grider pointed out directly: how to get React and Redux then to work together. The application is simple and only displays a list of songs on one side that when selected by clicking the button, will open a song detail component for that particular selection on the other side. The title of the song and a duration is also given, and all the songs provided are based on 90's hits!

Learning Objectives and Outcomes

  • As before, we planned the Component Hierarchy of our React application. This included what components were needed and the roles they play.
  • Next we decided what is required in terms of State, and how we would use Redux to handle our state and other data that flows through our app.
  • We would next cover the concept of React-Redux, and exactly how we get these two to work together.
  • We would need to learn and practice further the concepts of Provider, Connect, Action Creators, Redux Store and Reducers. These are concepts that take some time and repeated practice to master.
  • A very important concept we would need to cover is the mapStateToProps function, and all the interesting syntax and mechanics of getting that to properly direct data and objects between components.

Other Songs App Info

  • We used Semantic UI for the user interface and styling of the app.
  • Of course we used Redux as well as React-Redux. Two different websites that look exactly the same...
  • All my development is done in the wonderful VSCode.
  • Got to pick on 90's music a little, though maybe Stephen Grider went a little overboard with his reactions :)

Quick Reflection

Providers, Reducers, Connects, Action Creators, Dispatch, mapStateToProps, Redux Store Oh My! All of this was covered once again, but in much greater detail than the mini application we had just completed prior to this current Songs app. Stephen Grider mentioned that using React-Redux for this particular application was perhaps overkill, but the point was allowing us some practice using React-Redux together for the first time, and not be bogged down with the workings of a more complex application quite yet. But the next section of this course, following a nice exercise, we will finally be getting a taste of a more complicated application that will require some readily apparent reasons to use React and Redux together.

Just as a note, I do not think using this single Udemy course to learn React-Redux will be enough, so I am collecting a nice Bookmark list of materials, including the documentation of both Redux and React-Redux as well as tutorials that come under the FreeCodeCamp heading over at Medium. I am sure this is going to be some journey!

songs's People

Contributors

chadwyck242 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.