Scribd Logo
Upload

Welcome to Scribd!

  • 275 views

    React JS

    Uploaded by

    Fer
    This document provides an introduction and overview of ReactJS, including: - ReactJS is a JavaScript framework for building web applications that uses a Model-View-Controller pattern and focuses on single page applications. - ReactJS applications are bundled using tools like Babel and Webpack and rendered on the client-side using a single script tag. - React uses JSX syntax which compiles to calls to React.createElement to build up the view component tree.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    React JS

    Uploaded by

    Fer
    275 views25 pages
    This document provides an introduction and overview of ReactJS, including: - ReactJS is a JavaScript framework for building web applications that uses a Model-View-Controller pattern and focuses on single page applications. - ReactJS applications are bundled using tools like Babel and Webpack and rendered on the client-side using a single script tag. - React uses JSX syntax which compiles to calls to React.createElement to build up the view component tree.

    Original Description:

    react js

    Original Title

    ReactJS

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an introduction and overview of ReactJS, including: - ReactJS is a JavaScript framework for building web applications that uses a Model-View-Controller pattern and focuses on single page applications. - ReactJS applications are bundled using tools like Babel and Webpack and rendered on the client-side using a single script tag. - React uses JSX syntax which compiles to calls to React.createElement to build up the view component tree.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    275 views25 pages

    React JS

    Uploaded by

    Fer
    This document provides an introduction and overview of ReactJS, including: - ReactJS is a JavaScript framework for building web applications that uses a Model-View-Controller pattern and focuses on single page applications. - ReactJS applications are bundled using tools like Babel and Webpack and rendered on the client-side using a single script tag. - React uses JSX syntax which compiles to calls to React.createElement to build up the view component tree.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 25
    At a glance
    Powered by AI
    The key takeaways are that ReactJS is a JavaScript library for building user interfaces, uses a component-based approach, and focuses on single page applications. It uses a virtual DOM for rendering views.

    Some main differences between AngularJS and ReactJS are that AngularJS is more opinionated while ReactJS is less opinionated, AngularJS uses MVC pattern while ReactJS uses components, and AngularJS has more server-side support while ReactJS focuses on client-side rendering.

    The basic structure of a React application includes importing React libraries, defining React components as classes that extend React.Component and include a render method, and rendering the root component into the DOM using ReactDOM.

    ReactJS Introduction

    Mendel Rosenblum

    CS142 Lecture Notes - AngularJS


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


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


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


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


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


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


    Use JSX to generate calls to createElement
    render() {
    return (
    <div>
    <label>Name: </label>
    <input
    type="text"
    value={this.state.yourName}
    onChange={this.handleChange}
    />
    <h1>Hello {this.state.yourName}!</h1>
    </div>
    ); CS142 Lecture Notes - AngularJS
    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 - AngularJS
    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 - AngularJS


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


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


    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 - AngularJS
    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 - AngularJS
    }
    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 - AngularJS


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


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


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


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


    Styling with React/JSX
    Webpack can import CSS style sheets:
    .cs142-code-name {
    import React from 'react'; 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 - AngularJS


    Component lifecycle and methods

    CS142 Lecture Notes - AngularJS


    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 - AngularJS
    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>;
    }

    CS142 Lecture Notes - AngularJS


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

    You might also like