前端框架react自学之初见react(一)
终极目标：掌握和使用react
本博客目的：记录react学习的进度和心得（初见react）
内容：通过视频学习，掌握react基础语法。
前端框架react自学之初见react(一)
React 构建用户界面的JavaScript库，主要用于构建UI界面。Instagram，2013年开源。
特点：
1、声明式的设计
2、高效，采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作。
3、灵活，跟其他库灵活搭配使用。
4、JSX，俗称JS里面写HTML，JavaScript语法的扩展。
5、组件化，模块化。代码容易复用，2016年之前大型项目非常喜欢react
6、单向数据流。没有实现数据的双向绑定。数据-》视图-》事件-》数据
创建项目
1、通过script引入使用，仅用于学习调试使用
1 | <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> |
2、通过react的脚手架，创建项目进行开发，部署。
- 安装脚手架Create React App。
npm install -g create-react-app（全局安装）
- 创建项目
create-react-app helloworld(项目名称可以自定义，但是不允许大写字母)
脚手架创建项目的目录结构
node_modules是一些依赖包
public是一个公共资源文件夹，其中的manifest.json是用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息。是扩展的配置文件，指明了扩展的各种信息；robots.txt 表示文件允不允许被爬虫爬，当然也是一种“防君子不能防小人”
src是放源码的地方。特别的是导入react，使用了JSX（JS的扩展语言），然后使用函数式组件进行项目的开发。此外，src文件夹还有一些用于测试的文件。
.gitignore就是git忽视的东西，例如我们使用git把我们的项目传至github，node_modules就是被忽略的，因为太大了也没必要上传。可以通过packag.json得到相关包依赖关系，到时候下载项目并npm install就可以在线把相关包依赖下载到本地了。
这个package-lock.json 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。
packag.json除了记载有相关包依赖关系和配置关系，浏览器适配信息等，还有一些比较常用功能，如“scripts”（脚本命令）中，“start”是开发测试项目，“build”是构建发布项目，“test”和“eject”是用于检查。
注意
我们在真实用脚手架创建项目的时候，使用npm start进行调试时，可能需要对webpack指定版本进行安装。
注意卸载webpack时还需要卸载webpack-cli ，4.0版本后的webpack都带有webpack-cli:
1 | npm un webpack |
然后再把提示报错的版本安装上，如:
1 | npm i webpack@4.XX.X |