构建用户界面的 JavaScript 库 ReactJS

构建用户界面的 JavaScript 库 ReactJS

MIT
JavaScript 查看源码»
跨平台
Facebook
2013-05-30
红薯

React(有时叫React.js或ReactJS)是 Facebook 推出的一个为数据提供渲染为 HTML 视图,用来构建用户界面的开源 JavaScript 库。

React 视图通常采用包含以自定义 HTML 标记规定的其他组件的组件渲染。React 为程序员提供了一种子组件不能直接影响外层组件("data flows down")的模型,数据改变时对 HTML 文档的有效更新,和现代单页应用中组件之间干净的分离。

特性:

声明式

  • React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。以声明式编写 UI,可以让你的代码更加可靠,且方便调试。

组件化

  • 创建好拥有各自状态的组件,再由组件构成更加复杂的界面。无需再用模版代码,通过使用 JavaScript 编写的组件你可以更好地传递数据,将应用状态和 DOM 拆分开来。

一次学习,随处编写

  • 无论你现在正在使用什么技术栈,你都可以随时引入 React 开发新特性。React 也可以用作开发原生应用的框架 React Native。

示例代码:

一个简单的组件

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}
ReactDOM.render(
  <HelloMessage name="John" />,
  mountNode
);

输出:Hello John

的码云指数为
超过 的项目
加载中

评论(13)

h
heshanfu
推荐一个不错React js UI / UX库的精选列表:React.js Examples
w
wolf_haung
感觉又有点回到cs的年代
FutureElement
FutureElement
不太喜欢jsx语法 #ReactJS#
FutureElement
FutureElement
不太喜欢jsx语法 #ReactJS#
曾建凯
曾建凯
手贱用重新用 #ReactJS# 写了个table view,发不发博客呢?
曾建凯
曾建凯
国内很少见大规模应用ReactJS的案例,我发一个基于 #ReactJS##Semantic-UI# 的案例吧:http://erp-demo.yhzp.co/ ,测试账号/密码:zjk/123123。目前业务逻辑调整中,所以这个版本可以作为一个预览版本。(前一条动弹因为一些原因删除了)
MartinBockZhu
MartinBockZhu
mark #ReactJS#
曾建凯
曾建凯
#ReactJS# 对于前端解耦、HTML代码重用,的确有很大建树——不过基于一个前提,是你做了足够充分的封装。
曾建凯
曾建凯
发起一个项目#ReactJS# + #Semantic-UI#,第二个CSS框架作为可替换为任意的CSS框架,如#Bootstrap#等。近期会先发布一个先期preview。有木有感兴趣的同学?
vidy_tu
vidy_tu
一直很好奇这种标签式的语法是怎么写在Js里面,才发现FB用js做了一套语法分析 #ReactJS#

React 16.8.4 发布,构建用户界面的 JavaScript 库

React 16.8.4 发布了,React 是 Facebook 推出的一个为数据提供渲染为 HTML 视图,用来构建用户界面的开源 JavaScript 库。 此版本更新如下: React DOM and other renderers 修复了检查使用...

03/07 07:34

React v16.8.2 发布,构建用户界面的 JavaScript 库

