创建组件创建组件之前要注意以下几点：组件创建的名称首字母得大写组件中返回的JSX只能是一个根节点，所有的内容得用一个元素都框起来1.无状态函数式组件无状态函数式组件可以理解成就是一个函数生成的，使得代码的可读性更好，并且精简、便利，减少了冗余，无状态组件有以下特点：组件无法被实例化，整体渲染提高组件不能访问this对象，因为没有实例化，所以无法访问到this对象组件没有生命周期无状态组件只能访问输入的props，没...
本文主要介绍了React高阶组件入门介绍，这篇文章中我们详细的介绍了什么是高阶组件，如何使用高阶组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。高阶组件的定义HoC 不属于 React 的 API，它是一种实现模式，本质上是一个函数，接受一个或多个 React 组件作为参数，返回一个全新的 React 组件，而不是改造现有的组件，这样的组件被称为高阶组件。开发过程中，有的功能需要...
大多数初学react native 的人，对此深有困惑，故，再次分享一篇react native 的入门解惑篇一：Props(属性)大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。下面是一个例子：imp...
一、ReactJS简介React 是近期非常热门的一个前端开发框架。React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。ReactJS官网...
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJs的风采吧~~ 文章有点长，耐心读完，你会有很大收获哦~ 一、ReactJS简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在201...
一、JSX介绍 ①定义 JSX=JavaScript XML，是一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作，但是使用JSX可以提高组件的可读性，增强JS语义，结构清晰，抽象程度高，代码模块化。因此推荐在React中使用JSX。 ②特点 1、元素名首字母大写 2、符合嵌套规则 3、可以写入求值表达式 4、驼峰式命名 5、不能使用javascript原生函数的一些关键词，如for和class。需要替换成htmlFor和className ③使用方法...
React 是 Facebook 里一群牛 X 的码农折腾出的牛X的框架。 实现了一个虚拟 DOM，用 DOM 的方式将需要的组件秒加，用不着的秒删。React 扮演着 MVC 结构中 V 的角色， 不过你要是 Flux 搭配使用， 你就有一个很牛X的能让轻松让 M 和 V 同步的框架了，Flux 的事以后再说~ 组件们 在 React 中，你可以创建一个有特殊功能的组件，这在 HTML 元素里你是打着灯笼也找不到的，比如这个教程里的下拉导航。每个组件都有自己的地盘(scope)，所...
前言这篇文章是我自己在搭建个人网站的过程中，用到了服务端渲染，看了一些教程，踩了一些坑。想把这个过程分享出来。 我会尽力把每个步骤讲明白，将我理解的全部讲出来。 文中的示例代码来自于这个仓库，也是我正在搭建的个人网站，大家可以一起交流一下。示例代码因为简化，与仓库代码有些许出入 本文中用到的技术 React V16 | React-Router v4 | Redux | Redux-thunk | express React 服务端渲染服务端渲染的基本套路就是用户请...
前言 在上篇中，笔者分享了部分安装并调试React Native应用过程里的一点经验，如果还没有看过的同学请点击《React Native基础&入门教程：调试React Native应用的一小步》。 在本篇里，让我们一起来了解一下，什么是Flexbox布局，以及如何使用。 一、长度的单位 在开始任何布局之前，让我们来首先需要知道，在写React Native组件样式时，长度的不带单位的，它表示“与设备像素密度无关的逻辑像素点”。 这个怎么理解呢？ 我们知道，...
React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中，使用浏览器的调试工具去Debug移动端的代码，无疑是最吸引开发人员的特性之一。 试想一下，当你在手机屏幕按下一个按钮，处理事件的代码就可以立即在浏览器的调试工具里进行断点调试，而且每当你对代码进行修改，界面便可以完成快速地重载，省去昂长的编译时间，这会是多么提高工作效率。 传统的Web前端开发人员自然很熟悉浏览器的调试工具，但是对于如何将其在...
环境准备为了方便，这里使用create-react-app搭建react环境 create-react-app mydemo弹出配置如果需要自定义react的配置，需要运行下面的命令把配置文件弹出来。 npm run eject安装reduxnpm i redux --save简单理解redux简单用法就是通过它的store来订阅和发布信息。通过subscribe来订阅action，通过dispatch来触发action。reducer中定义来各个action要做的事情。 demo代码reducer定义 const Add = addGirl, Remove = "removeGirl"...
可先查看我的redux简单入门 react-redux简介react-redux是使用redux开发react时使用的一个插件，另外插一句，redux不是react的产品，vue和angular中也可以使用redux；下面简单讲解，如何使用react-redux来开发react。 描述这个插件可以让我们的redux代码更加的简洁和美观。我假设你已经有一个使用create-react-app创建的一个可以显示hello world的react环境，并且已经安装来redux。注意：如果是刚使用create-react-app创建的，需要...
高阶组件的定义HoC 不属于 React 的 API，它是一种实现模式，本质上是一个函数，接受一个或多个 React 组件作为参数，返回一个全新的 React 组件，而不是改造现有的组件，这样的组件被称为高阶组件。开发过程中，有的功能需要在多个组件类复用时，这时可以创建一个 Hoc。基本用法 包裹方式 const HoC = (WrappendComponent) => {const WrappingComponent = (props) => (<div className="container"><WrappendComponent {...props} ...
本文介绍了react.js使用webpack搭配环境的入门教程，分享给大家，也给自己做个笔记 如果你想直接上手开发，而跳过这些搭配环境的繁琐过程，推荐你使用官方的create-react-app命令 npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具，请确保你已经安装了node.js create-react-app my-app //使用create-react-app创建，my-app为项目名称 cd my-app/ //进入my-app目录 npm start //运行项目现在...
小结放在前：这篇文章主要是为下一篇的react提前铺好路，webpack是一个前端资源模块化管理和打包工具，说白了就是方便我们管理自己的常用的一些代码，比如你开发中用到sass以及jade同时用到es6，开发时你不可能改动某个地方就挨个命令去转换在到浏览器去看效果，那样效率是非常低的。所以webpack帮我们省去了那些多余的步骤 webpack 基本安装 开始前还是万万不能缺少的安装： npm install webpack -g 安装完接着是建个文件夹新建一...