React シリーズ 1 の学習-React-チュートリアルの完全な分析_html/css_WEB-ITnose

React チュートリアルのサンプルの完全な分析

Talk is easy, Show me the code

最近 React に注目しています React の学習方法については、リンク先の記事を参照して独自の計画を立てることができます。 。千マイルも一歩から始まります。この記事は、React の公式チュートリアルからの例であり、詳細に学習することで、そこから多くのことを学び、進捗状況をみんなと共有するためにここにメモしました。

始めましょう

1. サンプルをダウンロードして解凍します

2. ノード環境により、ダウンロードして解凍した後は、それが配置されているディレクトリで実行するだけで済みます

   npm installnode server.js

3. デフォルトのポート設定は、ブラウザを開いて http://localhost:3000/ にアクセスしてください。

ディレクトリ構造の説明

react-tutorial

--node_modules    --body-parser：express中间件，用于接收和解析json数据    --express：express框架--public    --css        --base.css：基本样式文件    --scripts        -- example.js：React应用js文件    index.html：基本的HTML结构--.editorconfig：用于在不同的编辑器中统一编辑风格（文件编码）的配置文件--.gitignore：git相关配置文件--app.json：web app的相关信息--comments.json：上传的评论数据--LICENSE：项目代码使用协议--package.json：项目所依赖的包，npm install的安装包的配置文件--README.md：项目说明书，里面有使用说明--requirements.txt：不清楚--server.js：服务器端的js代码

アプリ関数

このプロジェクトは、図に示すような単純なアプリケーションを構築します

サーバー側

サーバー側の機能は比較的単純で、コードコメントの形式で分析されます

1. 依存モジュールをインポートします

   var fs = require('fs');  //读写文件var path = require('path'); //路径var express = require('express'); //express框架var bodyParser = require('body-parser'); //中间件

2. アプリを生成して設定します

   //获取comments.json文件的路径var COMMENTS_FILE = path.join(__dirname, 'comments.json');//设置端口app.set('port', (process.env.PORT || 3000));//设置静态文件的文件目录路径app.use('/', express.static(path.join(__dirname, 'public')));//启用bodyParser中间件接收请求，并且接收并解析json数据app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended: true}));

3. レスポンスヘッダー情報を設定する

   app.use(function(req, res, next) {    //允许跨域 CORS    res.setHeader('Access-Control-Allow-Origin', '*');    //缓存设置    res.setHeader('Cache-Control', 'no-cache');    next();});

4. 取得リクエストURLに対応した処理関数を設定(コメントJSONデータを取得)

   app.get('/api/comments', function(req, res) {    //读取comments.json文件，并且解析为json数据    fs.readFile(COMMENTS_FILE, function(err, data) {        if (err) {          console.error(err);          process.exit(1);        }        //读取成功后，返回        res.json(JSON.parse(data));    });});

5. 投稿リクエストURLに対応した処理関数を設定(コメントデータを送信)

   app.post('/api/comments', function(req, res) {    //先读取comments.json文件    fs.readFile(COMMENTS_FILE, function(err, data) {        if (err) {          console.error(err);          process.exit(1);        }        //将文件内容解析为json数据        var comments = JSON.parse(data);        //获取新评论        var newComment = {          id: Date.now(),          author: req.body.author,          text: req.body.text,        };        //添加json数组中        comments.push(newComment);        //将json数据写回到comments.json文件中,并且返回全部的评论数据         fs.writeFile(COMMENTS_FILE, JSON.stringify(comments, null, 4), function(err) {              if (err) {                console.error(err);                process.exit(1);              }              res.json(comments);        });    });});

6. スタート、ポートでリッスンしてください

   app.listen(app.get('port'), function() {  console.log('Server started: http://localhost:' + app.get('port') + '/');});

Web 側

Web 側の中核は、example.js ファイルにあり、公式 Web サイトの情報と組み合わせて、このアプリケーションを分析し、単純な反応アプリケーションを構築する方法を学びます。

コンポーネント構造

React は Web コンポーネントの概念を実装しています。コンポーネント開発方法に従って、このアプリケーションのコンポーネント構造を分析してみましょう (図に示すように):

つまり:

-- CommentBox    -- CommentList        -- Comment    -- CommentForm

コンポーネント間DOM ノードの関係図、props からデータを読み取る

//评论人{this.props.author}//评论的内容{this.props.children}

コメントは MarkDown 構文をサポートしているため、ユーザーが入力したコンテンツを処理するには、マークされたサードパーティ ライブラリを使用する必要があります。

var rawMarkup = marked(this.props.children.toString(), {sanitize: true});

また、出力内容は HTML に解析する必要があり、デフォルトでは XSS 攻撃防止の考慮に基づき、React は出力内容を HTML に解析しません。この時点では、特殊な属性危険なセットインナーHTMLを使用する必要があります。コンテンツをオブジェクトの _html 属性に配置し、このオブジェクトを危険なほどセットインナーHTML属性に割り当てる必要があります。このとき、第 1 レベルのコンポーネント CommentBox によって渡されるデータが生成されます。データに基づいて複数のサブコンポーネント コメント

var html = {_html:"输出的html内容"};<span dangerouslySetInnerHTML={html} />

1. サブコンポーネント コメントを生成するとき、各サブコンポーネントのキー属性を comment.id に設定します。これは、キーがオプションの一意の識別子であるためです。コンポーネントに一意のキーを設定し、そのキーがレンダリング サイクル全体にわたって一貫していることを保証することで、React がコンポーネントを再利用するか破棄して再作成するかをよりインテリジェントに決定できるようになり、レンダリング パフォーマンスが向上します。
   コンポーネント CommentForm
2. コンポーネント CommentForm が行う必要があることは 2 つです

3. 自身の状態 this.state (つまり、フォームに入力されたコメンテーターとコメントの内容) を管理する

フォーム入力が変更されたとき

フォームが送信されるとき

submit イベントがトリガーされると、上位層コンポーネント CommentBox のイベント処理関数が呼び出され、コンポーネント CommentBox の状態が変更されます。

1. var Comment = React.createClass({    rawMarkup : function() {        var rawMarkup =  marked(this.props.children.toString(),{sanitize:true});        return {_html : rawMarkup}; //React的规则，会读取这个对象的_html内容，    },    render : function() {        return (            <div className="comment">                <h2 className="commentAuthor">                    {this.props.author}                </h2>                <span  dangerouslySetInnerHTML={this.rawMarkup()} />            </div>        );    }});

   ここで注目に値する点があります。それは、抽象カスタム イベント commentSubmit と実際のイベント submit の間の接続です。これは非常に実用的なテクニックであり、それがどのように機能するかは次の章で説明します。
   1. コンポーネント CommentBox
      アプリケーション全体の最上位コンポーネントとして、CommentBox が行う必要があることは次のとおりです:

   2. サーバーから既存のコメント データをリクエストする
2. 新しいコメント データをサーバーにアップロードする

管理 独自の状態、状態に応じてビューをレンダリングします (状態変化の図は次のとおりです)

var CommentList = React.createClass({    render : function() {        var commentNodes = this.props.data.map(function(comment){            return (                <Comment author={comment.author} key={comment.id}>                    {comment.text}                </Comment>            );        });        return (            <div className="commentList">                {commentNodes}            </div>        );    }})

最後に、コンポーネント CommentBox を実際の DOM ノードにマウントするだけで、効果がわかります

りー