How I learn any front-end framework

How I learn any front-end framework

How I learn any front-end framework. 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 ...

Originally published by  Islam Muhammad at dev.to

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 ServiceReact 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:

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).


Originally published by  Islam Muhammad at dev.to

==========================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Angular 8 (formerly Angular 2) - The Complete Guide

☞ Complete Angular 8 from Zero to Hero | Get Hired

☞ Learn and Understand AngularJS

☞ The Complete Angular Course: Beginner to Advanced

☞ Angular Crash Course for Busy Developers

☞ Angular Essentials (Angular 2+ with TypeScript)

☞ Angular (Full App) with Angular Material, Angularfire & NgRx

☞ Angular & NodeJS - The MEAN Stack Guide

React vs Angular vs Vue.js by Example

What is the best JavaScript framework, library that everybody is learning in 2019? React, Angular or Vue? Watch this video to find out.

With all of the various javascript *libraries *and frameworks, you might be a little bit confused as to where to begin. Right now, the three powerhouses in the javascript world are React, Angular and Vue.js.

Sometimes, the best course of action is to make up your own mind based on your own experiences.

And that's exactly what this course will aim to do. We're going to design and develop a single app in React, Angular and Vue.js.

The goal here is to help you determine which workflow you like best based on your own needs and preferences.

The following is the basic flow of what we're going to learn in React, Angular, and Vue.js:

  • Installing & Getting Started with a Project
  • Component Structure
  • Templating
  • Styling
  • Integrating CSS Frameworks
  • Working with API's

This will help you get a solid start with each of these javascript technologies, to the point at which you will walk away with your own opinions.

So, if you're ready to learn, let's get started!

What you’ll learn

  • Create a React App
  • Create an Angular App
  • Create a Vue.js App
  • Create an Adobe XD Prototype Mockup
  • Understand the core differences between React, Angular and Vue.js

Are there any course requirements or prerequisites?

  • HTML
  • CSS
  • Basic Javascript
  • Adobe XD (Experience Design) for Mockup Process (Optional)

Thanks for watching

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

What are the differences? Do they each have specific use contexts?