Day2React安装方式简介

安装方式

根据官网介绍，本次铁人赛会着重介绍下列三种安装方式:

1. CDN连结
2. 快速建立react环境的Create React App
3. 根据过去写程序的习惯，使用各种方便好用的Toolchain(如Next.js、Gatsby等)

上述三种安装方式简介

• CDN连结:分成开发及程序正式上线时两种版本，一般在想要快速引用react档案时使用，新手刚入门时建议使用此方式帮助理解react运作方式。

<!-- 开发时 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<!-- 专案发布时 -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

• Create React App:一款由Facebook开发的react架构，帮助React开发者瞬间生成一个项目的基础目录结构。安装了Node和npm之後，便可以安装并直接执行create-react-app来创建专案。

npx create-react-app my-app
cd my-app
npm start

-Next.js:一款受欢迎和轻量的框架，用於使用 React所建立的静态和服务器渲染的应用程序。它自身已包括了 styling 和 routing 的方案，建议常使用Node.js作为服务器环境开发的人使用。

• Gatsby:Gatsby 是使用React建立静态网页的最佳方法。它让你使用React的component，但会输出事前渲染好的HTML 和 CSS 来保证最快的载入时间。