Scribd
Upload
2 views

11-ReactJS

ReactJS is a JavaScript framework for building web applications, utilizing a Model-View-Controller pattern and focusing on single-page applications with reusable components. It employs JSX for templating and allows for efficient rendering through state management and lifecycle methods. The document also covers component structure, event handling, and communication between components using props and callbacks.

Uploaded by

noor-alnaser1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

11-ReactJS

ReactJS is a JavaScript framework for building web applications, utilizing a Model-View-Controller pattern and focusing on single-page applications with reusable components. It employs JSX for templating and allows for efficient rendering through state management and lifecycle methods. The document also covers component structure, event handling, and communication between components using props and callbacks.

Uploaded by

noor-alnaser1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

ReactJS Introduction

Bashar Al shboul & Aladdin Baarah

Adopted from Mendel Rosenblum


ReactJS
● JavaScript framework for writing the web applications
○ Like AngularJS - Snappy response from running in browser
○ Less opinionated: only specifies rendering view and handling user interactions

● Uses Model-View-Controller pattern


○ View constructed from Components using pattern
○ Optional, but commonly used HTML templating

● Minimal server-side support dictated


● Focus on supporting for programming in the large and single page applications
○ Modules, reusable components, testing, etc.

WAPE Lecture Notes - ReactJS


ReactJS Web Application
Page
<!doctype html>
<html>
<head>
<title>WAPE Example</title>
</head>
<body>
<div id="reactapp"></div>
<script
src="./webpackOutput/reactApp.bundle.js"></script>
</body>
</html>
ReactJS applications come as a
JavaScript blob that will use the DOM
interface to write the view into the div.

WAPE Lecture Notes - ReactJS


ReactJS tool chain React.js
React Components

Component #1 Babel

Webpack
Component #2 Babel Output
... Bundle.js

Component #N Babel

Babel - Transpile language features (e.g. ECMAScript, JSX) to basic JavaScript


Webpack - Bundle modules and resources (CSS, images)
Output loadable with single script tag in any browser
WAPE Lecture Notes - ReactJS
reactApp.js - Render element into browser DOM
ES6 Modules - Bring in
import React from React and web app React
'react';
import ReactDOM from 'react- components.
dom';
import ReactAppView from
'./components/ReactAppView';
let viewTree = React.createElement(ReactAppView,
null); let where =
document.getElementById('reactapp');
ReactDOM.render(viewTree, where);
Renders the tree of React elements (single component
named ReactAppView) into the browser's DOM at
the div with id=reactapp.

WAPE Lecture Notes - ReactJS


