写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开发环境 1.安装react语法环境 npm install react react-dom --save 2.安装webpack开发环境 npm install webpack --save-dev 3.安装babel npm install babel-loader babel-core --sa…

配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ Studio.app rm -Rf ~/Library/Preferences/AndroidStudio* rm ~/Library/Preferences/com.google.android.studio.plist rm -Rf ~/Library/Application\ Support/A…

Facebook的一帮子工程师在忙碌之余开发除了一套前段UI框架React.这个框架最大的有点就在于让UI的开发都基于组件,这样View都是根据props和state变化的. 项目地址:https://github.com/future-challenger/petshop/tree/master/client 虽然学React比起来其他的前端框架要容易不少,但是其生态的各种工具(Babel, Webpack)却着实让人费一番功夫.事实上,这些工具不只适用于React.但是为了发挥ES2015和…

DvaJS构建配置React项目与使用 一,介绍与需求分析 1.1,介绍 dva 首先是一个基于redux 和redux-saga的数据流方案,然后为了简化开发体验,dva 还额外内置了react-router 和fetch,所以dva是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装.是由阿里架构师 sorrycc 带领 team 完成的一套前端框架. 1.2,需求 快速搭建基于react的项目(PC端,移动端). 二,DvaJS构建项…

一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提高自己的iOS代码专业能力,掌握Swift3.0,顺便学习学习React Native. 学习一门语言当然少不了硬件和软件设备啦,不然怎么学习...嘿嘿,对吧!!!! 下面记录下自己配置React Native开发环境: 1> 安装brew: 打开终端,输入:   /usr/bin/ruby -e…

你已经使用Create React App脚手架搭建了React应用,现在该部署了. 一般会使用npm run build或者yarn build构建出静态资源, 由web服务器承载. 您会体验到 多环境:test.staging.prod,他们都是独立服务器.有不同的主机名. 或者你会这样手写 if/else来配置不同环境的后端API基地址: api-config.js let backendHost; const apiVersion = 'v1'; const hostname = win…

前言 最近公司来了几个实习生,刚好我手头没什么要紧事,然后领导让我带他们学习react, 为下一个react项目做基础. 然后随手写了几个demo,帮助他们了解正经项目如何去构建配置项目. 现在分享出来,希望可以帮助到需要的人. 本demo 中有些目录虽然没有用,但是我还是列了出来,目的是为了展示一个正规项目的目录骨架结构. create-react-app 模板文件我也没有归类,等了解之后,可以自己归类,加一个样式的文件夹. 正文 就目前的大环境而言,在开发react或vue项目的时候,应该没…

导读 React 是一个构建用户界面的库,而它只是组成一个应用的一部分.应用还有其他的部分——风格.路由器.npm 模块.ES6 代码.捆绑和更多——这就是为什么使用它们的开发者不断流失的原因.这被称为 JavaScript 疲劳.尽管存在这种复杂性,但是使用 React 的用户依旧继续增长. 社区应对这一挑战的方法是共享模版文件.这些模版文件展示出开发者们架构选择的多样性.官方的“开始入门”似乎离一个实际可用的应用程序相去甚远. 新的,零配置体验 受开发者来自 Ember.js 和 Elm 的…

