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

1. 001. INTRODUCTION ABOUT
REACTJS

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