React的核心思想:封装组件,再由组件构成复杂页面,同时各个组件维护自己的状态和UI,当状态发生变化,自动重新渲染整个组件。
React 是一个用于构建用户界面的JavaScript库,它起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
React主要用于构建UI,而且性能出众,代码逻辑简单,所以我打算好好研究一下,既满足了自己的好奇心,也提高一下自己的技术水平。
在学习的过程中我参考了阮大大的React教程和React 官方文档
React特点
- 声明式设计 : 以声明式编写UI,可以让你的代码更加可靠,且方便调试
- 高效 : React通过对DOM的模拟,最大限度的减少与DOM的交互
- 灵活 : 提供了可以调用其他第三方框架或库的接口
- JSX : JSX是JavaScript语法的扩展,建议开发过程中使用它
- 组件 : 通过React构建拥有各自状态的组件,再由组件构成更加复杂的界面,代码更加容易得到复用
- 单向响应的数据流 : React实现了单向响应的数据流,减少了重复代码
创建新应用
1.React可以直接下载使用,下载包中提供了很多学习的实例,可以去官网下载最新版
2.使用create-react-app构建React开发环境(需要安装node.js,另一系列文章中会提到node的安装,大家也可自行搜索安装方法)
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境
create-react-app 自动创建的项目是基于 Webpack + ES6
执行以下命令创建新项目:
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
在浏览器中打开 http://localhost:3000/ ,结果如下图所示:
项目的目录结构如下所示 :
尝试修改src/App.js文件里的代码 :
修改之后再打开 http://localhost:3000/ (一般会自动刷新), 会发现输出结果已经改变:
当你准备好将其部署到生产环境中时,运行 npm run build 将会在 build 文件夹中创建一个优化好的应用
该文章同步在 :
简书 : https://www.jianshu.com/users/63adfe13324c/timeline
GitHub Page : https://levinhax.github.io