一. 安装Homebrew: “Homebrew installs the stuff you need that Apple didn’t.——Homebrew  OS X 更完整”. Homebrew的官网(多语言版本)简单明了地介绍了如何安装和使用这个工具,;并提供了自己的Wiki. brew的安装很简单,使用一条ruby命令即可,Mac系统上已经默认安装了ruby": ruby -e "$(curl -fsSL https://raw.githubusercontent.com…

预编译器配置说明 开头语,发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,就有不同的语法和功能. 语法 在使用CSS预处器之前最重要的是对语法的理解,幸运的是,这三种CSS预处器的语法和CSS都差不多. Sass和LESS都使用的是标准的CSS语法.这使用CSS预处器非常容易的将预处器代码转换成CSS代码.默认Sass使用".scss"扩展名,而LESS使用".less"扩展名: 重要的一点是,Sass也同时支持老的语法,就是不使用花括号和分…

Webpack 是一个前端资源加载/打包工具,我们部门的一条主要技术栈就是Webpack+React+ES6+node,虽然之前自己做个人项目也接触好多次Webpack,但是自己并没有研读总结过Webpack的知识点,读了阮老师的wepack-demos,这些demos虽然是基于webpack@1.x的,但是举例得蛮简洁明了,所以这次就简单翻译此文的一些重点,作为总结. 什么是Webpack? Webpack是一个前端资源加载/打包工具,只需要相对简单的配置就可以提供前端工程化需要的各种功能,并…

关于这个的问题,虽说不是很难,但还是踩了点小坑,下面就来介绍下如何使用webstorm配置编译sass的输出目录. 1.下载Ruby 2.使用Ruby安装sass 3.检测是否安装成功. 前面的几步很多教程上都有,就不详细说了. 一般来说,我们期望scss目录和css目录是单独分开的,在scss目录中建立index.scss的文件.会弹出如上提示,点击yes,如果不小心点了no的话-- 一样可以进入这个页面. 如果这样的默认路径,编译好的css文件是会直接生成在scss文件下. 但是我们可以将A…

配置主要分为以下几步: 安装node.js 安装AndroidStudio 安装React Native命令行工具 搭建React Native版本的Hello World,修改代码查看效果 第一步 下载node.js,安装并配置环境变量.下载地址:https://nodejs.org/en/download/. 检验是否配置成功,命令行输入:node -v 成功则会显示nodejs版本,否则配置有问题. 第二步 安装AndroidStudio.下载地址:https://developer.an…

一. 安装Homebrew: Homebrew的官网(多语言版本)简单明了地介绍了如何安装和使用这个工具,;并提供了自己的Wiki. brew的安装很简单,使用一条ruby命令即可,Mac系统上已经默认安装了ruby": ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 等待一段时间后会出现     Press RETURN to continue…

1 react 需要nodejs所以需要安装nodejs环境,到nodejs官网下载 现在默认会安装nodejs 和 npm包 和 配置环境 2 检查是否安装成功,在命令行中输入 显示成功则正确 3 安装包管理工具 bower,推荐安装 安装命令 npm install -g bower 查看版本信息 bower --v 初始化当前工程的bower,此操作会在当前目录下生成bower.json文件: bower init 通过问答向导的方式在当前目录生成一个bower.json文件. 查询包信息…

最近在学react,然后感觉自己之前用的express+gulp+webpack+ejs的工作环境还是基于html+js+css这种三层架构的应用,完全跟react不是一回事. 愚蠢的我居然在原先的这个环境上又搭建了react的环境.好吧,写是能写,但是作为服务端的架构就显得驴唇不对马嘴.不免对环境的配置感到迷茫.我也知道redux,但是才刚学react,react还没熟,暂时还不想了解那个框架,然后我发现了create-react-app. 可以用这个直接为自己搭建脚手架,方便的eb,这里记录…

学习react,配置是很痛苦的一关,虽然现在有了create-react-app这样方便的工具,但是必须要自己配置一遍,才能更好地进行项目开发. 首先要明确一个概念:react的文件必须经过编译才能被浏览器识别,因此我们需要webpack这个打包工具来把react的组件打包成一个js文件,然后将这个js文件放到flask目录下,然后引入到flask模版的html文件里面.当然,你也可以在前端用express等服务进行客户端渲染,只将flask服务视为一个传递数据的api. 下面开始配置吧 1.如…

create-react-app的webpack配置在node_modules当中的react-scripts的config文件夹当中,其中webpack.config.dev.js是开发环境的配置,webpack.config.prod.js是生产环境的配置. 需要支持sass,首先npm i sass-loader node-loader -D   安装相关加载器.postcss-loader  在 create-react-app当中已经下载好了.只需要将postcss.config.js…

1.要用es6,因为目前浏览器的支持情况,那么肯定需要插件将e6的代码转换成es5,我用的是babel-loader,事实证明使用6.x版本似乎是不行的,我换成5.3.2之后就成功了. 2.webpack.config.js配置文件中,配置loader的时候,我从网上博客中copy的 loader: 'babel-loader!jsx-loader?harmony' 不知道是语法错误还是本身不通,编译时会报错改成仅用babel-loader 错误解决 2017/02/16更新: 一.最近又重新装…

1 访问网址 https://cnodejs.org/api 可以调取api 2.//该body-parser 可以将请求的body数据,转变成 json 格式数据://express-session 用于在服务器端存放的session//query-string 用于转换 url 后面的请求参数 转换成 json 格式 npm i body-parser express-session query-string -S bodyParser中间件的研究 3 使用方法: 3.1 server.js…

1.  配置项.使用mobx,因为语法时es6-next,所以先配置 .babelrc 文件 { "presets": [ ["es2015", { "loose": true }], "stage-1",//改动了这里 "react" ], "plugins": ["transform-decorators-legacy", "react-hot-load…

1. 由于 react-router 是集成了 react-router-dom 和 react-router-native的一起的,所以这里要使用的是 react-router-dom, 2. 安装  npm i react-router -S . npm i react-router-dom -S 路由配置router.js: import React from 'react' import { Route } from 'react-router-dom' import TopicList…

首先谨记 eslint的官网:  http://eslint.cn/ 1 安装eslint  npm i eslint -D 2.在根目录下新建文件 .eslintrc { "extends":"standard" //是一个json文件,整个项目的格式,标准格式 } 3.由于是限制前端格式,所以在 client文件夹下新建文件 .eslintrc { "parser":"babel-eslint",//默认用哪种工具去解析…

下面继续配置 webpack dev server    hot module replacement: 首先配置dev-server     安装     npm i webpack-dev-server -D const isDev = process.env.NODE_ENV === 'development' const config = { entry:{}, output:{}, plugins:{} } if(isDev){ config.devServer = { host: '…

1 react 基本js文件: import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App/>,document.getElementById('root')) // 把app组件传给 reactCreateElement 作为的参数 要引入 react 基本 webpack.config 配置: const path = requi…

Node环境 通过 node.js 网站下载了安装包进行安装 node.js, npm也会一起安装 node --version # 查看node.js版本 npm --version #查看npm版本 npx --version 通过命令配置 npm 淘宝镜像 npm config set registry https://registry.npm.taobao.org npm config get registry #验证命令 npm config list #列出当前npm的配置列表 定位…

webpack4大大提高了开发效率,简化了配置复杂度,作为一个大的版本更新,作为一个对开发效率执着的爱折腾的程序员,已经忍不住要尝尝鲜了 首先是cli和webpack的分离,开发webpack应用程序需要安装一些开发依赖 webpack webpack-cli webpack-dev-server babel-loader, babel-core, babel-preset-env, babel-preset-react css-loader less-loader style-loader l…

折腾了两天终于解决了问题,一开始用模拟器是报如下图的错 然后用真机的时候又报下图的错 这个错误网上有很多解决方法,说是要降级处理,将build.gradle中的1.3.1改成1.2.3,但是改完之后问题依然没有解决,我的手机是魅蓝note2,又在网上搜了下,有人说是本身手机连接有问题.也确实试了其他手机是可以的. 然后第一个问题,一开始以为是端口重复什么的,各种查命令,后来在网上搜到,是自己没有配置好,在genymotion的setting中选择ADB,然后需要设置为自己安装的SDK所在的位置,…

设置.js文件默认以jsx的语法打开 在没有进行设置的情况下,每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示: 当然我们点击转换后就可以了,但是每次都会提示,所以还是来一个一劳永逸的方法把它给去掉吧: 然后Apply/OK即可. 设置.js文件中支持react-native语法高亮 首先会发现在js文件中有不少的警告,类似这样: 这个警告的原因是因为编辑器不知道所引用的这些东西是在哪(不知道源在哪),所以需要告诉编辑器所写的东西是在哪个源里面: 在下图的downloa…

说在前面,本教程是建立在项目已经成功在模拟器上运行的基础上,如果你是还未配置好环境的新手,建议先从官网快速入门开始:官网英文版 . 中文版 ok, 切入正题,当你已经完成好环境配置,在模拟器上成功的运行了项目,看到了下图的效果,这时你的一定想,是时候去手机上装个逼了! 找到官方的教程,开始一步步跟着来: 修改URL地址:打开项目目录下的AppDelegate.m文件,修改里面的URL,把localhost改为你的电脑的IP.在Mac系统下,你可以在系统设置/网络里找到电脑的IP地址. 选择设备:…