index.html

---
layout: default
---

<div class="header">
    <h1>{{ site.name }}</h1>
    <ul>
        {% for item in site.data.navigation %}
        <li><a href="{{ item.url }}">{{ item.title }}</a></li>
        {% endfor %}
    </ul>
</div>
<div class="content">
  <div class="block">
    <p>这是一本关于 React.js 的小书。</p>
    <p>因为工作中一直在使用 React.js，也一直以来想总结一下自己关于 React.js 的一些知识、经验。于是把一些想法慢慢整理书写下来，做成一本开源、免费、专业、简单的入门级别的小书，提供给社区。希望能够帮助到更多 React.js 刚入门朋友。</p>
    <p>由于水平有限，编写的过程难免会有诸多错误，也希望大家在看的过程中发现了问题，可以在 <a href='https://github.com/huzidaha/react-naive-book' target='_blank'>Github</a> 上给该项目发 Pull Request。衷心希望可以有更多的人参与到本书的编写当中。</p>
    <p>2017-06-09 更新：本书所有练习题已经在 <a href='https://scriptoj.com/problemsGroups/593a2e29b3838c385539fa4f' target="_blank">ScriptOJ</a> 上线，读者朋友们可以直接在线进行练习。</p>
  </div>
  <div class="block">
    <h2>本书介绍</h2>
    <p>本书为有一点前端基础的并且是 React.js 零基础的同学而作，帮助他们掌握 React.js 并且灵活地把 React.js 应用到实际项目当中。如果你有一定的 HTML、CSS、JavaScript 基础并且希望学习 React.js，而又觉得 React.js 当中有些概念比难以接受和理解，希望能够从零开始学习，那么本书很适合你。但如果你已经对前端已经非常熟悉并且用过不少的前端框架和相关的组件化技术，建议你直接看官网文档。</p>
    <p>本书并不会文档式地包含所有知识点，只会提炼实战经验中基础的、重要的、频繁的知识进行重点讲解，让你能用最少的精力深入了解实战中最需要的 React.js 知识和套路，轻装上路。如果需要更多更全面的知识点，可以参看更多的官方文档或者其他丰富的资料。</p>
    <p><b>另外，本书全书采用 ECMAScript 2015，阅读之前请确保自己已经掌握了 ECMAScript 2015 的基本语法，否则阅读起来会非常困难。</b></p>
    <p>本书初定分为三个阶段，每个阶段最后会有实战分析，把该阶段的知识点应用起来。</p>
    <p><b>第一个阶段</b>：希望能让读者掌握 React.js 的基本概念和基础知识。包括问题的根源：前端组件的复用性问题、数据和视图的同步问题。了解清楚问题以后再了解 React.js 的基础知识，包括 JSX、事件监听、state、props、列表渲染等。看看 React.js 是怎么解决这些问题的。这个阶段结束以后，读者就可以可以运用 React.js 构建简单的页面功能。</p>
    <p><b>第二个阶段</b>：让读者更进一步了解 React.js，包括组件生命周期及其含义、state 和 props 的进阶概念、props 验证及其意义、组件组合进阶、如何和 DOM 打交道、并且开始引入前端应用状态管理所存在的问题。</p>
    <p><b>第三个阶段</b>：让读者掌握 React.js 较为高级的概念，包括高阶组件、context。并且通过引入 React-redux 来协助我们构建较为完整的前端应用，还会开始深入讨论前端应用状态管理的问题；关于 React-router 也会有所提及。</p>
  </div>
  <div class="block">
    <h2>目录</h2>
    <b>第一个阶段</b><img class='badge' src='https://img.shields.io/badge/已完成-100%25-brightgreen.svg' />
    {% assign posts = site.posts | reverse %}
    <ul class="table-of-content">
        {% for post in posts %}
        {% if forloop.index <= 16 %}
        <li><span class="date">Lesson {{forloop.index}}</span> - <a href="{{ site.site_root }}{{ post.url }}">{{ post.title }}</a></li>
        {% endif %}
        {% endfor %}
    </ul>
    <p>
      <b>第二个阶段</b><img class='badge' src='https://img.shields.io/badge/已完成-100%25-brightgreen.svg' />
      <ul class="table-of-content">
          {% for post in posts %}
          {% if forloop.index > 16 and forloop.index <= 27 %}
          <li><span class="date">Lesson {{forloop.index}}</span> - <a href="{{ site.site_root }}{{ post.url }}">{{ post.title }}</a></li>
          {% endif %}
          {% endfor %}
      </ul>
    </p>
    <p>
      <b>第三个阶段</b><img class='badge' src='https://img.shields.io/badge/已完成-100%25-brightgreen.svg' />
      <ul class="table-of-content">
          {% for post in posts %}
          {% if forloop.index > 27 %}
          <li><span class="date">Lesson {{forloop.index}}</span> - <a href="{{ site.site_root }}{{ post.url }}">{{ post.title }}</a></li>
          {% endif %}
          {% endfor %}
      </ul>
    </p>
  </div>
  <div class="block">
    <h2>特别鸣谢</h2>
    <p>
      特别感谢以下朋友对本书所做的审校工作，给本书提出了很多宝贵的改进意见：<br>
      <ul>
        <li>
          <a href='https://github.com/kuangwk/' target='_blank'>邝伟科</a> - 腾讯 Web 前端工程师
        </li>
        <li>
          <a href='https://github.com/hipoyang/' target='_blank'>杨海波</a> - 百度 Web 高级前端工程师
        </li>
        <li>
          <a href='https://github.com/brucexiejunling/' target='_blank'>谢军令</a> - 天猫 Web 前端工程师
        </li>
        <li>
          <a href='https://github.com/livoras/' target='_blank'>戴嘉华</a> - 前微信 Web 前端工程师
        </li>
      <ul>
    </p>
  </div>
  <div class="block">
    <h2>联系作者</h2>
    <ul style='padding-left: 0px;'>
      <li style='padding-left: 0px;'>邮箱：huzidaha@126.com</li>
      <li style='padding-left: 0px;'>知乎：<a href='https://www.zhihu.com/people/hu-zi-da-ha' target='_blank'>@胡子大哈</a></li>
      <li style='padding-left: 0px;'>专栏：<a href='https://zhuanlan.zhihu.com/qianduandaha' target='_blank'>@前端大哈</a></li>
      <li style='padding-left: 0px;'>
        加入《React.js 小书》读者交流群，一起讨论、交流、学习前端技术。
        <p style='text-align: center;'><img class='wechat' src='{{ site.static_path }}/assets/img/wechat-user.jpeg' /></p>
      </li>
    </ul>
  </div>
  <div class="block">
    <h2>License</h2>
    <p>本作品采用 <a href='https://creativecommons.org/licenses/by-nd/4.0/legalcode' target='_blank'>署名-禁止演绎 4.0 国际许可协议</a> 进行许可</p>
  </div>
</div>