FRONT-END WEB DEVELOPMENT WITH REACTJS
0 likes2,057 views
The document provides information about a training course on front-end web development with Reactjs offered by NordicCoder. It details what the course will cover including React basics, advanced React topics like data handling and the React ecosystem, and tools like Webpack. It also introduces the instructor, outlines the course schedule over 10 weeks, and describes the final project of building an online shopping cart.
![Introduction
export class Instructor extends React.Component {
render() {
return (
<Profile>
<Fullname>Trần Phong Phú</Fullname>
<Work>TA at Sendo.vn</Work>
<Work>React Instructor at NordicCoder</Work>
<Email>phu.tran[at]nordiccoder.com</Email>
<Phone>0937.942.974</Phone>
</Profile>
);
}
}](https://image.slidesharecdn.com/week1-officially-180903025637/85/FRONT-END-WEB-DEVELOPMENT-WITH-REACTJS-7-320.jpg)
FRONT-END WEB DEVELOPMENT WITH REACTJS
- 1. Front-end Web Development with Reactjs NordicCoder
- 2. Confidential July 2018 Learn practical skills for your career growth
- 3. About Nordic Coder is an educational institution that aims to transform the IT workforce by taking the learning -by -doing approach to education. With the vision of bridging the under-skilled supply of IT students with the shortage of demand for skilled IT workers, Nordic Coder provides a platform offering practical short-term training courses for IT students to gain real-world skills to meet industry demand. Nordic Coder is a venture by fram^, a Swedish-Vietnamese start-up venture builder and IT development company listed on Nasdaq First North Stockholm.
- 4. What we offer 0 1 SOFT SKILLS Improve interview performance with CV polishing skills and one-on-one practice. 0 2 TECHNICAL SKILLS Practical application of programming languages in real business cases. 0 3 CAREER GUIDANCE Job search and networking opportunities with hiring partners.
- 5. Venture Founder Yen Le Yen recently joined Fram^ as Venture Founder for Nordic Coder. Yen used to served as Partnership Manager and part of the founding team of the Da Nang Business Incubator, where she collaborated with corporate, government and international donors to bring in accelerator managers, serial entrepreneurs and investors from Israel, Canada, U.S Finland, to coach more than 30 local startups and help them become investment-ready. She was the key organizer of SURF, an annual startup conference that attracted 2000+ attendees and high-profile speakers since 2016. Prior to that, Yen worked in infrastructure financing, lending sovereign loans to private companies from the World Bank and French Development Agency and preparing the issuance of the Da Nang government bond in 2014. She holds a Bachelor of Business - Banking and Finance at Monash University, Australia.
- 6. fram^ is a Swedish-Vietnamese start-up venture builder and IT development company which listed its shares on the Nasdaq First North Stockholm in Oct 2017. fram^ starts, builds and invests in technology companies with proven business models. We provide deep operational support to founders and help them build market-leading companies. We have many ventures in the pipeline in the verticals FinTech, InsurTech and eCommerce/Consumer with the aim of improving lives of Vietnamese people. The founding team of fram^ has built and managed market leading online businesses both in Europe and Southeast Asia. The founders of fram^ co-founded Lazada.vn and built the company from scratch to the market leader of e-commerce in Vietnam.
- 7. Introduction export class Instructor extends React.Component { render() { return ( <Profile> <Fullname>Trần Phong Phú</Fullname> <Work>TA at Sendo.vn</Work> <Work>React Instructor at NordicCoder</Work> <Email>phu.tran[at]nordiccoder.com</Email> <Phone>0937.942.974</Phone> </Profile> ); } }
- 8. My mission and motivation as an instructor is to help you free your mind, unleash your power within, and reach one step closer to your dream. Introduction
- 9. Tell us about yourself Introduction
- 10. Course Outline 3-4th Week Advanced React Event & Data 6-7th Week Advanced Reactjs Ecosystem of Reactjs Redux 1-2nd Week Getting Started React Basic 5th Week Mini workshop Soft Skill Development 8-9th Week Webpack Configuration Deployment - Production Final Project 10th Week Demo Day
- 11. Final Project - Online Shopping Cart
- 12. Final Project - Online Shopping Cart
- 13. Week 1 Agenda ● Group breakout session: 15 mín for each group ● Each group will have 5-10 minutes to present ● Class discussion ● What is component ● Why component ● Second Demo ● What is Reactjs ● Why Reactjs ● Development Tools, Audit Tools, Showcase, First Demo ● Getting Requirements, BA, Design ● Coding, Unit Testing ● QC, Testing, Release ● The Past ● Now 2018 ● Future
- 14. Web History Web Versions Web Browsers Web Desktop and Mobile
- 15. Web Version Web 1.0 Web 2.0 Web 3.0
- 18. Discussion Will websites be killed by Mobile App?
- 19. Steps to build a website 01 04 03 02Getting Requirements Collect all client requirements Design UX/UI Production Deployment Monitoring Development Coding Writing Unit Test Quality Control Testing Fix bugs
- 20. Steps to develop a website
- 21. Frontend Web - Stack Of Technologies CSS Framework ● Bootstrap , Foundation, Ant ● SASS, Less, PostCSS 2 HTML + CSS + Javascript ● jQuery , jQuery UI ● Underscore 1 Module Bundler ● Webpack , Parcel, Rollup ● Browserify ● Gulp, Grunt 4 Javascript Framework ● Reactjs , Angularjs, Vuejs ● Redux ● Jest, Enzyme 3
- 24. Indeed Job Comparison Reactjs Angular Vuejs (*) Indeed.com, 60k jobs
- 25. Reactjs Introduction A Javascript Library for building User Interface
- 26. Reactjs In Developer Mind Reactjs Redux Webpack Nodejs
- 27. Why developers love Reactjs Modular Reusability & Scalability High Performance Strong Community Great Development Tools
- 28. Reactjs Pros vs Cons Easy to Learn Virtual DOM Component Design First One-way Data Binding Debugging Hard to Master JSX Complex Comp. Design Flux Pattern View Layer
- 29. Reactjs Core Features - Virtual DOM REAL DOM VIRTUAL DOM
- 30. Reactjs Core Features - Flux Achitecture
- 31. Reactjs Core Features - Flux Achitecture
- 32. Reactjs Demo
- 33. Reactjs Application Single Page Application Progressive Web Application
- 34. PWA
- 35. PWA 10 Rules Progressive Responsive Connectivity independent App-like Fresh Safe Discoverable Re-engagement Installable Linkable
- 36. Reactjs in Viet Nam Tiki #27 Shopee #17 Lazada #20 Sendo #31 Chotot #47 Coccoc Search #1 (*) https://www.alexa.com/topsites/countries/VN
- 37. Showcase & Audit Tools React Extension Chrome Developer Tool Page Speed Think With Google Code Splitting Showcases
- 38. Reactjs Component React Bootstrap Components React Ant Awesome Components
- 40. OpenTalk - How to be a FE Developer
- 47. Assignment Find 5 sites in Vietnam using Reactjs Compare 5 sites found with Google PageSpeed Code and Submit first assignment
- 48. Q&A