开始学习react基础及环境

认识react

用于构建用户界面的 JavaScript 库
特点:
1. 声明式编程
2. 一切组件化 (组件可以将UI切分成一些独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件)
3. 生态圈强大【一次学习,随处编写】
4. 自上而下的单一数据流
5. 主推的jsx语法
6. 函数式编程

关于声明式编程 和 命令式编程

开始学习react基础及环境

开始学习react基础及环境

 

先认识一下windows系统的 终端

$  windows + r (键盘上的windows的图标的那个按键)调出终端, 输入cmd,点击确定,就调出来终端了

开始学习react基础及环境    开始学习react基础及环境

但这个终端比较难用, 开发中一些常用dos 命令: 

切换盘符,创建文件,文件夹,清屏等,各种指令不支持

推荐一款新的终端  cmder  ,功能比较强大,支持mac  windows  系统上的 各种dos 命令 

开始学习react基础及环境

cmder下可用的 dos命令:

$    盘符号:                       // 切换盘符

$    ls 或者dir                      //  查看目录

$    cd 文件名                     //  进入某个文件

$    cd ..                              // 返回上一步

$    mkdir 文件夹名            // 创建文件夹

$    touch 文件名                // 创建文件

$    cls   清屏                             

$    pwd            // 查看目录                  

以后所有的学习都是在官方脚手架的基础上(相信很基础的es5语法,再各大 大神 的网站都能找到)

搭建官方脚手架(关于脚手架怎么搭建的,参考 webpack 官方教程 )

脚手架文档

1. 安装node   直接官方下载安装,安装完成后再终端执行
$   node -v
$   npm -v

2.  由于npm比较慢, 所以使用yarn代替npm   安装yarn 
$   npm i yarn -g

3. npx直接拉取官方脚手架模板,npx 是 node 自带的,可以避免全局安装模块
$   npx create-react-app project_name

4. 全局安装模式
$   yarn add create-react-app global

5. 创建项目
$   create-react-app project_name 

 

开始学习react基础及环境

开始学习react基础及环境

按Enter 后 就在桌面 创建了 一个 名为 kugou 的raect 项目 

开始学习react基础及环境

动图演示

开始学习react基础及环境

创建完成,再 vscode 打开

开始学习react基础及环境

项目目录

开始学习react基础及环境

开始学习react基础及环境

开始学习react基础及环境

启动项目

打开README.md文件,可以看到 项目 启动指令

开始学习react基础及环境

再项目根目录下执行

npm start   或者 yarn start 启动项目

开始学习react基础及环境

开始学习react基础及环境