TypeScript + React 环境搭建

React

  • 安装 vscode 或者 webstrom 代码编辑器
  • TypeScript 开发环境搭建
    • 1.1、下载 node.js
    • 1.2、安装 node.js
    • 1.3、npm 安装 typeScript
    • 1.4、创建和编写 ts 文件
    • 1.5、编译
    • 1.6、运行 js文件
  • React 环境搭建
    • 2.1、homebrow
    • 2.2、安装 cnpm:
    • 2.3、安装yarn:
    • 2.4、安装创建React App脚手架
    • 2.5、搭建环境
      • 2.5.1、测试环境,非正式场合使用
      • 2.5.2、正式版本使用

安装 vscode 或者 webstrom 代码编辑器

https://code.visualstudio.com/

https://www.jetbrains.com/webstorm/

TypeScript 开发环境搭建

1.1、下载 node.js

https://nodejs.org/en

1.2、安装 node.js

一顿下一步,npm 也会直接安装上,现在的版本环境变量也无需自己配置

node -v
npm -v

检测是否安装成功。

1.3、npm 安装 typeScript

sudo npm install -g typescript

然后再检测是否安装成功

tsc -v

1.4、创建和编写 ts 文件

1.5、编译

当前目录编译,编译成JS代码

tsc ts文件.ts

1.6、运行 js文件

node 02_basis.js

React 环境搭建

2.1、homebrow

https://zhuanlan.zhihu.com/p/607620531

2.2、安装 cnpm:

npm install -g cnpm -registry=https://registry.npm.taobao.org

2.3、安装yarn:

cnpm install -g yarn

2.4、安装创建React App脚手架

为2.5.2准备

cnpm install -g create-react-app

实在不行使用:

npx create-react-app create-react-app 

https://blog.csdn.net/qq_28838891/article/details/124574626

2.5、搭建环境

2.5.1、测试环境,非正式场合使用

TypeScript + React 环境搭建_第1张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

</body>
</html>

2.5.2、正式版本使用

执行以下命令创建项目:
create-react-app my-app
cd my-app/
npm start

你可能感兴趣的:(React,typescript)