Getting Started with React

https://react.dev/learn

1
Objectives
◆ Why React mixes markup with rendering logic
◆ How JSX is different from HTML
◆ How to display information with JSX

2
Node.js
◆ Node.js không phải là một framework hay library
◆ Node.js là môi trường thực thi mã runtime environment
JavaScript trên máy chủ, không cần trình duyệt
◆ Khác với trình duyệt web, nơi JavaScript thường được sử dụng để
tương tác với DOM
◆ Node.js đi kèm với một số module như npm (Node Package
Manager) để quản lý các thư viện JavaScript.
◆ Node.js được triển khai thông qua framework như Express.js để
xây dựng ứng dụng web.

3
Express
◆ Express là một framework phát triển ứng dụng web trong môi
trường Node.js
◆ Express được thiết kế để hoạt động cùng với Node.js, sử dụng các
API của Node.js để quản lý máy chủ.
◆ Để sử dụng Express, cần cài đặt Node.js tích hợp Express vào ứng
dụng.

4
React
◆ React là một thư viện JavaScript library để xây dựng giao diện
người dùng – UI cho ứng dụng Web
 Component-Based: tái sử dụng
 Virtual DOM: tạo ra một bản sao ảo của DOM và chỉ cập nhật các phần tử
cần thiết
 JSX: cú pháp để viết mã HTML trong mã JavaScript

5
Next.js
◆ Next.js là một framework React
◆ Next.js được xây dựng dựa trên Node.js
◆ Để sử dụng Next.js, cần cài đặt Node.js Node.js sẽ cung cấp môi
trường thực thi để chạy mã JavaScript của Next.js

6
TypeScript
◆ https://www.typescriptlang.org/
◆ TypeScript is JavaScript with syntax for types.
◆ TypeScript is a strongly typed programming language that builds on
JavaScript, giving you better tooling at any scale.

7
Installation
◆ Install Node.js for local development
◆ Install Visual Studio Code
◆ Extensions:
 Node-snippets
 React-snippets

8
Snippets

9
What is JSX?
◆ JSX stands for JavaScript XML
◆ JSX is a syntax extension for JavaScript.
◆ JSX lets you write HTML-like markup inside a JavaScript file.

Sidebar.jsx Form.js

10
Why JSX?
◆ The Web has been built on HTML, CSS, and JavaScript.
 content in HTML,
 design in CSS,
 logic in JavaScript
 often in separate files
◆ But logic increasingly determined content, rendering logic and
markup live together in the same place – this is React component

11
Converting HTML to JSX

12
JSX Syntax
◆ Return a single root element
 <div>…</div>
 <>…</>

◆ Close all the tags

 <img /> <img>
 <li>oranges</li> <li>oranges

◆ camelCase most, NOT ALL

 strokeWidth
 className

13
Use a JSX Converter
◆ https://transform.tools/html-to-jsx

14
Run JXS
◆ Browsers do not run JSX directly
◆ JSX not supported by browsers
◆ JSX needs to be converted into standard JavaScript using Bebel

15
What is Babel?
https://babeljs.io/

◆ Babel is a JavaScript compiler. Use next generation JavaScript, today.

◆ Babel used to convert ECMAScript 2015+ code into a backwards
compatible version of JavaScript
◆ These plugins allow you to use new syntax, without waiting for
browser support
◆ Babel can convert JSX syntax
1. npm install --save-dev @babel/preset-react
2. create .babelrc configuration file
3. npx babel helloReact.jsx --out-file helloReact.js

16
What is React?
◆ React is a JavaScript library for building user interfaces.
◆ React allows us to create reusable UI components.
◆ React is used to build single-page applications.

17
How does React Work?
◆ React creates a virtual DOM in memory.
◆ When the state of an object changes, React updates the virtual
DOM, then it efficiently updates the browser DOM to match the
virtual DOM.

18
How does React Work?

19
React and JSX
◆ React is a JavaScript library
◆ JSX is a syntax extension
 JSX and React are two separate things.
 JSX and React often used together

20
Library vs Framework
◆ library - a collection of functions
◆ frameworks - a particular implementation of a software application,
where your code fills in the details.
◆ Hollywood Principle – “Don’t call us, we’ll call you!”

21
Create React App
Create React App makes all the setup for you, including Babel and Webpack
configurations.

22
Create React App
◆ Create React App makes all the setup for you, including Babel and
Webpack configurations.
◆ Creating a new project with npm <= 5.2
npm install -g create-react-app
create-react-app my-app

23
Create React App with npx
◆ npx - Node Package eXecute
◆ npx automatically installs the latest version of Create React App
 npm uninstall -g create-react-app

 npx create-react-app my-app

 uninstall the package to ensure that npx always uses the latest version.

24
Quick Start

Open http://localhost:3000/ to see your app

25
Run the React Application

26
Folder Structure
◆ The files must exist with exact
filenames:
 public/index.html
 src/index.js
◆ You can delete or rename the
other files.
◆ You may create subdirectories
inside src

27
28
Modify the React Application
◆ npm start  package.json

◆ public/index.html
 root file to load the React application into the browser
◆ src/index.js or src/App.js
 initialize the React application and render the application into the DOM
element defined in index.html.

29
Modify index.js

30
Modify App.js

31
Modify index.html

App

32
Exercise
◆ Install the create-react-app CLI tool
◆ Create a basic React project and served up the compiled project to
your browser.

33