前端开发者学堂 - fedev.cn
    发布于

    React.js小书:组件的 render 方法

    React.js 中一切皆组件,用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候,一般都需要继承 React.js 的 Component(还有别的编写组件的方式我们后续会提到)。一个组件类必须要实现一个 render 方法,这个 render 方法必须要返回一个 JSX 元素。但这里要注意的是,必须要用一个外层的 JSX 元素把所有内容包裹起来。

    胡子大哈 胡子大哈
    阅读全文
    发布于

    React.js小书:使用 JSX 描述 UI 信息

    这一节我们通过一个简单的例子讲解 React.js 描述页面 UI 的方式。要记住几个点:JSX 是 JavaScript 语言的一种语法扩展,长得像 HTML,但并不是 HTML。React.js 可以用 JSX 来描述你的组件长什么样的。JSX 在编译的时候会变成相应的 JavaScript 对象描述。react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素,并且渲染到页面上。

    胡子大哈 胡子大哈
    阅读全文
    发布于

    React中的无状态和有状态组件

    组件的概念在Web中应用的场景已经相当广泛了。而React是专注于View层的,组件也是React核心理念之一,一个完整的应用将由一个个独立的组件拼装而成。组件也是React最基础的一部分,欲想征服React,那么了解和编写组件就显得尤为重要。在上一篇文章,咱们就写了一个最简单的React组件,而且在文章末尾,咱们留了一个问题,**怎么创建无状态和有状态的React组件?**接下来,就一起来了解React中的无状态和有状态的组件。

    从零学习React技术栈:JSX 入门

    JSX 其是一个语法扩展,它既不是单纯的字符串,也不是 HTML,虽然长得和 HTML 很像甚至基本上看起来一样。但事实上它是 React 内部实现的一种,允许我们直接在 JS 里书写 UI 的方式。有些同学来看 JSX 可能也会觉得它像一种模板语言之类的。事实上也不是,它就是基于 JavaScript,在 React 当中的一种语法扩展的实现。JSX 被用来创建 React 当中的 Elements,React 当中的元素。然后 React 再通过一些方法,把 JSX 创建的元素,渲染成我们在浏览器当中看到的 DOM元素。

    余博伦 余博伦
    阅读全文
    发布于

    写第一个React组件

    什么是React?咱们在这不阐述,有关于这方面的介绍可以查阅官网或者互联网上相关的教程。咱们今天来学如何写一个React组件。对于像我这样初次接触React的人而言,总感觉React非常的神秘,也无法入手。最近也看了一些相关的教程,开始自己尝试写一个简单的React组件。

    从零学习React技术栈: npm的安装配置和React开发环境配置

    工欲善其事,必先利其器。在正式学习 React 技术栈之前,我们先来介绍一下之后经常要使用到的 npmnpm 是一个基于 Nodejs 的 JavaScript 包管理工具,全称叫做 Node Package Manager,所谓的包呢,其实就是可复用的代码,每个人都可以把自己编写的代码库发布到 npm 的源(英文叫做 registry)上面进行管理,你也可以下载别人开发好的包,在你自己的应用当中使用。

    余博伦 余博伦
    阅读全文

    React.js小书:基本环境安装

    React.js 单独使用基本上是不可能的事情。不要指望着类似于 jQuery 下载放到 <head /> 标签就开始使用。使用 React.js 不管在开发阶段生产阶段都需要一堆工具和库辅助,编译阶段你需要借助 Babel;需要 Redux 等第三方的状态管理工具来组织代码;如果你要写单页面应用那么你需要 React-router。这就是所谓的“React.js全家桶”。

    胡子大哈 胡子大哈
    阅读全文
    发布于

    2017 年学习 React + Redux 的一些建议

    使用 React + Redux 这个技术栈开发应用已经有很长一段时间了,我的一些使用经验也许会有些主观,但我觉得写出来也许对你开始学习或是进阶使用 React + Redux 会有些帮助。Redux 并不是只和 React 结合使用的,它也可以和其他的很多类库结合起来一起使用,即使你还未开始深入使用,你也可以阅读文中的部分内容。同时,如果你有一些建议或是疑惑,可以在 Github 给我提交 Issue,很乐意与你一起交流。

    发布于

    浅谈前端状态管理

    近两年前端技术的发展如火如荼,大量的前端项目都在使用或转向 Vue 和 React 的阵营,由前端渲染页面的单页应用占比也越来越高,这就代表前端工作的复杂度也在直线上升,前端页面上展示的信息越来越多也越来越复杂。我们知道,任何状态都需要进行管理,那么今天我们来聊聊前端状态管理。

    发布于

    Web前端的状态管理

    我相信很多朋友跟我一样,初次听到什么Flux, ReduxVuex,状态管理的时候是一脸懵逼的。因为在外面之前前端大部分开发的时候,根本没有那么多的概念。自从ReactJS火爆后,什么Flux, Redux,React全家桶是一套一套接踵而来。搞的很多开发者甚是头大。所谓的ReactJS全家桶即ReactJS + Redux + Webpack,当然其中的Redux可以用其他例如Mobx之类的替换。原本可能只是很简单的一些数据展示需求,当想用尝试使用ReactJS时,去Google搜索了一些教程,突然发现怎么用个React需要这么多东西。正如今年比较有名的一篇文章里面描述的那样 — ”在2016年学习前端是怎样一种体验"。