Scribd
Upload
11 views10 pages

Introduction Slides

This document serves as an introduction to React.js, a JavaScript library for building user interfaces. It covers the basics of JavaScript, the concept of components, and how to manage state and props. Additionally, it discusses the Virtual DOM and JSX, providing examples of both function and class components.

Uploaded by

Chinni Krishna
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views10 pages

Introduction Slides

This document serves as an introduction to React.js, a JavaScript library for building user interfaces. It covers the basics of JavaScript, the concept of components, and how to manage state and props. Additionally, it discusses the Virtual DOM and JSX, providing examples of both function and class components.

Uploaded by

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

React.

js: Getting Started


INTRODUCTION

Samer Buna

@samerbuna [Link]
Basics of JavaScript
- Variables (const/let)
- Classes and functions
- Loops and conditionals

Interactive Labs
- [Link]/learn-javascript
Actual User Interface

Description of
User Interface
[Link]

A JAVASCRIPT LIBRARY
FOR BUILDING USER
INTERFACES
Components
- Like functions
- Reusable and composable
- Can manage a private state

Reactive updates
- React will react
- Take updates to the browser

Virtual views in memory


- Write HTML in JavaScript
- Tree reconciliation
React Components

Function Component Class Component


Function Component

const MyComponent = (props) => {


return (
Props <elementOrComponent ../>
); DOM
}
Class Component

class MyComponent extends [Link] {


State render () {
return (
<elementOrComponent ../> DOM
Props );
}
}
Virtual DOM and JSX
class Hello extends [Link] { class Hello extends [Link] {

render () { render () {

return ( return (

<div className="container"> [Link]("div",

<h1>Getting Started</h1> { className: "container"},

</div> [Link]("h1", null, "Getting Started")

); )

} );

} }

[Link](<Hello />, mountNode); [Link]([Link](Hello, null), mountNode);


jsComplete Playground
Components
Summary - props
- state

JSX and the Virtual DOM


Function and class components
[Link](…, mountNode)
React Events

You might also like