Sr. No. Tasks Sub tasks Duration (Days) Status
Week 1 1 Basics of javascript "- Javascript intro,
- DOM selectors and its modification.
- Variable declaration and difference between var, let and const
- Loops, Functions, Conditional statements etc.
- Playing with Data Structures like Array, Objects, Sets, Strings
- Task should be assigned by the trainer for changing and manipulating data structures.
- Introduction to be provided by trainer.
- Browser javascript console, Networks, Application and Elements tab.
" 1
2 Basics of a web app "- Understanding JSON
- Understanding the client-server communication over the http protocols.
- Learning the basic methods of HTTP request and their actions
- Exploring Application Programming Interface(API's) or web services, its advantages
- Difference between REST and SOAP web services, AJAX.
Task:
- Creating an HTML page using Bootstrap.
- Creating multiple buttons
- Write dummy web services over platform (https://www.mockable.io/a/#/space/demo5361279) .
- Call different web services on click of these buttons throwing some data from the web-services in list form.
- Create HTML using the data from the service and update the DOM using the plain javascript.
" 1
3 Advanced Javascript "- Understanding the differences and concepts between NodeJs, NVM, and NPM.
- NVM, Node and NPM installation,
- Understanding packages/modules in Js.
- Understanding the file system with Js with basic javascript syntax.
- Creating modules.
- Requiring multiple files/modules in a file and playing to understand the order of execution.
- Understanding the asynchronous process of execution of JS whenever there is an external system involved.
l system involved.
" 1
"- Working tough with asynchronous programming and understanding its perks/benefits compared to traditional programming languages.
- Using callbacks inside callbacks to achieve the synchronous order of execution for the desired result.
- Understanding the callback hell and the process to evade from it.
- Learning about EcmaScript, its versions and its advantages over plain javascript(vanilla script)
- Exploring promises of ES6.
- Explore more about ES6 features of javascript and trying to change the day 2 task pattern to use ES6.
- Understanding Babel and its advantages.
- Exploring async/await of ES7 and other features of latest ecma versions and using the same.
- Understanding webpack and its uses.
" 1
4 Basics of ReatJs "- Node and NPM installation,
- React installation,
- React Intro,
- Virtual DOM concept in React and its advantages.
- React life cycle methods.
- Render function of a component and its use.
- Creating components and classes in using react to do the day 2 task.
- State, Props and differences between them.
- Setting State or changing the state.
- Explore about react dev tools and debugging in react.
" 1
Week 2 5 Advanced Topis "- Functional Component,
- Class Components,
- Pure components,
- defaultProps, propsType, Error Boundry
- Using all lifecycle methods inside the component (ComponentDidMount, ComponentDidUpdate, shoudlComponentUpdate" 1
6 Component lifecycle, React Routing "- Intro to React Routing.
- Route, Router, Switch, Providers.
- Creating multiple routes in the application
- Passing on data when changing routes.
" 1
7 Create simple To Do application with ReactJS "- Display To Do list using only react
- Use bootstrap with a proper design.
- Use proper success messages and error messages in the component.
- Add item in To Do list,
- Remove Item from To Do list.
" 1
9 Create a simple Book Shop App by using React Routing "- Create this app with react only using predefined dataset.
- Display list of different books
- Use Book type filter on the list view.
- On click of book diplay the book details by using React routing and React lazy loading concept.
" 1
10 Git "- Learn about Git version control, repositories, branches, commits etc.
- Update your latest code to any of the git repositories.
- Learning how to create the react production build hosted using any web server Ex-(Apache, Nginx)" 1
REACT - ADVANCE TOPICS
Week 3 1 HOC, context API, Hooks "- Higher order components,
- Context API.
- Intro to React Hooks,
- Import components using React lazy loading, e.g suspense
- Convert above TODO application with hooks." 1
3 Redux "- Redux introduction,
- Store,
- Reducers , Actions, data flow, using with ReactJs
- Redux Thunk/Saga
" 1
4 Create an application using redux Modify existing TODO application using redux 1
5 Miscellaneous Topic "- Refs and the DOM,
- Forwarding Refs,
- Uncontrolled components,
- Context API with HOC" 1
6 React application from scratch(without using create-react-app) - Create a CRUD application using all the above topics with proper directory structure and routes. 1
1 Blog application "- Create a blog application with express framework using postgreSQL as a database.
- Use AngularJs as frontend technology for the application.
- Use proper authentication techniques,
- The users boarded should have proper authorization for creating or editing resources.
- Flow
- User should be able to write a blog and submit.
- The submitted blogs should be approved only by Admin users and once approved the blog is displayed as public.
- A blog should have tags which can be added to it.
- Comments feature on the blog details with having a reply comments to the first level comments.
"
# JS-training