react 第零章 入门

第零节 我为什么使用react

• 技术文档丰富
• 可以开发学好react 在后面可以使用react 全家桶 rn 等
• 虚拟 DOM；
• 组件化；
• 声明式代码；
• 单向数据流；
• 纯粹的 JavaScript 语法；

第一节 react 环境搭建

第一步： 确保你安装了较新版本的 Node.js。
以苹果电脑为例子（查询是否安装）

• 知识点 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

第二节 创建一个项目

学习一种语言需要慢慢等了解它，对它知根知底

  npx create-react-app <项目名>

• 知识点
  npx是一种在npm中安装工具，也可以被单独的下载使用
  在npm 5.2.0 的时候发现会买一送一，自动安装了npx。
• npm 是什么？
  npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包
  
  创建成功后 会提示你怎么进入项目和启动项目
  
  在命令行中输入

  cd demo 

yarn start

• 知识点
• yarn是facebook发布的一款取代npm的包管理工具。
  yarn的特点：速度超快。
  Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。
  超级安全。
  在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。
  超级可靠。
  使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作

这样react 等项目就创建完成

创建完项目后我们看下这个项目等目录结构

项目为我们创建三个目录和一些文件

• node_modules文件夹 node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。
• public文件夹 public #公共资源文件
• src 文件夹 #项目源码文件

删除代码，我们创建自己等项目

删除 创建项目自动生成等这几个文件

写第一句代码

万事开头难，往后更艰难

• 知识点

1. react-dom 的 package 提供了可在应用顶层使用的 DOM（DOM-specific）方法 详情请查看此链接点击跳转

ReactDOM.render() 会控制你传入容器节点里的内容。当首次调用时，容器节点里的所有 DOM 元素都会被替换，后续的调用则会使用 React 的 DOM 差分算法（DOM diffing algorithm）进行高效的更新。

ReactDOM.render() 不会修改容器节点（只会修改容器的子节点）。可以在不覆盖现有子节点的情况下，将组件插入已有的 DOM
节点中。

ReactDOM.render() 目前会返回对根组件 ReactComponent 实例的引用。
但是，目前应该避免使用返回的引用，因为它是历史遗留下来的内容，而且在未来版本的 React 中，组件渲染在某些情况下可能会是异步的。
如果你真的需要获得对根组件 ReactComponent 实例的引用，那么推荐为根元素添加 callback ref。

使用 ReactDOM.render() 对服务端渲染容器进行 hydrate 操作的方式已经被废弃，并且会在 React 17
被移除。作为替代，请使用 hydrate()。

在App 文件里 输入rcc 会自动生成一个组件 rcc 为工具等一个快捷键

这样一个工程到项目就创建好了。