react

webpack是一个模块管理工具，它跟grunt,gulp,fis等诸多前端工具一样，为了使日渐增多的js代码变得合理有序，应运而生的模块化工具 1 - 它同时支持commonjs和AMD规范（甚至混合的形式）； 2 - 它可以打成一个完整的包，也可以分成多个部分，在运行时异步加载（可以减少第一次加载的时间）； 3 - 依赖在编译时即处理完毕，可以减少运行时包的大小； 4 - Loaders可以使文件在编译时得到预处理，这可以帮我们做很多事情，比如说模板的预编译，图片的base64处理； 5 - 丰富的和可扩展的插件可以适应多变的需求。 下面是我的webpack的配置： var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = { //插件项 plugins: [commonsPlugin], //页面入口文件配置 entry: { index : './app/js/index.js' }, //入口文件输出配置 output: { path: 'dist/js', filename: '[name].js' }, module: { //加载器配置 loaders: [ { test: /

学习链接: https://www.jianshu.com/p/514fe21b9914 学习链接：https://zhuanlan.zhihu.com/p/38030418 学习链接：https://medium.com/@baphemot/understanding-react-react-16-3-component-life-cycle-23129bc7a705 来源： https://www.cnblogs.com/nayek/p/12375434.html

简介 最近发现了一个好玩的框架，叫做 AlpineJS ，它是类似于Vue或者React这样的组件化开发框架，但是它更加轻量，下面是它的github地址 https://github.com/alpinejs/alpine Scrimba上的视频教程 https://scrimba.com/g/galpinejs 它更适合于在现有的项目里的某个部分应用组件（Vue和React也可以在某个部位适用，但是总感觉有点大），它有种拿来即用的感觉 小例子 先忽视安装步骤，直接看下面这个小例子 < div x-data = " { word: ' hello world ' } " > < h1 x-text = " word " > </ h1 > </ div > 它的语法是从Vue里借鉴过来的，几乎和Vue一样，但是它是以 指令 为基础，没有什么 {{}} 这样的语法，并且指令是以 x- 开头的，不是Vue的 v- 开头。 上面的那个例子中，你可以理解为，带有 x-data 指令的标签容器，就相当于一个组件，在组件内部可以通过其他 x- 指令去运用 x-data 里的数据，做声明式的渲染操作。 看起来是不是很方便，官方说有点类似于 javascript的 tailwind CSS （如果你用过 tailwind CSS 你应该知道，这种工具式的开发特别爽）。 接下来看下一些常见的功能

背景 微前端是一种利用微件拆分来达到工程拆分治理的方案，可以解决工程膨胀、开发维护困难等问题。随着前端业务场景越来越复杂，微前端这个概念最近被提起得越来越多，业界也有很多团队开始探索实践并在业务中进行了落地。可以看到，很多团队也遇到了各种各样的问题，但各自也都有着不同的处理方案。诚然，任何技术的实现都要依托业务场景才会变得有意义，所以在阐述美团外卖广告团队的微前端实践之前，我们先来简单介绍一下外卖商家广告端的业务形态。目前，我们开发和维护的系统主要包括三端： PC系统：单门店投放系统PC端 H5系统：单门店投放系统H5端 KA系统：多门店投放系统PC端 如上图所示，原始解决方案的三端由各自独立开发和维护，各自包含所有的业务线，而我们的业务开发情况是： PC端和H5端相同业务线的 基本业务逻辑一致 ，UI差异大。 PC端和KA端相同业务线的 部分业务逻辑一致 ，UI差异小。 在这种特殊的业务场景下，就会出现一个有关开发效率的抉择问题。即我们希望能复用的部分只开发一次，而不是三次。那么接下来，就有两个问题摆在我们面前： 如何进行 物理层面的复用 （不同端的代码在不同地址的Git仓库）。 如何进行 逻辑层面的复用 （不同端的相同逻辑如何使用一份代码进行抽象）。 我们这里重点看一下物理层面的复用，即：如何在物理空间上使得各自独立的三端系统（不同仓库）引入我们的复用层？我们尝试了NPM包

cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ，初步搭建react项目 下载安装webstorm:配置成功: 配置成功后就可以开启webstorm项目了。（存微信收藏、、） 1：在webstorm下配置node环境： 2：完成之后： React官方脚手架地址： https://github.com/facebook/create-react-app 在终端下安装执行npm install -g create-react-app 不用每个项目都装。一个webstorm装一次即可 3：可以直接新建react app项目了。 4：如上图：自己安装完成之后：执行下 npm list -depath0 (查看所下载的不为空的依赖包) 或者 npm ls (查看所下载的所有的依赖包包括空文件) 完成并开启入口 5：最后可以自己完成自己react项目 注意的是：一定要有顶层包裹的元素：如果不是报错 如下图： 6：初始化： 新建一个component文件夹下。并建一个header.js 如下图：按钮控制内容的显隐性 缩写的class后面的类 Header 一定的要大写、 如果需要导出到其它地方引用必须 export default这个类 7:引用导出的组件 7: 8

组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM 生命周期的方法有： componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。 componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。 componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。 componentWillUnmount 在组件从 DOM

概述 本篇为《React Native之React速学教程》的最后一篇。本篇将带着大家一起认识ES6，学习在开发中常用的一些ES6的新特性，以及ES6与ES5的区别，解决大家在学习React /React Native过程中对于ES6与ES5的一些困惑。 ES6的特性 何为ES6？ ES6全称ECMAScript 6.0，ES6于2015年6月17日发布，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMAScript-262。 下面我为大家列举了ES6新特性中对我们开发影响比较大的六方面的特性。 1.类（class） 对熟悉Java，object-c，c#等纯面向对象语言的开发者来说，都会对class有一种特殊的情怀。ES6 引入了class（类），让JavaScript的面向对象编程变得更加简单和易于理解。 class Animal { // 构造方法，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数. constructor(name,color) { this.name = name; this.color = color; } // toString 是原型对象上的属性 toString() { console.log('name:' + this.name + ',color:' +

React-Native学习指南 本指南汇集React-Native各类学习资源，给大家提供便利。指南正在不断的更新，大家有好的资源欢迎Pull Requests！ 同时还有Awesome React Native系列 https://github.com/jondot/awesome-react-native 目录 教程 React Native React.js ES6 系列教程 开源APP 图书 组件 工具 资源网站 业界讨论 教程 React Native 构建 Facebook F8 2016 App / React Native 开发指南 http://f8-app.liaohuqiu.net/ React-Native入门指南 https://github.com/vczero/react-native-lesson 30天学习React Native教程 https://github.com/fangwei716/30-days-of-react-native React-Native视频教程(部分免费) https://egghead.io/technologies/react react-native 官方api文档 http://facebook.github.io/react-native/docs/getting-started.html react

1.页面引入文件 结构大致如下 <!DOCTYPE html> <html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> // ** Our code goes here! ** </script> </body> </html> 其中需要注意，书写react语法的 script 标签的 type 属性为 text/babel 。因为要使用jsx语法，关于jsx，大家可以点击 react系列--jsx 面代码一共用了三个库： react.js 、 react-dom.js 和 Browser.js ，它们必须首先加载。其中， react.js 是 React 的核心库， react-dom.js 是提供与 DOM 相关的功能， Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成( babel 模块)。 2.ReactDOM.render

概述 本篇为《React Native之React速学教程》的第一篇。本篇将从React的特点、如何使用React、JSX语法、组件(Component）以及组件的属性，状态等方面进行讲解。 What’s React React是一个用于组建用户界面的JavaScript库，让你以更简单的方式来创建交互式用户界面。 当数据改变时，React将高效的更新和渲染需要更新的组件。声明性视图使你的代码更可预测，更容易调试。 构建封装管理自己的状态的组件，然后将它们组装成复杂的用户界面。由于组件逻辑是用JavaScript编写的，而不是模板，所以你可以轻松地通过您的应用程序传递丰富的数据，并保持DOM状态。 一次学习随处可写，学习React，你不仅可以将它用于Web开发，也可以用于React Native来开发Android和iOS应用。 不是模板却比模板更加灵活： 心得：上图是 GitHub Popular 的首页截图，这个页面是通过不同的组件组装而成的，组件化的开发模式，使得代码在更大程度上的到复用，而且组件之间对的组装很灵活。 Get Started 使用React之前需要在页面引入如下js库 。 react.js react-dom.js browser.min.js 上面一共列举了三个库： react.js 、react-dom.js 和 browser.min.js