1. 初始化项目

本文主要展示如何初始化一个项目,开发出一个井字棋游戏的项目。

1.1. 如何编写代码

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 umi
  • 创建项目

    mkdir myapp && cd myapp
    yarn create umi
    

1.2. 为什么需要脚手架

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

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

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

1.3. 编译工具

前端开发不只涉及到 JS,同时还有 CSS、HTML、图片等资源,以及其他一些文件类型。比如:LESS 脚本可以提高 CSS 的编写效率,TypeScript 可以让你以一种全新的语法去编写你的逻辑。所有这些文件类型,都被纳入了前端研发体系。大部分编译工具都能够处理这些不同类型的资源文件。

开源社区的繁荣,一方面让我们可以有很多工具,但是同时也让项目初始化变得繁琐。

本课程选择使用 umi 作为编译工具。其实 umi 不仅仅是一个编译工具,它同时也是一个前端框架。它对社区的 webpackreact-router 等进行的封装,使得我们可以基于它快速搭建一个 React 项目。

umi 有各种类型的脚手架,方便快速启动项目。为了能够更好地理解 umi 背后的逻辑,将从零开始初始化一个能够运行的脚手架。


results matching ""

    No results matching ""