mac如何启动react的框架_react mac 启动失败 - CSDN
  • mac osx下 react 开发环境搭建你必须先安装nodejsnodejs安装安装开发辅助工具包sudo cnpm install babel -g sudo cnpm install babel-cli -g sudo cnpm install webpack -g sudo cnpm install webpack-dev-server -g...

    mac osxreact 开发环境搭建

    你必须先安装nodejs

    nodejs安装

    安装开发辅助工具包

    sudo cnpm install babel -g
    sudo cnpm install babel-cli -g
    sudo cnpm install webpack -g
    sudo cnpm install webpack-dev-server -g
    sudo cnpm install gulp -g
    sudo cnpm install react -g

    创建项目文件夹

    mkdir myreact
    cd myreact

    初始化开发环境

    npm init

    一直回车即可生成 package.json 文件

    安装需要使用的工具包

    --save 命令用于将包添加至 package.json 文件

    sudo cnpm install --save react
    sudo cnpm install --save react-dom
    sudo cnpm install --save babel
    sudo cnpm install --save babel-core
    sudo cnpm install --save babel-loader
    sudo cnpm install --save babel-preset-react
    sudo cnpm install --save babel-preset-es2015
    sudo cnpm install --save babel-preset-stage0

    建立项目文件

    index.html 
    component.jsx
    main.js
    webpack.config.js  //webpack配置文件

    编辑package.json

    #在    "scripts":{}
    #{}内 添加一行
    "dev": "webpack-dev-server --hot",

    配置webpack

    编辑webpack.config.js

     var config = {
         entry: './main.js',
    
         output: {
             path: './',
             filename: 'app.js',
         },
    
         devServer: {
             inline: true,
             port: 8080
         },
    
         module: {
             loaders: [{
                 test: /\.jsx?$/,
                 exclude: /node_modules/,
                 loader: 'babel',
    
                 query: {
                     presets: ['es2015', 'stage-0', 'react']
                 }
             }]
         }
    
     };
     module.exports = config;

    index.html

    <!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>hello react</title>
    </head>
    
    <body>
        <div id="app">
        </div>
        <script src="app.js"></script>
    </body>
    
    </html>
    

    component.jsx

    'use strict';
    import React from 'react';
    
    class App extends React.Component {
       render() {
          return (
             <div>
                hello holoto !!<br/>
             </div>
          );
       }
    }
    
    export default App;

    main.js

    
    'use strict';
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    import App from './component.jsx';
    
    ReactDOM.render(<App />, document.getElementById('app'))
    

    react hello world

    命令行下运行dev命令

    npm run dev

    在浏览器中查看

    地址栏输入http://127.0.0.1:8080/
    看到

    hello holoto !!

    就这样 react的hello world 完成了

    开始你的react之路吧

    展开全文
  • MAC安装react

    2019-03-13 14:45:32
    sudo chown -R $USER /usr/local //安装npm淘宝镜像时无权限使用 npm install -g cnpm --registry=...cnpm install -g create-react-app //create-react-app 自动创建的项目是基于 Webpack + ES6 c...
    1. sudo chown -R $USER /usr/local //安装npm淘宝镜像时无权限使用
    2. npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm
    3. cnpm install -g create-react-app //create-react-app 自动创建的项目是基于 Webpack + ES6
    4. create-react-app my-app //创建新React项目
    5. cd my-app
    6. npm start //启动
      在这里插入图片描述
    7. sudo npm install npm -g //全局升级npm
    展开全文
  • 安装完成之后查看node版本和npm版本;...通过npm安装创建React项目的依赖包create-react-app(这里选择全局安装,则需要用到管理员权限,若不选择全局,可不使用管理员权限) sudo npm install -...
    1. 登录nodejs官网:https://nodejs.org/zh-cn/ 下载需要的node版本,然后正常安装,一路next;
    2. 安装完成之后查看node版本和npm版本;相关命令:
      node -v
      npm -v
    3. 通过npm安装创建React项目的依赖包create-react-app(这里选择全局安装,则需要用到管理员权限,若不选择全局,可不使用管理员权限)
      sudo npm install -g react-create-app
    4. 通过create-react-app创建自己的React脚手架项目,默认创建在当前目录下
      create-react-app projectName
      这样就创建了一个名称为projectName的React脚手架项目
    展开全文
  • React Native mac环境搭建

    2018-05-31 17:33:09
    一、React Native 简介2015年3月26日,FaceBook公司对外正式发布了React Native ——使用React框架跨平台开发原生移动应用的开源技术框架(简称RN)。开发者可以使用RN高效的开发运行与Android与iOS操作系统的应用...

    一、React Native 简介

    2015年3月26日,FaceBook公司对外正式发布了React Native ——使用React框架跨平台开发原生移动应用的开源技术框架(简称RN)。开发者可以使用RN高效的开发运行与Android与iOS操作系统的应用程序。他的设计理念是:使用React Native 开发,既拥有Native良好的人机交互体验,又保留了React框架的开发效率。

    React、 React.js 和 React Native

    React框架是Facebook从2012年以来慢慢发展起来的一套开发框架。在这套框架上诞生了React.js用来进行网页开发,以及React Native用来进行手机App开发。他们三者的关系是React是基础框架,是一套基础设计实现理念,开发者不能直接用其来开发网页或者移动应用。在他的基础上发展处了React.js来开发网页,React Native来开发移动应用。React.js开发效率比起传统的HTML网页编写要高出非常多,所以React Native的开发效率相信大家很快就会体验到。

    二、React Native 开发特点

    1.一次学习,随处编写

    在iOS和Android上一份代码支持两个操作系统历史证明是很困难的。RN提出了“Learn once,write anywhere”。其根据不同的平台上代码会有一些微小的区别,但开发思路是相同的。RN没有狂妄的喊出“Write once,run anywhere”这样的口号但是在移动开发应用iOS和Android两大平台上差不多已经做到了这一点。

    2.混合开发

    混合开发是RN的另一个重要特性。具体的体现在以下几点:

    1.通用的UI界面与业务逻辑有React Native开发,但与手机平台紧密关联的处理由原生代码来执行。

    2.将原来使用原生代码实现的UI小部件包装成React Native的自定义组件。

    3.应用界面在React Native开发的界面与原生代码开发的界面切换(双向通信,无缝衔接)。

    3.高效的移动开发

    绝大部分的UI界面与业务逻辑都是一套代码,其比原生语言更加快捷高效,相对于两个平台各开发一套应用其能节省50%甚至更多的工作量。具体优势体现在一下4个方面:

    1.独特的UI实现框架

    2.组件化开发

    3.跨平台移植代码迅速

    4.自动匹配不同屏幕大小的手机

    4.高效的移动应用开发调试

    原生代码修改后需要重新编译构建,才能展示修改后的效果。RN修改代码后可以立刻看到效果省去了编译构建的时间,同时所有代码可以一直到Chrome里面运行,断点调试、单步调试、调用栈追踪这些常用的调试方法。

    5.灵活高效的应用热更新

    自JSPatch被拒后,RN的热更新优势重要,每次热更新需要下载的数据量在200KB~1M这个量级,同时其数据下载不到市场应用下载的十分之一并且可以在用户无感知的情况下加入新界面、新功能与新逻辑。最重要的一点是这种热更新行为是苹果官方允许的,无需担心被拒风险。目前热更新有两种方案:pushy 和 codepush(微软提供)这两种方案会在后续文章具体介绍。

    6.有效降低移动应用安装包的体积

    打个不是很恰当的比方,活字应刷印刷一篇文章建模排版所需的时间是大于手抄的但是如果是百张千张呢。RN的特点是功能越复杂,包越大(大约大于15M),RN包比原生代码小的多。

    7.开发软硬件要求低门槛低

    其是基于ES 6(ECMAScript 2015 就是JavaScript),其函数名、变量名都是采用自然语言的命名方法。

    开发模式类似于积木式开发。    

    RN对硬件的要求不高,支持mac、windows等多平台开发。下面环境搭建有说明。

    8.使用React Native 开发的代价

    1.内存消耗大

    开发模式下运行“Holle World”比原生大20兆内存,当然Release模式会有所减少很多与原生“Holle World”相差不大。目前市面上的手机配置基本可以忽略内存的影响。

    2.运行速度

    毕竟原生才是本土,大牛写的原生肯定比RN速度略快,但是一般的开发者开发的功能是与RN速度相差不大的。

    RN开发的代码运行速度可以通过两方面来弥补。

    一、网络请求,RN代码实现速度稍慢但是用户感觉不出来是毫秒级别的,因此不需要优化。

    二、核心功能,那就用源代码开发就好了,上面说了RN一大特点就是混合开发。

    三、React Native Mac环境搭建

    首先mac电脑配置比较高内存比较大的朋友们建议安装安卓环境(这样可以两端调试)。

    1.安装Homebrew

    Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。

    打开终端输入以下代码:

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

    sudo chown -R `whoami` /usr/local

    在此过程中会要求输入电脑密码输入后请耐心等待,直到出现“Installation successful!”。





    2.安装Node

    使用Homebrew来安装Node.js.

    React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本,一般都满足要求。终端输入以下命令:

    brew install node

    目前最新的版本是9.5.0.




    安装完node后建议设置npm镜像以加速后面的过程。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!

    npm config set registry https://registry.npm.taobao.org --global

    npm config set disturl https://npm.taobao.org/dist --global

    3.安装Yarn、React Native的命令行工具(react-native-cli)

    Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

    npm install -g yarn react-native-cli




    安装完yarn后同理也要设置镜像源:

    yarn config set registry https://registry.npm.taobao.org --global

    yarn config set disturl https://npm.taobao.org/dist --global

    如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权。

    安装完yarn之后就可以用yarn代替npm了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install --save 某第三方库名。

    4.安装Watchman

    Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。译注:此工具官方虽然是推荐安装,但在实践中,我们认为此工具是必须安装,否则可能无法正常开发。

    brew install watchman



    5.Flow 和 Nuclide仅作介绍想安装的可以试试

    Flow是一个静态的JS类型检查工具。译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。

    brew install flow

    Nuclide是由Facebook提供的基于atom的集成开发环境,可用于编写、运行和 调试React Native应用。点击这里阅读Nuclide的入门文档

    6.推荐的开发环境

    考虑到实用性不推荐使用Nuclide,而推荐使用WebStormSublime TextVisual Studio Code来编写React Native应用。所有这些开发工具都是跨平台的。其中webstorm是收费的,体量较大,功能较多,基本无需配置。其他工具免费,相对轻量,但或多或少需要下载插件和配置。

    本人出生.net所以比较倾向于vs code,有钱的可以去用WebStorm功能强大,但是其安装包安装后占空间太大了,启动等待时间也比较长(对于我们这些内存严重不足的是不考虑的)。Sublime Text 是拥有漂亮的用户界面和强大的功能的轻量级编辑器(收费的但是可以无限期试用闹心不)。下面主要介绍下Visual Studio Code

    VS Code是一款免费(就他是真正意义上的免费)开源的现代化轻量级代码编辑器,几乎支持所有的主流开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff GIT等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。跨平台软件支持Win、Mac以及Linux。因为其为轻量级编辑器,所以体积小,运行流畅。VS Code已经针对RN做了适配工作所以直接下载就可以用了。官方地址为https://code.visualstudio.com/

    7.0.45以上版本新增编译器安装(如果运行0.45以下版本忽略此条)

    init命令默认会创建最新的版本,而目前最新的0.45及以上版本需要下载boost等几个第三方库编译。这些库在国内即便翻墙也很难下载成功,导致很多人无法运行iOS项目!!!。如果你嫌麻烦,又没有对新版本的需求,那么可以暂时创建0.44.3的版本。

    提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

    如果想体验最新版本可以按如下步骤操作:

    1.进入git页面找到点击Branch选定指定版本:https://github.com/facebook/react-native



    2.找到script文件夹并且打开




    3.找到文档中说明要配置的第三方



    4.由于国家政策这些第三方需要翻墙下还不一定下得下来所以这边提供下载好了的百度盘:http://pan.baidu.com/s/1kVDUAZ9 在这里下载你选中版本需要的依赖就可以了。

    5.第三方依赖放置目录

    下下来后请放置到  ~/.rncache  根目录  或者输入终端命令操作:如果对终端命令不熟悉可以参照这篇文章

    cd ~ //进入根目录

    mkdir .rncache //创建第三方依赖库隐藏文件夹

    cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/  //复制库到指定文件夹 路径视文件实际路径来定 按照这句代码将所需的文件都copy进来

    open .rncache //打卡文件夹查看文件是否全部复制进去 或者省略上面的步骤直接打开此文件夹将文件拖进来 方法很多

    注:小知识点 想要查看隐藏文件 按住Shift + command + . 就可以了 再按就是消失。 



    8.创建工程

    react-native init AwesomeProject

    cd AwesomeProject

    react-native run-ios


    创建成功后终端会弹出一个界面用来展示代码情况。




    提示:如果run-ios无法正常运行,请使用Xcode运行来查看具体错误(run-ios的报错没有任何具体信息)。

    9.修改项目

    使用你喜欢的编辑器打开App.js并随便改上几行。

    在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改!

    如果你成功了将会出现类似以下界面:



    10.恭喜完成RN第一个程序!


    展开全文
  • 第一步,安装node.js开发环境 。 第一种,Node.js安装包及源码下载地址为:https://nodejs.org/en/download/  下载后直接安装即可。 第二种,接着打开终端,输入以下命令安装Homebrew ruby -e “$(curl -...
    第一步,安装node.js开发环境 。

    第一种,Node.js安装包及源码下载地址为:https://nodejs.org/en/download/  下载后直接安装即可。

    第二种,接着打开终端,输入以下命令安装Homebrew

    ruby -e “$(curl -fsSL  https://raw.githubusercontent.com/Homebrew/install/master/install);  

    再输入命令 brew install node

    完了之后,在终端输入node -v, 出现版本号则表示安装成功。如下:

    (非必需)可安装nvm进行node版本管理

    第二步,安装npm

    如果你安装了最新版本的node,则默认已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。如下

    如果不是最新的,建议升级了最新的,或者单独再安装npm,命令:brew install npm


    第三步,安装jspm

    1. 在全局范围安装jspm,就可以在任何命令使用jspm命令了终端输入命令:npm install jspm -g
    2. 完成后,输入 jspm ,会返回一些帮助信息 。

    第四步,为项目添加jspm依赖

    1. 选择你喜欢的目录,新建一个文件夹,可使用命令mkdir xxx,   cd 到对应的文件夹下(这里假设新建文件夹名称为 ZXY_RN_Project)。
    2. 初始化npm, 创建package.json, 输入命令:npm init ,填写你的项目名称,接下来一路回车即可。
    3. 查看ZXY_RN_Project,会发现下面多了一个package.json文件.
    4. 重要步骤来了,输入
      npm install jspm --save-dev
       把jspm添加到项目开发依赖。完成后,命令ls, 会发现又多了node_modules文件,打开这个文件,会发现里面很多关于babel,ES6等等的东西。
    5. 最后执行命令 jspm init, 为jspm创建配置文件config.js, 一路回车即可。
    6. 到这里,项目添加jspm依赖就算完成了。

    第五步,安装React
     
    1.     在ZXY_RN_Project下,通过jspm安装react, 命令jspm install react@0.14.0-rc1 (注:0.14.0-rc1为版本号)。一路回车即可。如果安装过程,出现error错误,则重新再执行一下命令即可,直到没出现error信息即为成功。
    2.  通过jspm安装rect-dom, 命令jspm install react-dom@0.14.0-rc1 (注:0.14.0-rc1为版本号)。过程同上。
    3. (非必需) 如果你项目想使用semantic-ui, 需安装semantic-ui,命令jspm install semantic-ui    导入semantic-ui样式需要安装jspm插件,命令jspm install css 
    4. 上面步骤完成后,你会发现ZXY_RN_Project下面多了jspm_packages文件夹。


    第六步,安装BrowserSync
      
    1. 通过npm安装browserSync,命令npm install -g browser-sync
    2. 使用BrowserSync启动项目,命令browser-sync start --server 。 如果你想启动后,增加一些监听文件修改时,自动刷新页面,则启动命令为 browser-sync start --server  --no-notify --files ‘xxxx'     (xxx为具体的文件名,相对路径,有多个时,可用逗号分开,如 'index.html, app/main.js’);
    3. 到此,我们可以看到React项目正常启动后,出现页面。

    第七步 IDE的选择

         可选择Sublime Text(程序员Jon Skinner开发), 或Atom ( github内部使用的,现在开源)等等,至于两者或其他的比较,谷歌一下。上面新建的项目,可以直接用IDE打开,如用Atom打开,目录结构如下:





    第八步 编写代码

     经过上面七步,已经完成了一个React项目的构建,下面,我们可以使用IDE进行编程,这里以Atom为主。
    编写完代码后,如果启动项目命令为 browser-sync start --server  --no-notify --files 'xxxx',则保存代码后自动刷新页面,无需手动刷新,如下。






    Atom有非常多优秀的插件,可参考这里,http://blog.csdn.net/qq_30100043/article/details/53558381
    如果遇到安装失败的情况,请看这篇文章,万金油方法, http://www.cnblogs.com/strangerqt/p/5572435.html
    同样,Sublime Text也存在非常多的优秀插件,http://www.cnblogs.com/Rising/p/3741116.html
    展开全文
  • 此文章主要记录React-Native在Mac上的安装过程,以便工作后期查找,对于老手及已会的童鞋直接忽略。 可以直接查看React-Native官网中文文档:https://reactnative.cn/ 安装RN工具库 Mac上的命令行工具,在此不做...
  • React是一个 JavaScript语言的工具库,在这个 JavaScript工具铺天盖地的时代,没 有意外,你需要安装 Node.js, React 本身并不依赖于 Node.js,但是我们开发中用到的诸 多工具需要 Node.js 的支持 。 ...
  • 第一次使用Android studio运行react-native开发的App,不知道怎样去启动项目 失败方式 以下均失败: 1、在项目目录下执行:react-native run-android 2、在项目目录下执行:react-native start 3、在Android studio...
  • 1,node官网下载 ... 然后你会看见如下图片 2, 安装:点击上面的任何一个都可以完成下载,下载完成之后... 打开Mac下的终端输入:node -v会出现版本号就说明成功了 4,创建react项目 4.1,安装node.js ...
  • 上篇文章中写了流行的前端UI几大框架,发现大部分评价都是Vue的UI组件库,从评论中得知漏掉了很多,也有人问React ui,自己就搜索总结下适应于ReactJS的UI组件库。 一.Material-UI   Material-UI是一款React...
  • 了解最常用的React概念和相关术语,例如JSX,组件,属性(Props),状态(state)。 构建一个非常简单的React应用程序,以阐述上述概念。 最终效果 创建React应用 helloworld (1)安装node.js 官网链接 (2)打开...
  • 关于如何在mac下搭建React环境这里就不详细介绍了,有兴趣的朋友可以看:在Mac上搭建RN基础环境,今天要说的是如何在mac下使用Atom+Nuclide组合环境来开发项目。安装Atom如果没有的大家可以到官网下载:...
  • 随着Facebook开源ReactNative,目前越来越多的公司开始在项目中引入此开源框架,所以现在也加入到学习中来。 一 .环境配置 在mac上搭建React环境需要下面这些工具 Android Studio, node.js, the React Native ...
  • 声明:本教程不收取任何费用...4、启动工程 一、简介 先来张成功的效果图: 1、大前提是电脑已经安装最新版的node.js环境,可以去官网下载最新的环境。 可参考:Node.js的安装 2、npm命令 安装官方脚手架 ...
  • umi官方宣称是一个可插拔的企业级 react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。然后配以完善的插件体系,覆盖从...
  • 点击上方“开发者技术前线”,选择“星标”18:30 在看真爱作者:Tamic| 编辑:可可阿里之前开源:阿里闲鱼开源 Flutter 应用框架 Fish Red...
  • React项目搭建命令

    2018-10-14 22:31:26
    Mac环境下: 一、官方搭建: sudo npm install -g create-react-app create-react-app my-app 目录名不要使用大写,这样作只要是为了严谨性,因为在Linux下是严格区分大小写的。 cd my-app npm start   安装...
  • 10 个打造 React.js App 的最佳 UI 框架 在本文中,我们将分享一些助你打造 React.js App 最佳的 UI 框架。它们具备你所需要的基本 React 组件,以及易用的 API,同时,在外观和体验上也非常棒。Have Fun ! ...
  • 这里写自定义目录标题学习react框架,macOS下安装脚手架create-react-app时出错pre:执行安装命令,报错一、尝试第一种方法,使用root用户安装二、尝试第二种方法,把写权限赋给所有用户后进行安装尝试第三种方法,...
1 2 3 4 5 ... 20
收藏数 6,030
精华内容 2,412
关键字:

mac如何启动react的框架