React v16.8.2 已发布,该版本没有引入任何新特性,主要是修复 bug。 React DOM 修复在 useEffect 中忽略 ReactDOM.render 的问题 (@gaearon in #14799) 修复移除空 portals 时出现的崩溃问题...

02/15 08:59

React v16.8 发布:带来稳定版的 Hooks 功能

React v16.8 版本已于2月6日发布,最值得关注的更新莫过于带来了稳定版的 Hooks 功能。 hooks 可以让你在不编写类的情况下使用 state 和 React 的其他功能。你还可以构建自己的 hooks,在组件...

02/12 08:32

HackerRank:JavaScript 是最知名的编程语言

HackerRank 于昨日发布了 2019 年版的年度《开发者技能报告》,报告调查了来自 100 多个国家的 71000 余名软件开发者。HackerRank 是国外一家知名的招聘平台,面向求职者提供了编程练习、面试...

01/30 09:35

Hacker News 12 月招聘趋势:React 已霸榜 19 个月

Hacker News 近日发布了2018年12月的招聘趋势榜,数据显示,React 在 2018 年一直保持着领先地位,如果再算上2017年的数据,React 已经连续 19 个月成为最吃香的技能。 而且从目前的走势来看...

01/05 08:06

React 16.7.0 发布,构建用户界面的 JavaScript 库

React 16.7.0 发布了,此版本更新如下: React DOM 提高 React.lazy 在加载大量延迟加载组件的性能。 (@acdlite in #14429) 卸载组件时会清除字段,以避免内存泄漏。 (@trueadm in #14276) 修...

2018/12/21 07:02

React 16.6.3 发布,构建用户界面的 JavaScript 库

React 16.6.3 发布了,此版本更新如下: React DOM 修复 Suspense 和 lazy 中的 bug。 (@acdlite in #14133, #14157, and #14164) 修复 React DevTools 中 React.memo 更新的高亮显示。(@bva...

2018/11/14 06:57

React v16.6.0 发布,新增 lazy, memo 和 contextType 等便捷特性

React 开发团队于2018年10月24日在官方博客宣布了 React 16.6.0。开发团队表示,该版本新增了不少便利的特性,下面我们不妨去了解一下吧! 按照官方的说法,React.memo() 主要是用于函数式组...

2018/10/25 08:11

React Fire:React DOM 的改造计划,使其更现代化

React 开发者,同时也是 Redux 和 Create React App 作者之一的 Dan Abramov gaearon 昨日在 React 的 GitHub 仓库提了一个这样的 issue —— React Fire: Modernizing React DOM(React Fir...

2018/09/02 04:16

没有更多内容

加载失败,请刷新页面

29
回答
准备组建3-5人的前端团队,技术选型react和vue,应该选哪个呢

个人后端出身,准备组建3-5人的前端团队,技术选型react和vue,应该选哪个呢,请有经验的建议。

2018/06/20 18:52
1
回答
27
回答
高手问答第 210 期 —— 前端开源狂热专家带你深入 React 技术
博文视点 的回答 2018/09/11 17:44
最佳答案
高手问答第 210 期 —— 前端开源狂热专家带你深入 React 技术 @fattypanda @NotFound403 @varHarrie @Andrew1985 @vr和ar加油努力 恭喜以上五位网友或获得《React状态管理与同构实战》图书一本 请私信 @博文视点 告知快递信息(格式...
34
回答
高手问答第 195 期 — 前端框架的后起之秀:React 进阶之路
局长 的回答 2018/05/08 10:35
最佳答案
高手问答第 195 期 — 前端框架的后起之秀:React 进阶之路 @idisikx @cnc2007 @陈雄 @brucewang41 @李大胆 恭喜以上五位用户获得《React进阶之路》图书一本 请尽快私信@局长 告知快递信息(格式:姓名+电话+地址),感谢支持~
2
回答
react 项目怎么部署到服务器

我npm run build 后 把dist文件放到服务器 没办法访问

2017/02/27 17:47
2
回答
怎么运行别人写好的reactjs项目
boystudio 的回答 2017/05/27 19:04
最佳答案
1. 首先安装nodejs最新稳定版,配置环境变量,使得node和npm命令能正常运行,自己去官方下载; 2. 在项目下运行 npm install 安装依赖 3. 然后看项目下的README.md,一般有指引教你如何运行。 若没有指引,那就看项目下的package.json,里面会有一些说明...
29
回答
OSC 第 134 期高手问答 — React 全栈整合开发

OSCHINA 本期高手问答(2016 年 11 月 21 日 — 11 月27 日)我们请来了@vikingmute 张轩和@nighca 杨寒星为大家...

2016/11/21 14:46
3
回答
2016年度——React.js 最佳实践

最近React(web/native)依旧如火如荼,相信大家都跃跃欲shi,我们团队也开始在React领域有所尝shi. 2016年应该是 React 逐...

2016/03/24 11:48
2
回答
结合 ES6+ 开发 React 组件

这是 Steven Luscher 写的一篇关于 React 的文章,Steven Luscher 擅长使用 React 和 GraphQL 构建应用。 ...

2015/07/09 17:12
6
回答
如果只让你推荐一款web前端框架/ui的话,你会推荐哪个呢?

ReactJS ionic semantic-ui Amaze UI 现在我们要做手机web版,和app里面的webview页在,如果只让你推荐一款web...

2015/09/24 15:51

没有更多内容

加载失败,请刷新页面

react native 0.56.0

0.56.0 更新日志 能力有限,如有问题,请包涵(哈哈)原文请点击 欢迎 React Native 2018年6月份正式版的发布,超过53位捐献者提供797次提交,非常感谢你们每一位。 在您阅读本文的此刻,这个...

2018/07/17 14:39
74
0
React Native for Android 官方文档中文版(最新)全国首发

Facebook 于 2015 年 9 月 15 日发布了 React Native for Android, 把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台--Android。极客学院 Wiki 团队(http://wiki.ji...

2015/09/18 14:26
205
1
可代替Dropbox

React的开源许可证 React最初的开源许可证为Facebook 在BSD许可证基础上附加了专利防御保护条款,即BSD+Patents license。 解读 原许可证在著作权授权使用(BSD)的基础上添加了防御性专利侵...

2018/08/22 11:19
3
0
ReactJS基础视频教程

React是什么? React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。 Facebook开源了React,这是该公司用于构建反应式图形界面的JavaScript库,已经应用于构建Instagram网站及...

2016/04/17 16:38
235
1
Got JS Exception: ReferenceError: Can't find varia

在Android Studio上首次运行(react-native)AwesomeProject(导入android即可),出现了一下问题 Got JS Exception: ReferenceError: Can't find variable: __fbBatchedBridge 01-27 03:24...

2016/01/27 17:02
524
1
React Native 学习资料

React Native常见错误与示例:https://toutiao.io/subjects/84686 React学习: https://toutiao.io/subjects/1145 浪客书心学react全栈:https://toutiao.io/subjects/132403 江清清的技术专栏...

2016/11/22 18:05
9
0
Reactjs 辅助工具小结

classnames https://github.com/JedWatson/classnames 主要是为了辅助在组件上面设置是否存在class <li> className={classNames({ "xxx" : true, "ddd" : false })...

2016/06/07 11:31
38
0
Getting Started with React(免积分下载)

使用reactjs构建动态实时应用程序是一种简单而强大的方法 关于这本书 *了解如何使用reactjs开发功能强大的javascript应用程序。 * 在使用react组件时,将一个基于反应性的应用程序与外部api...

01/06 11:41
1
0
Getting Started with React(免积分下载)

使用reactjs构建动态实时应用程序是一种简单而强大的方法 关于这本书 *了解如何使用reactjs开发功能强大的javascript应用程序。 * 在使用react组件时,将一个基于反应性的应用程序与外部api...

01/06 11:49
1
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部