React.js
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2024
ソーシャルデザイン演習/2024
情報デザイン論/2024
情報デザイン演習IIA/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*React.js
https://ja.reactjs.org/
~
React.js とは、Facebookとそのコミュニティによって開発され...
~
***JSXについて
-JSXとは JavaScript の構文の拡張で、JavaScript の中に直接...
const element = <h1>Hello, world!</h1>;
-実質的にHTMLを書く必要がなくなります。
-JSX や ES6 文法は、Babel というトランスパイラで ES5 Java...
<script type="text/babel"> と書く必要があります。
~
***React.js の 主な機能
-宣言的UI（テンプレーティング）: JSX & ReactDOM
-データバインディング（data ⇒ UI）: state hook
-コンポーネント化：関数コンポーネント・React.Componentclass
-高効率レンダリング：仮想DOM
~
//マークアップとロジックを別々のファイルに書いて、技術を...
~
***どうやって使うの？
//-Node.js, npm 環境が必要です。
-CDN を利用して以下のライブラリをheadタグで読み込むだけで...
<script src="https://unpkg.com/react@16/umd/react.develo...
<script src="https://unpkg.com/react-dom@16/umd/react-do...
<script src="https://cdnjs.cloudflare.com/ajax/libs/babe...
-JSX を利用して Hello World を出力する事例
<div id="myReactApp"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById('myReactApp')
);
</script>
-ウェブブラウザには、以下のHTMLがレンダリングされます。
<div id="myReactApp">
<h1>Hello, World!</h1>
</div>
-概説
--#myReactApp
React.js が利用する要素です。
--JSX を書く場合は、script type="text/babel" となります。
--ReactDOM.renderメソッド
コンポーネントを id = myReactApp のDOM要素に挿入していま...
~
***フルソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react@16/umd/react.deve...
<script src="https://unpkg.com/react-dom@16/umd/react-...
<script src="https://cdnjs.cloudflare.com/ajax/libs/ba...
<title>React Test</title>
</head>
<body>
<div id="myReactApp"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById('myReactApp')
);
</script>
</body>
</html>
~
***詳細は、以下の公式サイトをご覧下さい。
-https://ja.reactjs.org/
~
~
***参考：React Native
React Native（リアクト・ネイテイヴ）とは、Facebookが作成...
開発者がネイティブプラットフォーム機能とともに React を利...
~
~
終了行:
*React.js
https://ja.reactjs.org/
~
React.js とは、Facebookとそのコミュニティによって開発され...
~
***JSXについて
-JSXとは JavaScript の構文の拡張で、JavaScript の中に直接...
const element = <h1>Hello, world!</h1>;
-実質的にHTMLを書く必要がなくなります。
-JSX や ES6 文法は、Babel というトランスパイラで ES5 Java...
<script type="text/babel"> と書く必要があります。
~
***React.js の 主な機能
-宣言的UI（テンプレーティング）: JSX & ReactDOM
-データバインディング（data ⇒ UI）: state hook
-コンポーネント化：関数コンポーネント・React.Componentclass
-高効率レンダリング：仮想DOM
~
//マークアップとロジックを別々のファイルに書いて、技術を...
~
***どうやって使うの？
//-Node.js, npm 環境が必要です。
-CDN を利用して以下のライブラリをheadタグで読み込むだけで...
<script src="https://unpkg.com/react@16/umd/react.develo...
<script src="https://unpkg.com/react-dom@16/umd/react-do...
<script src="https://cdnjs.cloudflare.com/ajax/libs/babe...
-JSX を利用して Hello World を出力する事例
<div id="myReactApp"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById('myReactApp')
);
</script>
-ウェブブラウザには、以下のHTMLがレンダリングされます。
<div id="myReactApp">
<h1>Hello, World!</h1>
</div>
-概説
--#myReactApp
React.js が利用する要素です。
--JSX を書く場合は、script type="text/babel" となります。
--ReactDOM.renderメソッド
コンポーネントを id = myReactApp のDOM要素に挿入していま...
~
***フルソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react@16/umd/react.deve...
<script src="https://unpkg.com/react-dom@16/umd/react-...
<script src="https://cdnjs.cloudflare.com/ajax/libs/ba...
<title>React Test</title>
</head>
<body>
<div id="myReactApp"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById('myReactApp')
);
</script>
</body>
</html>
~
***詳細は、以下の公式サイトをご覧下さい。
-https://ja.reactjs.org/
~
~
***参考：React Native
React Native（リアクト・ネイテイヴ）とは、Facebookが作成...
開発者がネイティブプラットフォーム機能とともに React を利...
~
~
ページ名:
