This week would be an introduction to react and redux and any other libraries that might be used in the final project.
React is an open-source, front end, JavaScript library for building user interfaces or UI components. To start with, make sure to have React installed in your machines. You can follow this simple tutorial to do so.
If you’re a complete beginner in React, you can refer to the following YouTube videos. They’re a little long but good to get you started with it. And if you know Angular already, then it’ll be much easier for you to pick this up as well.
You can choose to watch any of these or both as well. Just remember to code alongside else you'll easily forget the concepts.
React undoubtedly has one of the best documentations and thus proves to be its best learning source. All the important concepts are explained in a coherent manner. Try coding alongside for better understanding. Follow all the blogs in the “Main Concepts” sections to get a full grasp of the concepts.
We suggest doing this tutorial to build your first react application!
React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component. It has evolved and grown alongside React, making it an excellent choice as your UI foundation. It’s documentation is the best source to learn React-Bootstrap.
To install React-Bootstrap in your React application, run the following simple command in your terminal inside your React project.
npm install react-bootstrap bootstrap
Have a look at this introduction to get started with its usage. The best thing about using React-Bootstrap in your application is its Grid System that uses flexbox as its base.
It is also advised to use SCSS instead of CSS along with this project. It is very similar to CSS and very quick to learn.
Redux is an open-source JavaScript library for managing application state and is used along with React for building the UI screens. You can install Redux following this link. The key to understanding Redux is understanding State, Reducers and Actions. Begin with this tutorial and try coding alongside (skip the portions you already know).
Since, Redux is also well documented, it is advised to follow either of these tutorial to learn Redux:
These are some additional resources to learn Redux, since it is not easy to grasp Redux at first go.
Axios is a popular, promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and Node. js. It is usually easy to use Axios for backend integration in React.
Make sure to install axios on your machine, using this link. This is a good tutorial to learn how to use axios: How to make HTTP requests like a pro with Axios. It is usually easy to learn, so this might suffice. If you still have some doubts, do read the documentation or watch this Axios Crash Course | HTTP Library tutorial.
This week would be all about implementing everything learnt to make the final application. There are a lot of video tutorials available online for designing a music application in React. However, it is recommended that initially you should try on your own and then look for the tutorials if stuck.
Read these tutorials to get started with what the actual project would look like and what you would need to do. Please don't try finding the source code as that'll be very easily avaible on GitHub or elsewhere.
Start with designing the UI of the application. Either take inspiration from the Spotify or try designing your own in Figma. Have a look at the image below for some ideation.
The most famous API used while designing music applications is the Spotify API. You can axios for calling the api and integrating with the application.
Keep in mind the folder structure to follow during implementing the application. It would be very useful later on when you design larger applications, so it is good to incorporate at an earlier stage as well.
- Keep all the reusable components in one folder called components.
- Make one folder for all the views (or pages) in your application.
- For all the Redux work, keep one folder and then make sub folders like action, reducers and store.
These are some of the video tutorials that you can follow to implement the application, all of these are complete on their own and you can follow any of these to make the project. There are a lot of other video tutorials which can easily be found online, so do search if these don't seem sufficient.