001. INTRODUCTION ABOUT REACTJS

Presenter: Binh Quan

Introduction

❖ Developed and maintained by Facebook from 2013

❖ Current version: v15.3.2

❖ It’s a view library, not a framework

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

❖ React automatically manage all UI updates

❖ Easy of debugging

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

Things about ReactJS

❖ Javascript in HTML HTML in Javascript

❖ Javascript and HTML together, even CSS

❖ Easy accessing element without using selector (classes, ids)

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.

Things to learn

1.Webpack

2.JSX

3.ES6/ES2016+

4.Babel

5.Event programming

6.Redux

7.Immutable

Webpack

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?

❖ 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

❖ OOP❖ String template (multiline

support)❖ Modules❖ Arrow function and block

scope❖ Spread operator

Why ES6 features

❖ 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

Now Demo