React的起源

React起源于facebook公司工程师开发时的一个bug，三个消息提示图标右上角的数字显示实时未读消息的数目，过多的操作容易产生问题。

工程师很轻易的排查并解决的bug，但是他们不满足于这个小问题的解决，开始思考出现这种错误背后的原因：

1、传统开发存在问题

过多关注操作界面的细节，同时需要借助jQuery来操纵大量原生DOM
数据是分散的，不利于管理维护

2、解决方法

组件化划分
以jsx维护UI样式
数据集中管理，state来储存组件内部状态，发生变化时再重新渲染页面

3、React特点

声明式编程：UI=F(state)
F就是render函数
- 命令式编程：描述详细路径，例如：一步一步执行for循环
- 声明式编程：告知目的地，例如：map函数直接告诉程序想要什么
组件化开发
多平台适配

React开发依赖

1、依赖三个库

react：核心库，提供核心函数、类
react-dom：根据端（web/native）不同，渲染为不同的组件
babel：将jsx语法解析为js语法，将es6语法解析为js5语法

开始只有react库, 后来为了区分web和native，将web和native的核心代码从react中分离出来成为react-dom

web端：react-dom会将jsx最终渲染成真实dom,显示在浏览器中
native端：react-dom将jsx渲染成原生控件（比如安卓中的Button和IOS中的UIButton）

2、引入三个库

方式一：html文档头引入三个库

    <!-- 安装依赖 --><!-- crossorigin允许远程跨域版本的错误信息在本地也显示出来 --><script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin ></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin ></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

方式二：本地下载react包并引入
方式三：使用npm包管理工具安装react脚手架

React初体验

开发如下小页面：h2标签展示文字Hello World，点击按钮改变文本，Hello World变为Hello React

1、babel使用

需要配置script标签属性为type="text/babel"才可以识别jsx语法

<script type="text/babel"></script>

2、react-dom使用

使用react-dom库中ReactDOM.render函数，将编写的React组件挂载到页面上
第一个入参为：React组件，使用jsx语法
第二个入参为：要挂载到的DOM容器，注意是以替换方式挂载，原来<div id="app"></div>内容会被替换掉
第三个入参为：回调函数，可选，可有可无

<body><div id="app"></div><script type="text/babel">let message = "Hello World";const handleBtnClick = () => {message = "Hello React";};ReactDOM.render(<div><h2>{message}</h2><button onClick={handleBtnClick}>改变文本</button></div>,document.getElementById("app"));</script></body>

存在问题：点击按钮，message改变，但是页面不会重新渲染，所以需要使用react库来管理数据

3、react使用

引入React.Component类作为组件App的父类

App类继承父类的render方法，该方法返回一个jsx语法写的html标签，与ReactDOM.render配合使用
App类继承父类的setState方法，修改数据后启动页面重新渲染

总结

乘风破浪React—01React初体验相关推荐

React 360 初体验介绍与环境搭建
React 360 初体验介绍从这章节内容呢,我们来学习并了解下什么是react 360,并使用它来开发一个360度可旋转大屏的案例项目.接下来,我们就一起来逐步揭开它神秘的面纱吧! 我们本章节将会 ...
React Native 初体验
2015年9月底开始正式接触React native,公司的ios团队用它写了一个安卓项目之后,到上周,公司彻底停止了RN的使用. 至于我们为什么停止使用RN,原因大致有两个: 一.RN对安卓的支持还 ...
ssr Android简书,react ssr 初体验
用到的技术栈 react 16 + webpack3 + koa2 看看它是如何实现服务端渲染的,here we go! 为什么要用服务端渲染优点无非就是两点 SEO 友好加快首屏渲染,减少白屏 ...
React初体验-Hello React的组件化方式-React入门小案例
文章目录 React初体验 Hello React案例演练 Hello React案例升级 Hello React的组件化组件化的方式数据依赖事件绑定其他案例练习电影列表展示计数器的案例 ...
小程序缩放_缩放流星应用程序的初体验
小程序缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
在JS 中使用 fetch 初体验
在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest ...
java代码初体验_第一次Java 8体验
java代码初体验像世界其他地方一样,我深深地爱上了Slack. 为什么? 原因很多,但主要的原因是它提供了一种围绕通讯而非工具真正构建SDLC流程的新方法. 您认为这些天哪个更常见,杂乱无章的机智 ...
taro 重新加载小程序_Taro开发微信小程序的初体验
了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...
vue create()获取ref_vue-next+typescript 初体验
无意间又一次刷到了尤大介绍 Vue 3 的文章,这次决定试一下 Vue 3 的 TypeScript 支持到底如何,不管别人说什么,只有自己用的舒服才是真的舒服.Vue 2 可是因为 ts 的缘故被喷 ...

乘风破浪React—01React初体验