在Django+React中学习编程基础（19）：React教程（准备与React概述）
[上次] 以Django+React学习编程基础(18): Django高级教程(可重用应用程序的编写方式)
首先
之前，我使用Django教程来学习基础知识。
从现在开始，我将使用React教程来学习React基础。
这次的内容 de
-
- チュートリアルの準備
- Reactの概要
准备教程。
React的概述
React 是什么？
-
- UI(ユーザインターフェイス)を構築するためのJavaScriptライブラリ
宣言型
効率的
柔軟
React组件是什么？
-
- 複雑なUIを組み立てるための、小さく独立した部品
-
- Reactに何を描画したいか伝える
-
- データが変更されると
Reactはコンポーネントを効率よく更新し、再レンダリング
異なる種類のコンポーネントが存在
React组件的示例：React.Component的子类
ShoppingListはReactコンポーネントクラス(Reactコンポーネント型)
props(propertiesの略)と呼ばれるパラメータを受け取る
使用例: this.props.name
renderメソッドにより、React要素を返す
React要素は、画面ビューの階層構造
描画すべき要素の軽量な記述形式
ReactはReact要素を受け取って画面に描画
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Example usage: <ShoppingList name="Mark" />
使用JSX语言编写React元素
-
- JSXとは、DeNAによって開発されたWebアプリ向けのプログラミング言語
-
- JSX構文はビルド時に、React関数呼び出しに変換される
例えば、
は、React.createElement(‘div’)に変換される
JSXでは、JavaScriptのすべての構文を使用可能
JavaScriptの式を、JSX内で中括弧に囲んで記入
React要素は、JavaScriptのオブジェクト
変数に格納可能
プログラム内で受け渡し可能
React组件的渲染
-
- 方法1: 組み込みDOMコンポーネントを使用しレンダリング
上記ShoppingListコンポーネントは、
や
-
などのHTML要素でレンダリング
方法2: 自分で書いたカスタムReactコンポーネントをHTMLに差し込む
例えば、事前にShoppingListコンポーネント(クラス)を作成し
と記述することで、ショッピングリストをレンダリング
それぞれのReactコンポーネントはカプセル化され、独立して動作
これにより単純なコンポーネントから複雑なUIを作成可能
最后
开始了React教程。下次也会继续。敬请期待。