components/ReactAppView.js - ES6 class definition
import React from 'react';
class ReactAppView extends
React.Component {
constructor(props) Inherits from React.Component. props is
{ super(props); set to the attributes passed to the
component.
...
}
Require method render() - returns React
render() { ... element tree of the Component's view.

};
export default
ReactAppView;
WAPE Lecture Notes - ReactJS
<div>
<label>Name: </label>
ReactAppView render() method <input type="text" … />
<h1>Hello
{this.state.yourName}!</h1>
render() { </div>

let label = React.createElement('label',


null,'Name: '); let input =
React.createElement('input',
{ type: 'text', value: this.state.yourName,
onChange: (event) => this.handleChange(event)
});
let h1 = React.createElement('h1', null,
'Hello ', this.state.yourName, '!');
return React.createElement('div', null, label, input, h1);
}
WAPE Lecture Notes - ReactJS
Returns element tree with div (label, input, and h1) elements
ReactAppView render() method w/o variables
render() {
return React.createElement('div', null,
React.createElement('label', null,'Name:
'), React.createElement('input',
{ type: 'text', value: this.state.yourName,
onChange: (event) => this.handleChange(event)
}),
React.createElement('h1', null,
'Hello ', this.state.yourName, '!')
);
}
WAPE Lecture Notes - ReactJS
Use JSX to generate calls to createElement
render() {
return (
<div>
<l
ab
el
>N
am
e:
</
la
be
l>
<i
np
ut
WAPE Lecture Notes - ReactJS
type="text"
Component state and input handling
import React from 'react';
class ReactAppView extends
React.Component {
constructor(props) Make <h1>Hello
{ super(props); {this.state.yourName}!</h1>
work
this.state =
{yourName: ""};
}
handleChange(event
this.setState({ yourName: event.target.value });
) {
}
....
● Input calls to setState which causes React to call render()
again WAPE Lecture Notes - ReactJS
One way binding: Type 'D' Character in input box
● JSX statement: <input type="text"
value={this.state.yourName} onChange={(event) =>
this.handleChange(event)} />
Triggers handleChange call with event.target.value == "D"

● handleChange - this.setState({yourName:
event.target.value});

this.state.yourName is changed to "D"

● React sees state change and calls render again:


● Feature of React - highly efficient re-rendering
WAPE Lecture Notes - ReactJS
Calling React Components from events: A
problem
class ReactAppView extends React.Component {
...
handleChange(event) {
this.setState({ yourName: event.target.value });
}
...
}
Understand why:
<input type="text" value={this.state.yourName}
onChange={this.handleChange} />

Doesn't work!

WAPE Lecture Notes - ReactJS


Calling React Components from events workaround
● Create instance function bound to instance

class ReactAppView extends


React.Component { constructor(props)
{
super(props);
this.state = {yourName: ""};
this.handleChange =
this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ yourName:
event.target.value }); WAPE Lecture Notes - ReactJS
Calling React Components from events workaround
● Using public fields of classes with arrow functions

class ReactAppView extends


React.Component { constructor(props)
{
super(props);
this.state = {yourName: ""};
}
handleChange = (event) => {
this.setState({ yourName:
event.target.value });
}
WAPE Lecture Notes - ReactJS
...
Calling React Components from events workaround
● Using arrow functions in JSX

class ReactAppView extends React.Component {


…
handleChange(event) {
this.setState({ yourName: event.target.value });
}
render()
{ retu
rn (
<input type="text" value={this.state.yourName}
onChange={(event) =>
this.handleChange(event)}
WAPE Lecture Notes - />
ReactJS
}
A digression: camelCase vs dash-
case
Word separator in multiword variable name

● Use dashes: active-buffer-entry


● Capitalize first letter of each word: activeBufferEntry

Issue: HTML is case-insensitive but JavaScript is not.


ReactJS's JSX has HTML-like stuff embedded in JavaScript.

ReactJS: Use camelCase for attributes


AngularJS: Used both: dashes in HTML and camelCase in JavaScript!

WAPE Lecture Notes - ReactJS


Programming with JSX
● Need to remember: JSX maps to calls to React.createElement
○ Writing in JavaScript HTML-like syntax that is converted to JavaScript function
calls

● React.createElement(type, props, ...children);


○ type: HTML tag (e.g. h1, p) or React.Component
○ props: attributes (e.g. type="text") Uses
camelCase!
○ children:
■ String Zero or more children which can be either:
or numbers
■ A React element
■ An Array of the
above

WAPE Lecture Notes - ReactJS


JSX templates must return a valid children
param
● Templates can have JavaScript scope variables and expressions
○ <div>{foo}</div>
■ Valid if foo is in scope (i.e. if foo would have been a valid function call parameter)
○ <div>{foo + 'S' + computeEndingString()}</div>
■ Valid if foo & computeEndString in scope

● Template must evaluate to a value


○ <div>{if (useSpanish) { … } }</div> - Doesn't work: if isn't an expression
○ Same problem with "for loops" and other JavaScript statements that don't return values

● Leads to contorted looking JSX: Example: Anonymous immediate functions


○ <div>{ (function() { if …; for ..; return val;})() }</div>

WAPE Lecture Notes - ReactJS


Conditional render in JSX
● Use JavaScript Ternary operator (?:)
<div>{this.state.useSpanish ? <b>Hola</b> :
"Hello"}</div>
● Use JavaScript variables

let greeting;
const en = "Hello"; const sp =
<b>Hola</b>; let {useSpanish} =
this.prop;
if (useSpanish) {greeting = sp} else
{greeting = en};
WAPE Lecture Notes - ReactJS
<div>{greeting}</div>
Iteration in JSX
● Use JavaScript array variables
let listItems = [];
for (let i = 0; i < data.length; i++) {
listItems.push(<li key={data[i]}>Data Value
{data[i]}</li>);
}
return <ul>{listItems}</ul>;
● Functional programming
<ul>{data.map((d) => <li key={d}>Data Value
{d}</li>)}</ul>
key= attribute improves efficiency ofLecture
WAPE rendering on data change
Notes - ReactJS
Styling with React/JSX - lots of different ways
Webpack can import CSS style sheets:
import React from .wape-code-name {
font-family: Courier New,
'react'; import monospace;
}
'./ReactAppView.css';
class ReactAppView extends
React.Component {
…
render() {
return (
<span
... className="wape-code-name">
Must use className= for
</ HTML class= attribute (JS
) span> keyword conflict)
;
WAPE Lecture Notes - ReactJS
Component lifecycle and methods

WAPE Lecture Notes - ReactJS


http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
Example of lifecycle methods - update UI every 2s
class Example extends React.Component {
...
componentDidMount() { // Start 2 sec
counter const incFunc =
() => this.setState({ counter: this.state.counter +
1 }); this.timerID = setInterval(incFunc, 2 * 1000);
}

componentWillUnmount() { //
Shutdown timer
} clearInterval(this.timerID);
.. WAPE Lecture Notes - ReactJS
Stateless Components
● React Component can be function (not a class) if it only depends on props

function MyComponent(props) {
return <div>My name is {props.name}</div>;
}
Or using destructuring...
function MyComponent({name}) {
return <div>My name is {name}</div>;
}
● React Hooks (https://reactjs.org/docs/hooks-intro.html)
o Add state to stateless components - can do pretty much everything the class
method can WAPE Lecture Notes - ReactJS
Example React Hooks
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}> Click me
</button>
</div>
);
}
WAPE Lecture Notes - ReactJS
Communicating between React components
● Passing information from parent to child: Use props (attributes)

<ChildComponent
param={infoForChildComponent} />

● Passing information from child to parent: Callbacks

this.parentCallback = (infoFromChild) =>


{ /* processInfoFromChild */};

<ChildComponent
callback={this.parentCallback}> />

● React Context ( WAPE Lecture Notes - ReactJS

You might also like