Slide 1

Slide 1 text

Introduction to React In-company Study Group @locol

Slide 2

Slide 2 text

About me Yoshitaka Terazawa Twitter: @locol23 GitHub: locol23 WORKING AT Gurunavi, Inc. as a frontend developer A MEMBER OF React Japan User Group FAVORITE React + TypeScript Architecture

Slide 3

Slide 3 text

What is React 📖 A JavaScript library for building user interfaces React is not framework The architecture using React is pluggable Learn Once, Write Anywhere Web, Native Apps(Android, iOS), VR, Infrastructure Rendering with Virtual DOM Syntax is JSX

Slide 4

Slide 4 text

BTW, is React used?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Virtual DOM

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

JSX

Slide 13

Slide 13 text

JSX is very simple import React from 'react' export function Foo() { return
foo
}

Slide 14

Slide 14 text

This is Foo Component, but Foo is just a function import React from 'react' export function Foo() { return
foo
}

Slide 15

Slide 15 text

just return html import React from 'react' export function Foo() { return
foo
}

Slide 16

Slide 16 text

Conclusion Easy to maintain because it's easy to change the architecture using React React is used all over the world Lower rendering costs deu to differential updates of the Virtual DOM JSX is a simple function that returns HTML

Slide 17

Slide 17 text

Thank you