001. Introduction about React
Download as PPTX, PDF•0 likes•312 views
This document provides an introduction to ReactJS, including: - ReactJS was developed by Facebook in 2013 and is currently at version 15.3.2; it is a view library rather than a framework - Reasons for choosing ReactJS include faster websites, reusable views, a large community, ease of writing tests, and integration with other frameworks - The document discusses Webpack, JSX, ES6 features, and Redux, which are important technologies to learn when using ReactJS
001. Introduction about React
- 2. Introduction ❖ Developed and maintained by Facebook from 2013 ❖ Current version: v15.3.2 ❖ It’s a view library, not a framework
- 3. Why developers choosing React ❖ Website created using ReactJS often faster than others ❖ Reusable views ❖ Large and rapidly grow community ❖ Good solution for building small to medium mobile app ❖ Written in Javascript (most popular) ❖ Extremely easy to write UI tests cases ❖ Can integrate to popular JS Framework such as AngularJS, Backbone, Meteor
- 5. Why us choosing React ❖ It’s currently the top of trending technology according to StackOverflow statistics ❖ Required by many clients ❖ Build native apps for Android & iOS ❖ Become full-stack developers ❖ Make us “up to date” ❖ Easily reuse component developed in previous project ❖ Building company’s component standard
- 6. Things about ReactJS ❖ Javascript in HTML HTML in Javascript ❖ Javascript and HTML together, even CSS ❖ Easy accessing element without using selector (classes, ids)
- 7. Cons ❖ It is only a view layer, you have still to plug your code for Ajax requests, events and so on. Some people get surprised by that. ❖ There's a learning curve for beginners who are new to web development.
- 8. Things to learn 1. Webpack 2. JSX 3. ES6/ES2016+ 4. Babel 5. Event programming 6. Redux 7. Immutable
- 9. Webpack
- 10. Webpack ❖ Transform resources into static assets ❖ Play as dev server ❖ Transform JS into different formats What do Webpack do? ❖ Code splitting ❖ Loaders ❖ Plugin System What make webpack different?
- 11. ❖ JSX is easier to visualize than javascript functions ❖ The markup is more familiar to designer and the rest of your team ❖ Your markup becomes more semantic, more meaningful. Why JSX
- 12. ❖ OOP ❖ String template (multiline support) ❖ Modules ❖ Arrow function and block scope ❖ Spread operator Why ES6 features
- 14. ❖ State management for whole system ❖ One store / Multiple Reducers ❖ Dispatching events ❖ Connecting React components ❖ Server rendering (you don’t need any special API to manage) Benefits of Redux
- 16. Now Demo