# 初始化项目

# 如何编写代码

1.在浏览器中编写本教程代码-这是上手最快的一种方式了!

Codepen

React 在 0.14 发布(2015),原本的 react package 拆分为 react 和 react-dom。

  • react package 包含 React.createElement、 .createClass、 .Component, .PropTypes, .Children 这些 API;
  • react-dom package 中包含 ReactDOM.render、 .unmountComponentAtNode、.findDOMNode;
  • 原本在服务端渲染用的两个 API .renderToString 和 .renderToStaticMarkup 被放在了react-dom/server 中;

2.在代码编辑器中编写本教程代码 同样,你也可以试着在自己的电脑上搭建起开发运行环境来。为了以后实战,所以后面代码编程我们会在本地编辑器中编程。虽然在本地搭建环境要费一些功夫,但好处是你可以任意选择你惯用的编辑器来完成开发。说得再好不如动手做一次,那么跟着下面的步骤开始搭建吧:

  • 确保你电脑上安装了最新版本的 Node.js
  • 安装脚手架 npm install -g create-react-app
  • 创建项目
create-react-app myapp

# Installing packages. This might take a couple of minutes.
# Installing react, react-dom, and react-scripts with cra-template...

# 为什么需要脚手架

一个普通的网页基本都会包含 HTML,CSS 和 JS 三个关键的元素。这一点多年以来都是没有改变的,但是前端的开发模式已经发生了很大的变化。以往我们写的网页前端代码都是可以通过浏览器打开后能够直接运行的,但是现在对于大部分前端项目来说,我们写的代码其实并不是原生的 JS,HTML 和 CSS,而是基于它们扩展出来的更上层的语法。

本课程(React 小书),将会大量编写 React 组件(实际上 antd 就是 Ant Design 的 React 组件的实现),这些组件需要通过编译为最终的 JS 和 CSS,然后引入到 HTML 网页中才能够被浏览器正确地执行。

由于存在一个编译过程,这就需要基于编译工具搭建一个项目的脚手架,使得我们可以通过工具实现代码的编译。通过编译后的代码才是浏览器能够执行的代码,这样我们才能进行项目的开发和最终的部署。

阅读原文