web前端开发

ReactJS

React最初来自Facebook内部的广告系统项目,项目实施过程中前端开发遇到了巨大挑战,代码变得越来越臃肿且混乱不堪,难以维护。于是痛定思痛,他们决定抛开很多所谓的“最佳实践”,重新思考前端界面的构建方式,于是就有了React。

  • HTML
  • CSS
  • HTML5
  • CSS3
  • JavaScript

ReactJS

  • React教程:4 个 useState Hook 示例

    React教程:4 个 useState Hook 示例

    到 React 16.8 目前为止,如果编写函数组件,然后遇到需要添加状态的情况,咱们就必须将组件转换为类组件。
    编写 class Thing extends React.Component,将函数体复制到render()方法中,修复缩进,最后添加需要的状态。

    admin:杨小二时间:2019-10-09

    阅读全文
  • React Navtive框架教程05-弹性盒子模型

    React Navtive框架教程05-弹性盒子模型

    一直以来,我们都在用原始的CSS属性来设置外边距、内边距和颜色。但是,最新的CSS规范中增加了弹性盒子的概念,非常利于我们对App的UI进行布局,虽然你可能还不太熟悉它。

    admin:杨小二时间:2019-09-23

    阅读全文
  • ReactJS 开发过程中的个人心得

    ReactJS 开发过程中的个人心得

    在我目前开发的项目中,前端UI框架使用的是framework7,ReactJS用来构建用户界面,reflux用来操作数据(主要负责数据请求和数据操作)。

    admin:杨小二时间:2019-09-19

    阅读全文
  • React Navtive框架教程01

    React Navtive框架教程01

    什么是HTML文本格式化HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。如下代码:<p>TThis text is normal</p><b>This text is bold</b><br /><strong>This text is str

    admin:杨小二时间:2019-08-12

    阅读全文
  • React的设计哲学 - 简单之美

    React的设计哲学 - 简单之美

    React最初来自Facebook内部的广告系统项目,项目实施过程中前端开发遇到了巨大挑战,代码变得越来越臃肿且混乱不堪,难以维护。于是痛定思痛,他们决定抛开很多所谓的“最佳实践”,重新思考前端界面的构建方式,于是就有了React。

    admin:杨小二时间:2019-08-12

    阅读全文
  • React的state状态管理

    React的state状态管理

    在使用react的状态管理的过程,如果我们不使用封装好的状态管理工具的话,我们就需要对state进行状态的提升的时候就会涉及到两种情况:
    父组件向子组件传值
    子组件向父组件传值
    首先,我们先看一下父组件如何向子组件传递值,这个方式很简单,就是直接从父组件以props的方式传递到子组件中。

    admin:杨小二时间:2019-08-12

    阅读全文
  • 翻译 | 从 ReactJS 到 React-Native—两者的主要差异是什么

    翻译 | 从 ReactJS 到 React-Native—两者的主要差异是什么

    React-Native已经诞生有两年左右了,自从适配了Android平台,能构建跨平台移动App开始,这套框架变得更有意思了。一些contributors甚至将其适配到Mac和Windows平台,听起来非常酷。

    React-Native跟ReactJS非常相似,但是在开始尝试你第一个native app之前,也需要了解两者之间的一些差异。作为一个正在学习使用React-Native,并已经用它尝试构建过几个原生app的ReactJS web开发者,我将在本文给大家介绍我发现的二者之间的一些区别。

    admin:杨小二时间:2019-08-12

    阅读全文
  • React Navtive框架教程02

    React Navtive框架教程02

    在开始编写这个房产搜索App之前,我们先来创建一个简单的Hello World项目。我们将通过这个例子来演示React Native的各个组件和概念。
    用你喜欢的文本编辑器(例如Sublime Text)打开index.ios.js ,删除所有内容。然后加入以下语句:

    admin:杨小二时间:2019-08-12

    阅读全文
  • React开发神器Webpack

    React开发神器Webpack

    上一篇我们对React有了一个总体的认识,在介绍其中的技术细节之前,我们首先来了解一下用于React开发和模块管理的主流工具Webpack。称之为React开发神器有点标题党了,不过Webpack确实是笔者见过的功能最为强大的前端模块管理和打包工具。虽然Webpack是一个通用的工具,并不只适合于React,但是很多React的文章或者项目都使用了Webpack,尤其是react-hot-loader这样的神器存在,让Webpack成为最主流的React开发工具。

    admin:杨小二时间:2019-08-12

    阅读全文
  • React生命周期

    React生命周期

    从广义上面说:生命周期泛指自然界和人类社会中各种客观事物的阶段性变化及其规律。自然界的生命周期,可以分为出生、成长、成熟、衰退直至死亡。而不同体系下的生命周期又都可以从上述规律中演化出来,运用到软件开发的生命周期中,这二者看似相似,事实上又有所不同。生命体的周期是单一方向不可逆的过程,而软件开发的生命周期会根据方法的不同,在完成前从前开始。

    admin:杨小二时间:2019-08-12

    阅读全文
  • 推荐 10 个 ReactJS 入门资源

    推荐 10 个 ReactJS 入门资源

    React 是发展非常迅速的 JavaScript 库,可以让开发者更快的构建用户界面。自从 React 发布以来,已经快速成为了大多数人寻求的框架类别之一。即使 React 已经非常简单易用,但是还有很多社区成员一直在探讨抛弃其他所有,只使用单个框架的实际益处。

    根据这些讨论,似乎现在主要争论的是 React 现在还不是一个全栈框架,不像 Meteor (学习 Meteor) 和 AngularJS (React 和 Angular 之间的比较), 所以也没有完全被采用。同时,React 的语法混

    admin:杨小二时间:2019-08-12

    阅读全文
  • React Navtive框架教程03

    React Navtive框架教程03

    前面我们用React.createElement构建了一个简单的UI ,React 会将之转换为对应的本地对象。但对于复杂UI来说(比如那些组件嵌套的UI),代码会变得非常难看。
    确保App保持运行,回到文本编辑器,修改index.ios.js中的return语句为:

    admin:杨小二时间:2019-08-12

    阅读全文
  • 理解JSX和组件

    理解JSX和组件

    通过前两篇文章的介绍,相信大家对JSX和组件已经有了一定的了解。JSX这种混合使用JavaScript和XML的语言第一眼看上去很“丑”,也很神奇,但是其语法和背后的逻辑却极其简单。相信读完本文你就可以对JSX和组件有一个全面的了解,并能够用JSX来直观的构造用户界面。

    admin:杨小二时间:2019-08-12

    阅读全文
  • React数据流

    React数据流

    在React中,数据是自顶向下单向流动的,即从父组件到子组件。这条原则让组件之间的关系变得简单且可预测。
    state与props是React组件中最重要的概念,如果顶层组件初始化props,那么React会向下遍历整棵组件树,重新尝试渲染所有相关的子组件。而state只关心每个组件自己内部的状态,这些状态只能在组件内改变。把组件看成一个函数,那么它接受了props作为参数,内部由state作为函数的内部参数,返回一个virtual DOM实现。

    admin:杨小二时间:2019-08-12

    阅读全文