本文介绍了React全家桶环境搭建过程详解，分享给大家，具体如下：环境搭建1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖npm i -S @types/react @types/react-dom npm i -D typescript awesome-typescript-loader source-map-loader新建tsconfig.json{"compilerOptions": {"outDir": "./dist/","sourceMap": true,"noImplicitAny": true,"module": "commonjs","target": "es5","jsx": "react"},"include": ["./sr...
最近在折腾react开发，总结一个react环境搭建的教程，写得比较细碎，基本上就是自己的搭建步骤了，希望能够帮助到有需要的小伙伴。 常用的脚手架 react-boilerplatereact-redux-starter-kitcreate-react-app（git上关注量最大）使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。 create-react-app 自动创建的项目是基于 Webpack + ES6 。 ...
问题 今天在写页面的时候发现一个问题，就是在React Router中使用了Url传参的功能，像这样: export class MainRouter extends React.Component {render() {return (<BrowserRouter><Switch>...<Route exact path={/channel/:channelId} component={ChannelPerPage}/>...</Switch></BrowserRouter>);} } 按照官方文档的说法，可以在ChannelPerPage这个组件中使用 this.props.match.params来获取url参数的值，但是我发现如果你在这个...
前言 React-Router已经发布了多个版本，利用路由导航的使用方法都不大一样，在这里总结一下。 React-Router 2.0.0 版本 2.0.0版本需要使用browserHistory进行跳转，具体参考一下代码： import { browserHistory } from react-router browserHistory.push(/path)React-Router 2.4.0版本以上 React-Router 2.4.0版本以上，可以通过mixin的方法，使组件增加this.router属性，然后进行相应的操作，具体mixin代码参考如下： import { wi...
看了官方文档的导航器对比，发现现在主推的方案是一个单独的导航库react-navigation，据说它的使用十分简单。我就写个demo，试了一下。 一、主要构成 按使用形式主要分三部分: StackNavigator: 类似于普通的Navigator，屏幕上方导航栏TabNavigator: 相当于ios里面的TabBarController，屏幕下方的标签栏DrawerNavigator: 抽屉效果，侧边滑出二、使用 1.新建项目 react-native init ComponentDemo2. 在应用中安装此库 npm install --...
如果你使用过 Redux 开发 React，你一定听过 容器组件（Smart/Container Components） 或 展示组件（Dumb/Presentational Components），这样划分有什么样的好处，我们能否能借鉴这种划分方式来编写 Vue 代码呢？这篇文章会演示为什么我们应该采取这种模式，以及如何在 Vue 中编写这两种组件。 为什么要使用容器组件? 假如我们要写一个组件来展示评论，在没听过容器组件之前，我们的代码一般都是这样写的： components/CommentList...
1. 介绍 在开发react应用时，应该没有人用传统的方法引入react的源文件(js)，然后在html编辑吧。 大家都是用webpack + es6来结合react开发前端应用。 这个时候，我们可以手动使用npm来安装各种插件，来从头到尾自己搭建环境。 比如： npm install react react-dom --save npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save npm install babel webpack webpack-dev-server -g虽然自己搭建的...
可先查看我的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创建的，需要...
本文介绍了react、redux、react-redux之间的关系，分享给大家，也给自己留个笔记，具体如下： React 一些小型项目，只使用 React 完全够用了，数据管理使用props、state即可，那什么时候需要引入Redux呢？ 当渲染一个组件的数据是通过props从父组件中获取时，通常情况下是 A --> B，但随着业务复杂度的增加，有可能是这样的：A --> B --> C --> D --> E，E需要的数据需要从A那里通过props传递过来，以及对应的 E --> A逆向传递call...
一直是Redux的死忠党，但使用过Vuex后，感叹于Vuex上手之快，于是萌生了写一个能在React里使用的类Vuex库，暂时取名 Ruex 。 如何使用 一：创建Store实例: 与vuex一样，使用单一状态树(一个对象)包含全部的应用层级状态(store)。 store可配置state,mutations,actions和modules属性： state :存放数据mutations :更改state的唯一方法是提交 mutationactions :Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步...
因为对网页SEO的需要，要把之前的React项目改造为服务端渲染，经过一番调查和研究，查阅了大量互联网资料。成功踩坑。 选型思路：实现服务端渲染，想用React最新的版本，并且不对现有的写法做大的改动，如果一开始就打算服务端渲染，建议直接用NEXT框架来写项目地址：https://github.com/wlx200510/react_koa_ssr脚手架选型：webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x主要心得：对React的相关知识更加熟悉...
1.前言 项目中有些页面内容是变更比较频繁的，这些页面我们会考虑用 网页 来解决。 在RN项目中提供一个公用的Web页，如果是网页内容，就跳转到这个界面展示。 此时会有一个问题是，网页会有一级页面，二级页面，这就会设计到导航栏返回键的处理（以及在Android上返回键的处理）。 这个问题，在RN官网就可找到解决方式。就是用 onNavigationStateChange 这个回调方法记录当前的导航状态，从而判断是返回上一级页面还是退出这个网页，...
有人说 Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。这些至少说明 Immutable 是很有价值的，下面我们来一探究竟。 JavaScript 中的对象一般是可变的（Mutable），因为使用了引用赋值，新的对象简单的引用了原始对象，改变新的对象将影响到原始对象。如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2。虽然这...
此文不介绍webpack基本配置，如果对基本配置有疑问请查阅官方文档。 1、配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例（对应上面上传配置）： publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/"打包 NODE_ENV=production node_modules/webpack/bin/webpack.js -p这样打包后的文件例如有 index.html 12345678.src.js 12345678.src.css ...此时，打包后生成的index.html文件中已经引入...
ref顾名思义我们知道，其实它就可以被看座是一个组件的参考，也可以说是一个标识。作为组件的属性，其属性值可以是一个字符串也可以是一个函数。 其实，ref的使用不是必须的。即使是在其适用的场景中也不是非用不可的，因为使用ref实现的功能同样可以转化成其他的方法来实现。但是，既然ref有其适用的场景，那也就是说ref自有其优势。关于这一点和ref的适用场景，官方文档中是这样说的： 在从 render 方法中返回 UI 结构之后，你可...