Frontend Web Development React/Angular/Vue

Week 1 is going on !!!!

How to get Work

We will create issues according to Roadmap.You guys can comment under the issues in which you are intrested to work on alon with in which type you are going to do it.We are following first come first method.

• You can find the issues at https://github.com/girlscript/winter-of-contributing/milestone/3

Imp

• Contributers are not allowded to create issues

Important Things before making PR

Guys Please Take Care that ,while making a PR please follow these instructions

1. Please add Frontend With Framework In Beginning of your PR Heading,as in issues

• (eg: Frontend With FrameWork - your pr heading)

3. Send your PR Link in discord general chat of our domain
4. Add your file in your domain folder only(eg:For React there is a React folder)
5. Inside your domain folder there are Week based folder's
6. Add your PR in that folders according to the Week(you can find which week is going on now by looking at the top of this Readme.md)

Otherwise your PR will be lost in tones of PR.Please follow this Trend

Road Map

Angular Road Map

1) Components (Week-1)

• Creating a component using the Angular CLI
• Creating a component manually
• Component LifeCycle
• Component Interaction
• Sharing Data between parent and child directives and components(@Input , @Output , Event Emitter)
• Dynamic Components

2) Templates (Week-2)

• Interpolation
• Template Statements
• Pipes
• Property Binding
• Event Binding
• Two Way Data Binding

3) Directives (Week-3)

• Built in Directives
• Structural Directives
• Attribute Directives

4) Dependency Injection (Week-4)

• Injecting Services

5) Routing and Navigation (Week-5)

• How to generate an application with routing enabled?
• Defining a route
• Getting Router Info(Activated Route)
• Wildcard routes
• Setting up Redirects
• Nesting Routes
• Lazy Loading

6) Forms (Week-6)

• Types of Forms-Template, Reactive
• Difference between both
• Setup in Template Driven Forms
• Setup in Reactive Forms
• Form Control, Formbuilder

7) HTTP Client (Week-7)

• HttpClient Module
• Setup for server communication
• Observables
• Requesting Data from server
• Error Handling
• Get,Post,Put requests
• Interceptors

8) CLI commands (Week-8)

• Create a component
• Create a service
• Create a module
• Build the application
• Aot,jit

React RoadMap

Week 1

• JSX
• Babel
• ES6 template literals
• JSX Attributes and Styling react elements
• npm
• Creating React App

Week 2

• Components
• Class components
• Function components
• import,export,modules
• React Props vs State
• Mapping data to components

Week 3

• List and Keys
• Composition vs Inheritance
• Basic Hooks : a) useState b) useEffect
• Some more Hooks (As per recommended by Mentor)

Week 4

• Conditional rendering
• State in React-Declarative and Imperative programing

Week 5

• Common hooks(useRef,useContent etc)
• Refs
• Writiing your own hooks *High order Components
• Fibre Architecture

Week 6

• Multi page react app
• Context
• Render Props

Week 7

• state management in react
• importance of state managment in react
• Redux

Week 8

• REST API Calls
• Axios
• Unfetch
• Superagent

Week-9

• Testing
• Jest
• React Testing Library

Vue RoadMap

1) Introduction (Week-1)

• VueJS Intro (uses, benefits, scalability)
• Introduction to VueJS using CDN
• Installation using NPM and about Vue CLI
• Intro to Lifecycle Diagram and Lifecycle Hooks (Theory explanation)
• Installing Vue-DevTools
• Vue Components

2) Data Manipulation in VueJS (Week-2)

• Data and Methods
• Data Manipulation in VueJS (using methods)
• Computed Properties
• Watchers
• Filters

3) DOM Manipulation (Week-3)

• Inline style manipulation
• Class binding
• ref keyword in VueJS

4) Directives (Week-4)

• Conditional rendering (v-if / v-show)
• One way data binding (v-bind) & Two way data binding (v-model)
• Event Listening (v-on)
• List rendering (v-for)
• HTML rendering (v-html)

5) Event Handling (Week-5)

• Event Listening and Handling in VueJs (using v-on)
• Emitting events
• Creating custom Events

6) Component reusability (Week-6)

• Props
• Slots
• Child Component Data manipulation using events (Child to Parent)
• Component Lifecycle hooks methods
• Dynamic Components

7) Plugins (Week-7)

• Plugins introduction and installation in VueJs (Vue Router & Vuex)
• Creating Routes (Static and Dynamic)
• Nested Routes
• Using Routing Guards
• History Mode in routes
• Route Meta fields
• Handling routes Programmatically

8) State management (Week-8)

• Need of State Management
• Workflow of State Management in Vue Js
• Vuex Installation
• Implementation of State Management using Vuex (states, getters, actions, mutations and modules)