帮酷LOGO
  • 显示原文与译文双语对照的内容
Build a complete React app, step-by-step with the MERN stack

  • 源代码名称:react-tutorial-mern
  • 源代码网址:http://www.github.com/vasansr/react-tutorial-mern
  • react-tutorial-mern源代码文档
  • react-tutorial-mern源代码下载
  • Git URL:
    git://www.github.com/vasansr/react-tutorial-mern.git
  • Git Clone代码到本地:
    git clone http://www.github.com/vasansr/react-tutorial-mern
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/vasansr/react-tutorial-mern
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 使用MERN堆栈进行反应教程

    构建一个完整的React App,使用MERN堆栈

    简介

    这是一个入门教程,使用MERN堆栈来开始。 你不仅学会了反应,还有相关的环境和免费工具,如彗星,快速,吞吐等。

    在不可能的情况下,你首先到达这里,完整的step-by-step指令在这里是 。 阅读并遵循教程。

    1.Hello World

    1.1-index.html-作为文件

    创建 index.html 作为文件,使用( 反应,反应,babel ) 中的所有脚本。 在 <script> 标记之间的HTML中写入 Hello World 元素。

    1.2提供它

    使用 node 和Express来提供HTML文件。

    2.组织

    在构建时而不是运行时将JSX转换为 JS 。

    2.1拆分HTML和 JSX

    将JSX和HTML拆分为单独的文件。

    2.2手动转换

    服务转换的JSX而不是JSX本身。

    3组成组件

    开始构建简单的CRUD应用程序。

    3.1使用 React.createClass

    使用 React.createClass 创建类并呈现它,而不是直接在 ReactDOM.render() 中呈现DOM元素。

    3.2组成

    使用其他组件创建组件。

    3.3通信

    使用道具在零部件间进行通信

    3.4动态组合

    基于数据动态创建多个组件

    4动态更新

    动态更新数据模型并进行渲染。

    4.1创建初始状态

    开始使用状态,准备动态更新。

    4.2更新状态

    动态更新状态并查看魔术。

    4.3

    从子组件到父组件进行通信。

    5.服务器上的数据

    将数据移动到服务器。

    5.1获取 API

    在服务器上实现get以返回记录列表。

    5.2发布 API

    实现一个 POST API来添加新记录。

    5.3使用 get API"

    更改客户端代码以从服务器获取数据。

    5.4使用 POST API

    更改客户端代码以将数据发送到服务器以添加记录。

    6保存到数据库

    保存数据库中的数据。

    6.1初始化

    编写用于初始化MongoDB集合的脚本。

    6.2连接并读取

    创建到数据库的永久连接,更改从数据库读取的API 。

    6.3写入数据库

    更改 POST API以将记录插入到数据库中。

    7.构建和分发包

    模块化,使用browserify来提供所有脚本的包。

    7.1-browserify

    使用browserify手动创建分发包。

    7.2自动 gulp

    使用ate自动完成手动任务。

    7.3 Watchify

    使用watchify查看源文件的更改和自动生成。

    7.4错误处理

    监视时在源文件中记录错误。

    7.5模块模块

    将单个源文件拆分为多个。

    8.过滤

    8.1修改获取 API

    修改获取API以处理带有过滤器的查询字符串。

    8.2硬编码筛选器

    创建用于筛选列表的按钮,使用硬编码过滤器。

    8.3筛选表单

    创建具有受控组件和使用状态的窗体。

    9.路由

    使用路由处理不同的页视图和查询字符串。

    9.1响应路由器

    安装反应路由器并构建前几个路由。

    9.2个URL参数

    使用URL参数初始化过滤器。

    9.3筛选器更改

    将筛选器更改传播到 Bug 列表并双击 URL 。

    9.4组件生命周期

    侦听URL更改,重新加载记录并呈现筛选器 UI 。

    10编辑页面

    添加新的视图/页面,让我们编辑记录。

    10.1获取记录 API

    添加获取API以获取单个记录。

    10.2 PUT API

    添加 PUT API来修改单个记录。

    10.3新路由和页面

    创建新路径和新网页以编辑记录。

    10.4链接

    从两个页面创建链接。

    11.响应引导

    使用react引导 polish UI 。

    11.1开始

    安装并添加简单按钮。

    11.2筛选器

    将过滤器转换为反应引导。

    11.3添加表单

    将添加窗体转换为反应引导。

    11.4表

    将 table 转换为反应引导。

    11.5编辑表单

    将编辑表单转换为反应引导。




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语