SUPPOSE You decided to learn x framework, You open youtube or any search engine you prefer to search for any tutorials related to this “x” framework and suddenly after 30 min you scream “Eureka”, I think this framework is similar to my previous framework and you are right you don’t have to learn it from scratch, In this post I will show to you my experience to learn frontend frameworks and how those frameworks are closed to each other.

Every time you decided to learn a front end framework, you must hear those terms over and over ( components, routing and managing state ) Let’s break it down.

Components

The heart core for any framework building components makes it reusable.
Most modern frameworks using JSX or HTML template engine,
All frameworks provided lifecycle hooks that provide visibility into component life moments like creates, renders, destroy and the ability to act when they occur.
Routing
Nowadays most modern frameworks provided API to create and manage client-side routing.

Managing State

All freameworks are built with a way for components to internally manage their state without any need for an external library or tool.
Many Frameworks are built with a way for components to share same state for example (Angular has a Service, React now has Context API).
Sometimes frameworks solutions are not enough especially when your state is huge so you can consider using a library like redux.
After Finishing learning basics let’s get our hands dirty and building projects.

Building projects

In order to understand aspects of something you need to know it well and this knowledge does not come from reading books or watching visual lessons only, the real test comes with a real problem in real life, during this article I bring you some ideas for projects covering many aspects of any frontend framework you choose.

Notes:

The projects listed in this subject are gradual in their difficulty and each project adds to its predecessor.
The order of projects from the youngest to the most comprehensive.

1. Find & Display ( clone )

The first application which is commonly used is the clone of any known site using its public API, try to build a simple search bar with drop-down list holds results coming from endpoint API, check returning data before displaying it like if there is an image or not to display.

Endpoint API Example:

- Github API

- OMDb API

- Spotify Web API

- wunderground API

- reddit API

What you will learn:

• Using HTTP client to make a request to endpoint API.
• Using keyboard event listener, for example, once a user hit enter call -endpoint API to fetch result data.
• Learn how to display single data or group of data.
• Styling your display with Interpolation data.
• Structural your display.
• Master-Details: list results add a link for each item in result to the item details page.
• Learn how to pass data from master page to a details page.

2. Auth App

some of this endpoint API I mention in the previous section require some authentication so in this section try to add or build another app with login /register page and if the user is login redirect him or her to the user homepage and prevent guest users from pages that require the user to be logged in.

What you will learn:

Route guard: some pages require authenticated user only.
How to send and save JWT (JSON web token) to make requests that require an authenticated use.

3. CRUD App

create, read, update and delete app is the most popular front-end app in this section you can build this app offline using local storage or using online service like Firebase or even integrated it with a back-end framework.

Project Examples:

-Bookmark app.

-To-Do App.

What you will learn:

Validate user input in form and display error if the user inserts wrong data.
How to make put, delete, post and get HTTP request.
Integrate your app with any back-end framework.
Try to add auth capabilities for your back-end framework.

4. Chat App

In previous sections, all the requests to the back-end are unidirectional you don’t have a problem managing your app state there, but in this section, we try to build chat app using web sockets and it’s bidirectional and we can’t wait for the response to update the view, we need another way to manage our client-side state.

What you will learn:

learn how to use manage state solutions like redux for react, ngrx for angular 2+ or vuex for vuejs and how to integrate it with your client-side app.
Make your app more reactive (listen to network state and notify the user with the new message).