Learn React JS, Redux, Material UI, React Router, by building 5 beautiful web apps such as Travel Advisor, Pokedex, …
What you will learn
React JS
Redux
React Router
Material UI
React Styling
React Hooks
Description
This course will teach you how to code using Reactjs framework from scratch. In this course we will be building and going through a few projects, as i believe practical examples are the way to go when it comes to learning frameworks.
In this course we will cover these projects:
- Pokedex Project: In this project we will go through the basics so that you will have a good understanding of the foundation and concepts of React JS. In this project we will get Pokémons from an API and show it to the user, the user can select a Pokemon in order to see the details for that Pokemon, he can also add that Pokemon to his favourites in order to collect a list of Pokémons. We store this favourite list in redux persist, so that the user can come back to the website and the data is kept and persisted.
- React Router: In this tutorial we will focus on how to work with the react router. It is important to grasp and learn this Library as it is the Foundation of web applications and you will use it very often.
- Todo list App: this todo list application will allow us to dive deeper into redux without complicating things. It will help you to understand the main principles and concept of redux in a simple way.
- Dad Jokes App: In this project we used an API for getting jokes and showing them to the user. We also used material UI to design this gorgeous user interface.
- Google Maps Travel Advisor App: This allows the user to discover the places around him. We will use google maps to plot the places And we will also use the travel advisor api to get the places for the user’s location.
We will use many libraries for React.Js to implement the projects such as Material-UI for making beautiful designs effortlessly, React Redux to allow us to implement a global state system which allows all components to connect to it and access the core data of the web application. We will be using Axios to get data from an API.
English
language
Content
Pokédex Project
Setting up the environment
Project overview and setup
Setting up the react router
Designing the navigation bar
Using the pokemon API to get the pokedex data
Implementing the Pokemon card component
Optimizing the pokedex screen
Implementing the Pokemon Details Screen and fetching the pokemon using the AP
Designing the Pokemon details page
Installing and setting up Redux
Implementing the add and remove favourite redux actions
Dispatching the add and remove favourite actions
Implementing the favourite pokemons page
React Router
Project Preview
Creating and setting up the project
Installing Material UI and creating the AppNavigator Component
Setting up React router and changing the background color based on the pased
Todo List Application
Todo App Project preview
Creating a react project
Cleaning the project
Installing and setting up Redux
Implementing the reducer file
Implementing the add todo component
Implementing the todo items
Implementing the add todo action in redux and storing the todos
Displaying the todos from the redux state
Deleting todo items
Completing todo items
Dad Jokes Application
Dad Jokes Project preview
Creating a React project
Styling the app container
Creating and styling the JokesList component with Material-UI
Creating and styling the Joke component
Getting data from the API and displaying it on the web app
Implementing the upvote and downvote function
Changing the emoji of the joke based on its votes
Google Maps Travel Advisor Web Application
Project Preview
Project setup
Implementing the header
Installing and implementing Google Maps into the web app
Implementing the places list component
Implementing the travel advisor API function
Fetching the places using the travel advisor API
Implementing the PlaceDetails component for displaying the places in the list
Plotting the places on the google map
Getting user GPS data and map bounds of current location
Getting the places for the user’s location
Designing a small card for each place on the map
Scrolling to the element that has been clicked on the map