Scribd
Upload
8 views

ReactJS Introduction

ReactJS is a JavaScript framework for building web applications. It uses a component-based approach and the virtual DOM. Components are written in JSX and define their rendering logic via the render method. State changes trigger re-renders for efficient updates.

Uploaded by

Ismāīl LADJOHOUNlOU
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

ReactJS Introduction

ReactJS is a JavaScript framework for building web applications. It uses a component-based approach and the virtual DOM. Components are written in JSX and define their rendering logic via the render method. State changes trigger re-renders for efficient updates.

Uploaded by

Ismāīl LADJOHOUNlOU
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

ReactJS Introduction

Mendel Rosenblum

CS142 Lecture Notes - ReactJS


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.

CS142 Lecture Notes - ReactJS


ReactJS Web Application Page
<!doctype html>
<html>
<head>
<title>CS142 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.

CS142 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
CS142 Lecture Notes - ReactJS
reactApp.js - Render element into browser DOM
ES6 Modules - Bring in
import React from 'react'; React and web app React
import ReactDOM from 'react-dom'; components.

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.

CS142 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;

CS142 Lecture Notes - ReactJS


<div>
<label>Name: </label>
ReactAppView render() method <input type="text" … />
<h1>Hello {this.state.yourName}!</h1>
</div>
render() {
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);
}
Returns element tree with div (label, input, and h1) elements

CS142 Lecture Notes - ReactJS


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, '!')
);
}

CS142 Lecture Notes - ReactJS


Use JSX to generate calls to createElement
render() {
return (
<div>
<label>Name: </label>
<input
type="text"
value={this.state.yourName}
onChange={(event) => this.handleChange(event)}
/>
<h1>Hello {this.state.yourName}!</h1>
</div>
); CS142 Lecture Notes - ReactJS
Component state and input handling
import React from 'react';
class ReactAppView extends React.Component {
constructor(props) { Make <h1>Hello {this.state.yourName}!</h1>
super(props); work
this.state = {yourName: ""};
}
handleChange(event) {
this.setState({ yourName: event.target.value });
}
....
● Input calls to setState which causes React to call render() again
CS142 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

CS142 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!

CS142 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 });
}

CS142 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 });
}
...
CS142 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() {
return (
<input type="text" value={this.state.yourName}
onChange={(event) => this.handleChange(event)} />
);
CS142 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!

CS142 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: Zero or more children which can be either:
■ String or numbers
■ A React element
■ An Array of the above

CS142 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>

CS142 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};
<div>{greeting}</div>

CS142 Lecture Notes - ReactJS


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 of rendering on data change

CS142 Lecture Notes - ReactJS


Styling with React/JSX - lots of different ways
Webpack can import CSS style sheets:
import React from 'react'; .cs142-code-name {
font-family: Courier New, monospace;
import './ReactAppView.css'; }

class ReactAppView extends React.Component {


…
render() {
return (
<span className="cs142-code-name">
...
Must use className= for HTML
</span> class= attribute (JS keyword
); conflict)

CS142 Lecture Notes - ReactJS


Component lifecycle and methods

CS142 Lecture Notes - ReactJS


http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
Example of lifecycle methods
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);
}
... CS142 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)
○ Add state to stateless components
CS142 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 (https://reactjs.org/docs/context.html)


○ Global variables for subtree of components
CS142 Lecture Notes - ReactJS

You might also like