Tài liệu lập trình front reactjs SLIDE 1

React (hay còn gọi là ReactJS) là bộ thư viện viếtbằng ngôn ngữ JavaScript dùng để phát triểncác ứng dụng UI (User Interface) được phát triểnbởi các lập trình viên làm việc tại Facebook.❑React có thể chạy được trên cả môi trường client lẫn server.

Conceive Design Implement Operate

THỰC HỌC – THỰC NGHIỆP

http://www.poly.edu.vn

M ỤC TIÊU

R EACT VÀ R EACT JS

bằng ngôn ngữ JavaScript dùng để phát triển

các ứng dụng UI (User Interface) được phát triểnbởi các lập trình viên làm việc tại Facebook

lẫn server

REACT VÀ REACT NATIVE

H ELLO WORLD

I NSTALL CREATE - REACT - APP

I NSTALL CREATE - REACT - APP

T ẠO PROJECT

C ẤU TRÚC PROJECT

C ẤU TRÚC PROJECT

S TART / STOP REACT APP

S TART / STOP REACT APP

S TART / STOP REACT APP

S TART / STOP REACT APP

H ELLO WORLD

REACT & REACTDOM

❖ Đưa h1 vào div có id=“root”

const divElement = document.

<script crossorigin src = "https://unpkg.com/react- dom@16/umd/react-

dom.development.js" ></script>

❖ Tạo element

var newElement = React.createElement( 'h1' , null ,

'Hello, world!’ );

❖ Đưa h1 vào div có id=“root”

ReactDOM.render(newElement, document.querySelector(( '#root'

));

REACT & REACTDOM

reactdom

R EACT & REACTDOM

R EACT & REACTDOM

JSX

J SX TRONG CREATE - REACT - APP

J SX TRONG CREATE - REACT - APP

Babel

Babel

J SX TRONG CREATE - REACT - APP

Javascript viết theo kiểu XML

dùng (UI)

source

Component: là một khối code độc lập, có thể tái sử dụng, chia

UI thành nhiều phần nhỏ

C OMPONENT

HelloWorld component

ReactDom.render được sử dụng để render nội dung

của HelloWorld component ra thẻ <div

id=’root’> của trang index.html

A PP COMPONENT

L UỒNG HOẠT ĐỘNG

Đ ỔI HTML > JSX

Đ ỔI STYLE TRONG HTML > JSX

INLINE STYLE TRONG HTML > JSX

STYLE TRONG HTML > JSX

T HAM CHIẾU BIẾN JS TRONG JSX

T HAM CHIẾU BIẾN JS TRONG JSX

S UMARRY