开始学习react基础及环境

认识react

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

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

先认识一下windows系统的 终端

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

    

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

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

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

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 

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

动图演示

创建完成,再 vscode 打开

项目目录

启动项目

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

再项目根目录下执行

npm start   或者 yarn start 启动项目

发布了63 篇原创文章 · 获赞 100 · 访问量 31万+

猜你喜欢

转载自blog.csdn.net/qq_36407748/article/details/89711430