Getting Started#

What’s React?#

A JavaScript library for building user interfaces

— React docs

• declarative
  • declare the view, React does the rest
• component-based
  • helps with encapsulation
• learn once, write anywhere
  • mobile/desktop apps with React native
• open source / MIT

Why React?#

• pros:
  • easy to learn
  • very popular (249311 Stack Overflow questions tagged react, 13591 commits)
  • many ready made component libraries (material, bootstrap, etc…)
  • typed templates (with typescript)
  • relatively small bundle size (39.39 KB gzip)
• cons:
  • batteries not included
  • unopinionated
  • only 1-way data binding

Start a New App#

• use create-react-app to start a new app

npx create-react-app my-awesome-react-app --template typescript
cd my-awesome-react-app
npm start

Hello world!#

• React just takes a bit of “HTML” and renders it somewhere in DOM

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<p>Hello world!</p>, document.getElementById('root'))

Current Time#

• can interpolate values into “HTML”
• “HTML” can be passed around as data

import React from 'react'
import ReactDOM from 'react-dom'

const app = () => <div>the time is {new Date().toLocaleTimeString()}</div>
ReactDOM.render(app(), document.getElementById('root'))

Clock#

• “HTML” can be dynamic

import React from 'react'
import ReactDOM from 'react-dom'

const app = () => <div>the time is {new Date().toLocaleTimeString()}</div>
setInterval(() => {
  ReactDOM.render(app(), document.getElementById('root'))
}, 1000)

this is a simple demo, please don’t update using setInterval