Rails + React +antd + Redux环境搭建

前提条件:node和ruby on rails必须已经安装好(相关安装流程不再此处介绍)

1.nvm、node

2.npm or yarn装一个就好

3.rvm、ruby on rails

4.foreman

一、新建一个rails项目后加入react gem包
1.Gemfile文件添加gem ‘react_on_rails‘, ‘~>6‘         # use latest gem version > 62.bundle install安装gem包3.rails generate react_on_rails:install   or  rails generate react_on_rails:install --redux4.进入项目client文件夹下执行 npm install  or  yarn install  

二、引入antd

1.在项目client文件夹下执行:  npm install antd --save  npm install babel-plugin-antd --save  npm install babel-plugin-import --save    (该插件是用来按需加载 antd 的脚本和样式的)  npm install style-loader -save  npm install css-loader -save

2.修改client文件夹下 .babelrc 文件为  {    "presets": ["es2015", "stage-2", "react"],    "plugins": [["antd", [{ "libraryName": "antd", "style": "css" }]]]   (该行为新增行)  }

三、运行服务
1.foreman start -f Procfile.dev
2. 访问 http://localhost:3000/hello_world 后将看到如下内容

 
 
时间: 2024-10-29 19:08:16

Rails + React +antd + Redux环境搭建的相关文章

React Native iOS环境搭建

前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废话不多说了,下面简单的列出步骤吧. 1. 安装Homebrew Homebrew主要用于安装后面需要安装的watchman.flow 打开MAC的终端,输入如下命令: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/i

React+Webpack+ES6环境搭建(自定义框架)

引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Native更是扩大了前端的边界. 说道React,那就不得不说一下Webpack凭借它异步加载和可分离打包等优秀的特性,走在取代Grunt和Gulp的路上.而面向未来的ES6,更是支持模块化处理. 下面我就分享一下关于Webpack+React+ES6的环境搭建(通用)[附加发布版] 准备工作 首先需要准

mac 下 react Native android环境搭建

1.参考  上一篇的博客文章 "mac 下 react Native ios环境搭建",前面几步都是必须的,只是,原生客户端不一致 2.Android Studio的安装 A:安装JAVA的SDK 注意:Android Studio需要Java Development Kit [JDK] 1.8或更高版本.你可以在命令行中输入 javac -version来查看你当前安装的JDK版本.如果版本不合要求,可以到 官网上下载 B:除非特别注明,请不要改动安装过程中的选项.比如Android

React Native学习笔记(一)Mac OS X下React Native的环境搭建

本文介绍Mac OS X系统下的React Native环境搭建过程. 1.环境要求: 1) Mac OS X操作系统 2) Xcode6.4或以上版本 3) Node.js4.0或以上版本 4) watchman和flow 2.安装过程 1) Node.js的安装可以在Node.js的官网https://nodejs.org/ 中下载最新的版本.这里下载的是node-v4.4.2.pkg版本.直接双击运行安装就可以了.查看是否安装成功可以在终端中输入如下命令: $node -v 如果能够显示版

Android React Native 开发环境搭建---windows下

环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以看官方的地址,本文只是我个人的实践,并且仅限于window平台. 官方的地址:https://facebook.github.io/react-native/docs/getting-started.html 1.下载Chocolatey 去官网下载,一般没有问题. 2.Node,python2,j

Windows下的 React Native 的环境搭建

感觉react好难QAQ 一.开发环境搭建要求 在Windows操作系统搭建React Native开发环境要求在电脑上安装好JDK,Android SDK,还要求电脑上安装有一套C++编译器,如果没有,推荐安装微软的VIsual Studio Community 2015 二.环境搭建 1.安装JDK(需安装1.8或更高版本) 下载对应你电脑版本的32位或64位JDK,第一次是JDK,第二次是jre,建议安装到同一个文件夹下的不同文件夹中.安装时可以修改安装目录. 2.JDK环境变量配置 (1

react native ts环境搭建

react native编写原生应用,不仅可以编写android,还可以编写ios,使得我们的编程,变得更加的简洁,那其实搭建react native环境是非常简单的,随着互联网的发展,那对于编写的规范也变得更加的严格,比如说,出现的typescript,但是给编程也带来一些麻烦,比如,实现同样一个功能,我们需要写更多的代码,但优点也是很多的 1.使其更易于阅读和调试. 2.为我们提供了ES6(ECMAScript 6)的所有优点,以及更高的工作效率. 3.可以帮助我们避免开发人员通过类型检查代

react 完整开发环境搭建

环境搭建: 1.Npm install -g create-react-app 2.Create-react-app project-name 3. Npm run eject (可选npm run eject 弹出配置文件,可以自定义配置 webpack) 4. Antd-mobile按需加载配置: 1)Npm install babel-plugin-import -save 2)Package.json配置 5. connect使用装饰器的方式来写,需要: 1)npm run eject(

react native的环境搭建中常见问题

搭建完成android的环境,我们就可以继续我们的react native环境的搭建了. 当然,按照fb的安装流程来完成rn的搭建. http://facebook.github.io/react-native/docs/getting-started.html 1.install python2 一定要安装python2.X.X的版本,切记不要安装pythn3+以上的. 2.rn的安卓sdk要是23.0.1,要不然会报在目录下找不到对应的sdk. 3.在目录下无法找到local.propert