Scribd
Upload
19 views

Lesson - 3 - Introduction To React

React is a JavaScript library for building user interfaces using declarative code and components. It uses a virtual DOM for improved performance and uses JSX syntax which compiles to JavaScript objects. The document provides an overview of React including its history, architecture, core concepts like elements, components and JSX, and how to get started with a basic React application using create-react-app.

Uploaded by

Hoang Kim Nam (K17 HCM)
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views

Lesson - 3 - Introduction To React

React is a JavaScript library for building user interfaces using declarative code and components. It uses a virtual DOM for improved performance and uses JSX syntax which compiles to JavaScript objects. The document provides an overview of React including its history, architecture, core concepts like elements, components and JSX, and how to get started with a basic React application using create-react-app.

Uploaded by

Hoang Kim Nam (K17 HCM)
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

INTRODUCTION TO REACT

LESSON 3 – MR. MINH SANG

1
OBJECTIVES

◆ Overview Front-end JavaScript frameworks and libraries


◆ Understand the architecture of an React application
◆ Scaffold out a starter React application using create-react-app, the command line tool

2
OVERVIEW FRONT-
END JAVASCRIPT
FRAMEWORKS
AND LIBRARIES 3
LIBRARY VS FRAMEWORK

◆ The following borrowed from AngularJS documentation makes the distinction clear:
◆ a library - a collection of functions which are useful when writing web apps. Your
code is in charge and it calls into the library when it sees fit. E.g., jQuery.
◆ frameworks - a particular implementation of a web application, where your code fills
in the details. The framework is in charge and it calls into your code when it needs
something app specific. E.g., Angular, Ember, etc.
◆ https://docs.angularjs.org/guide/introduction

8/15/21 4
JAVASCRIPT FRAMEWORKS

◆ Single Page Application

◆ Rich Internet Applications


◆ Model-View-Controller (MVC) / Model-View- ViewModel (MVVM) / Model-View-Whatever

◆ Data binding, routing


◆ Scalable, Reusable, Maintanable JS code
◆ Test driven development

8/15/21 5
JAVASCRIPT FRAMEWORKS/LIBRARIES

◆ Angular ◆ Meteor
◆ Ember ◆ Polymer
◆ Backbone
◆ Knockout
◆ React
◆ Vue
◆ Aurelia
◆ Mercury

8/15/21 6
DON’T OVERREACT

◆ So, is React a Library or a Framework?

8/15/21 7
INTRODUCTION
TO REACT 8
WHAT IS REACT?

◆ A JavaScript library for building user interfaces


◆ Declarative
◆ Component-based
◆ Technology stack agnostic

8/15/21 9
REACT HISTORY

◆ React

• Designed by Jordan Walke

• First deployed on Facebook's newsfeed in 2011

• Open-sourced at JSConf US in May 2013

• Designed for speed, simplicity, and scalability

https://en.wikipedia.org/wiki/React_(JavaScript_library)
8/15/21 10
REACT VOCABULARY

◆ One-way data flow ◆ Virtual DOM


◆ JSX ◆ Element
◆ Components
◆ Flux / Redux
◆ State
◆ Testing
◆ Props

8/15/21 11
EXERCISE 5: GETTING STARTED WITH REACT

◆ Install create-react-app
◆ Scaffold out a basic React application

8/15/21 12
REACT
APPLICATION
OVERVIEW 13
REACT ELEMENT

◆ Smallest building blocks of React apps


• const element = <h1 className="App-title">Welcome to React</h1>;
◆ Plain JS objects that are
• Cheap to create
◆ Components are “made of” elements
• class App extends Component { . . . }

8/15/21 14
RENDERING TO THE DOM

◆ Rendered using ReactDOM. See index.js

• ReactDOM.render(<App />, document.getElementById('root’));


◆ Where is it rendered? See index.html

• <div id="root"></div>

• Root DOM node

8/15/21 15
INTRODUCTION
TO JSX 16
INTRODUCTION TO JSX

const element = <h1>Hello, world!</h1>;

Waiter, what’s this HTML tag doing in my code?

8/15/21 17
JSX

◆ Syntactic extension to JavaScript


◆ Shorthand notation to represent JavaScript functions calls that evaluate to JavaScript
objects
◆ Avoids artificial separation of rendering logic from other UI logic

8/15/21 18
JSX

8/15/21 19
EMBEDDING EXPRESSIONS IN JSX

const dish = { id: 0, name:'Uthappizza’, . . .};

return (
<div key={dish.id} className="col-12 mt-5">
<Media tag="li">
<Media body className="ml-5">
<Media heading>{dish.name}</Media>
</Media>
</Media>
</div>
8/15/21 20

);
SUMMARY

◆ Overview Front-end JavaScript frameworks and libraries


◆ Understand the architecture of an React application
◆ Scaffold out a starter React application using create-react-app, the command line tool

8/15/21 21

You might also like