Scribd
Upload
5 views

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
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

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
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

React.

js: Getting Started


INTRODUCTION

Samer Buna

@samerbuna www.jscomplete.com
Basics of JavaScript
- Variables (const/let)
- Classes and functions
- Loops and conditionals

Interactive Labs
- jscomplete.com/learn-javascript
Actual User Interface

Description of
User Interface
React.js

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 React.Component {


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

render () { render () {

return ( return (

<div className="container"> React.createElement("div",

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

</div> React.createElement("h1", null, "Getting Started")

); )

} );

} }

ReactDOM.render(<Hello />, mountNode); ReactDOM.render(React.createElement(Hello, null), mountNode);


jsComplete Playground
Components
Summary - props
- state

JSX and the Virtual DOM


Function and class components
ReactDOM.render(…, mountNode)
React Events

You might also like