This document provides an overview of React including its core concepts and benefits. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It allows building of reusable UI components, uses a virtual DOM for better performance, and can be used to build mobile apps using React Native. Code for Fukuoka is an event on August 1st to learn React and how to contribute to open source projects.

1. SOIL
Expo
2018/08/01

2. •
•
•
•
CPS Cyber Physical System
•
• Python JavaScript
• ActionScript, Objective-C, ...

3. • SRP OIL
• IoT, AI, VR, AR
•
• ※ 10:00~18:00
• Code for Fukuoka
•
•
• facebook Code for Fukuoka
※
facebook
https://www.facebook.com/
SRPOIL/

4. • Expo
• React
• React SPA Single Page Application
•
1.
• React
2.
• Code for Fukuoka

5. ✓React
✓Expo
✓

6. 1.

7. React

8. React
• Declarative
•
•
• Component-Based
• UI
• JavaScript JS
DOM
• Learn Once, Write Anywhere
• JS React
• Node React Native
https://reactjs.org/

9. Declarative
•
•
•
•
(+ 1 2 3 4 5) ;15
var sum = function(arr){
var sum=0;
for(var i=0; i < arr.length; i++){
sum += arr[i];
}
return sum;
}
var arr = [1, 2, 3, 4, 5];
console.log( sum(arr) ); // 15
sum [1,2,3,4,5] --15

10. https://tylermcginnis.com/imperative-vs-declarative-programming/
function double (arr) {
let results = []
for (let i = 0; i < arr.length; i++){
results.push(arr[i] * 2)
}
return results
}
function double (arr) {
return arr.map((item) => item * 2)
}
function add (arr) {
let result = 0
for (let i = 0; i < arr.length; i++){
result += arr[i]
}
return result
}
function add (arr) {
return arr.reduce((prev, current) => prev + current, 0)
}
$("#btn").click(function() {
$(this).toggleClass("highlight")
$(this).text() === 'Add Highlight'
? $(this).text('Remove Highlight')
: $(this).text('Add Highlight')
})
<Btn
onToggleHighlight={this.handleToggleHighlight}
highlight={this.state.highlight}>
{this.state.buttonText}
</Btn>

11. • CBD: Component-based development
• separation of
concerns
•
•
• Web Web
•
•
https://en.wikipedia.org/wiki/Component-based_software_engineering
https://medium.com/@dan.shapiro1210/understanding-component-based-architecture-3ff48ec0c238

12. React
class Welcome extends React.Component {
state = {name: 'Anzu'};
shouldComponentUpdate(nextProps, nextState){
const {name} = nextState;
return (name === 'Hina');
}
handleClick = ()=>{
this.setState({name: 'Hina'})
};
render() {
return (
<div>
<h1>Hello, {this.props.name}</h1>
<div onClick={this.handleClick}>My name is {this.state.name}</div>
</div>
);
}
}
class App extends React.Component {
render() {
return (
<div>
<Welcome name="Taro" />
<Welcome name="Hanako" />
</div>
);
}
}
View

13. Learn Once, Write Anywhere
• Java
• Write once, run anywhere
•
•
• React
• iOS, android : React Native
• Win, Mac React Desktop (https://reactdesktop.js.org/)
https://reactjs.org/blog/2015/03/26/introducing-react-native.html

15. ES2015 ECMAScript2015
• ES6 6th Edition
•
let
let name = 'taro';
name = 'hanako'
const
const name = 'taro';
name = 'hanako'; // error
class
class Person {
constructor(name){
this.name = name;
}
}
const person = new Person('taro')
const fn = (name) =>{
return console.log(name);
}
const arr = ['a', 'b', 'c'];
const arr2 = [...arr];
console.log(arr === arr2); // false
const name = 'taro';
console.log(`My name is ${name}.`); // My name is taro.
https://babeljs.io/docs/en/learn/

16. JSX JavaScript XML, JavaScript Syntax Extension
• XML JavaScript
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
JSX React.createElement(component, props, ...children)
<div className="sidebar" />
React.createElement(
'div',
{className: 'sidebar'},
null
)
https://reactjs.org/docs/introducing-jsx.html

17. DOM
• DOM ReactDOM
DOM
• DOM
• DOM DOM
Key
https://reactjs.org/docs/faq-internals.html
{todos.map((todo, index) =>
<Todo
{...todo}
key={index}
/>
)}
https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
{todos.map((todo) =>
<Todo {...todo}
key={todo.id} />
)}
var shortid = require('shortid');
function createNewTodo(text) {
return {
completed: false,
id: shortid.generate(),
text
}
}
ID
shortid
ID
ID todoCounter = 1;
function createNewTodo(text) {
return {
completed: false,
id: todoCounter++,
text
}
}

18. Functional
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
•
•
class Welcome extends React.Component {
state = {name:'anzu'}
componentDidMount() {
}
componentWillUnmount() {
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

19. React ver. 16.4
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

20. Flux
• Facebook
•
•
•
https://github.com/facebook/flux/tree/master/examples/flux-concepts
React

21. Parent Component
class ChildComponent extends React.Component {
render() {
const { onClick } = this.props;
return (
<div>
<div onClick={onClick}>Click here!</div>
</div>
);
}
}
class ParentComponent extends React.Component {
handleClick = (e)=>{
console.log('Click!');
};
render() {
return (
<div>
<ChildComponent onClick={this.handleClick} />
</div>
);
}
}
ChildComponent

22. MVC
• UI
• Model
•
• View
• View
• Model
• Controller
• Model
https://ja.wikipedia.org/wiki/Model_View_Controller

23. React Native
• JavaScript React
• HTML5
https://facebook.github.io/react-native/docs/tutorial
https://facebook.github.io/react-native/
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View>
<Text>Hello world!</Text>
</View>
);
}
}

24. • React Native
• Expo SDK,
Expo
XDE

25. hello, world
• https://expo.io/
• Expo

26. 2.

27. Code for Fukuoka
•
• 2018 3 3
• SRP
•
•
•

28. •

29. •