首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从0到1打造一款react-native App(一)环境配置

确认node安装完毕之后cmd输入 npm install -g yarn react-native-cli 设置Android Studio 经过漫长的等待,Android Studio...终于下载好了,安装需要选择路径,开始自定义了路径,结果到后边运行程序时一直报错sdk location not found,明明环境变量也配置过了,还是没解决问题,网上找了2个解决办法,也不靠谱,最后无奈又重新安装了一遍...,直接按照默认路径安装了,这个安装下来比较大有3个多G,但是没在出问题了,目前不清楚哪里有问题,所以安装自己衡量一下,如果自定义了路径可能会出现问题。...安装完成后,会进入一个界面购买license的界面,选择最下方的个人用户,即可免费使用。进入后等待几秒,会让选择所要运行的卓虚拟机。...项目初始化完毕之后,会自动创建一个bleachApp的文件夹 然后cd到这个文件夹运行命令: react-native run-android 又是漫长的等待。

1.5K40

初识package.json,两个重要字段不能忽略

选择本地搭建 React 开发环境,这与实践更加接近。初学时,我们可以通过 Create React App 创建项目。它是 React 初学者创建单页应用的最佳方式。...当我们命令行工具中执行如下指令,依赖包会重新安装 // 使用 npm npm install // 使用 yarn yarn install 例如当前我们项目中,使用React该字段下就会有如下配置...一个大型项目中,依赖包比较多,如果某个依赖包更新之后产生了破坏性的更新,我们无法感知,当你重新安装依赖包之后,有一定的风险导致之前的调试好的功能出现 bug。...因此实践中建议项目创建之初删除该符号,以确保依赖包版本稳定。 也可以使用 yarn.lock 锁住版本 scripts 我们启动项目使用的是 yarn start。...我们可以该字段中定义属于我们自己的指令,例如,我们要区分不同环境,可以自定义如下指令启动项目 也可以使用 npm start // 针对 dev 环境的启动指令 "start:dev": "react-scripts

69110
您找到你想要的搜索结果了吗?
是的
没有找到

13 个 npm 快速开发技巧

运行npm init或npx create- response -app等命令几乎构建JS项目的首选方式,无论是为客户端或服务器端,还是桌面应用程序。 但是npm不仅仅是初始化项目或安装包。...因此,可以运行npx create-react-app .,而不是使用 npx create-react-app my-app 创建一个新的my-app目录。 2....wait-on 节点模块提供了一种方便的方法来确保进程只某些进程就绪发生:我们的例子中,我们有一个特定的端口。 例如,这是使用React前端的Electron项目中使用的dev脚本。...运行前后脚本 你可能熟悉prebuild和postbuild这样的脚本,它们允许你定义构建脚本之前或之后运行的代码。事实上,pre和post可以在任何脚本之前添加,包括自定义脚本。...文件的顶部引入它,因为我们只需要execSync函数,所以可以使用析构赋值语法自己获取它: const { execSync } = require('child_process'); 创建了一个

1.4K50

React 入门学习(五)-- 认识脚手架

我们的现实生活中,脚手架最常用的使用场景是工地,它是为了保证施工顺利的、方便的进行而搭建的,工地上搭建的脚手架可以帮助工人们高校的去完成工作,同时大楼建设完成后,拆除脚手架并不会有任何的影响。...,也是用 React 创建 SPA 应用的最佳方式 2....安装 React 脚手架 首先确保安装了 npm 和Node,版本不要太古老,具体是多少不大清楚,建议还是用 npm update 更新一下 然后打开 cmd 命令行工具,全局安装 create-react-app...npm i create-react-app -g 然后可以新建一个文件夹用于存放项目 在当前的文件夹下执行 create-react-app hello-react 快速搭建项目 再在生成好的 hello-react...文件夹中执行 npm start 启动项目 接下来我们看看这些文件都有什么作用 2.

46720

React 入门学习(五)-- 认识脚手架

我们的现实生活中,脚手架最常用的使用场景是工地,它是为了保证施工顺利的、方便的进行而搭建的,工地上搭建的脚手架可以帮助工人们高校的去完成工作,同时大楼建设完成后,拆除脚手架并不会有任何的影响。...,也是用 React 创建 SPA 应用的最佳方式 2....安装 React 脚手架 首先确保安装了 npm 和Node,版本不要太古老,具体是多少不大清楚,建议还是用 npm update 更新一下 然后打开 cmd 命令行工具,全局安装 create-react-app...npm i create-react-app -g 然后可以新建一个文件夹用于存放项目 在当前的文件夹下执行 create-react-app hello-react 快速搭建项目 再在生成好的 hello-react...文件夹中执行 npm start 启动项目 接下来我们看看这些文件都有什么作用 2.

48520

React Native简介和环境配置

Learn once, write anywhere 这样说并不过分,其实看到的一些APP源码其实是Learn once, run anywhere。...注意:目前npm5(发文最新版本为5.0.4)存在安装新库时会删除其他库的问题,导致项目无法正常运行。请尽量使用yarn代替npm操作。...虽然一般来说命令行工具都是默认安装了你最好还是启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools...此库体积庞大,国内即便访问外国网站也很难下载成功,导致很多人无法正常运行iOS项目,推荐暂时使用0.44.3的版本。...你也可以Nuclide中打开AwesomeProject文件夹 然后运行,或是双击ios/AwesomeProject.xcodeproj文件然后Xcode中点击Run按钮。

1.4K20

你的第一个React App (一 ) - 项目初始化

开始使用React的最佳方式是投入其中。在这篇文章中,将带您经历一个简单的开发过程,创建一个用于跟踪待办事项的应用程序。 准备开发环境 需要为React的开发做一些准备。...接下来的部分中,将解释如何设置和准备创建您的第一个项目。首先我们来搭建开发环境。 安装NodeJS (版本:12.xx.xx),从Node官网下载安装,进行安装。...安装create- react-app (npm install --global create-react-app) 安装一个编辑器(Visual Studio Code,Sublime Text)总之选一个你熟悉的...创建React项目 我们通过命令行创建和管理项目。打开一个新的命令提示符,导航到一个存放项目的位置,运行以下命令来创建新的项目。...$ npm install bootstrap 安装完成后,编辑src目录下的index.js文件,将我们安装的bootstrap框架引入,具体如下: import React from 'react'

84010

十七、详解 ES6 Modules

•hyperTerm 下载地址 https://hyper.is/ 3、安装create-react-app 命令行工具中使用查看版本的方式确保node与npm都安装好之后,我们就可以安装create-react-app...> create-react-app es6app create-react-app会自动帮助我们develop目录下创建一个叫做es6app文件夹,这就是我们新创建的项目。...当项目创建完成之后命令行工具中,我们会看到如图所示的提示。这些提示告诉了我们如何运行项目npm start ,如何打包项目npm run build等,这里就不再赘述。...> npm install 安装完毕之后,我们就可以启动该项目了。 > npm start 一般来说,启动之后会自动浏览器中打开。...当我们运行npm install安装package.json中的依赖包,该文件夹会自动创建,所有的依赖包会安装到该文件夹里。•public 主要的作用是html入口文件的存放。

65020

React基础-1】Hello World

若果你对这个过程感兴趣的话,可以的博客分类【React进阶】中查看”如何从零创建一个react应用”这一篇文章,里面有详细的记录。...通过这个工具,我们可以使用一行命令就可以创建一个基础的、配置好的、可以直接拿来就用的react项目。这个工具使用的前提是你的电脑上已经安装了node环境。...我们新建一个文件夹,然后进入此文件夹之后键盘按住shift键并且鼠标右击,选择”在此处打开Powershell窗口”,然后输入命令npx create-react-app reactbasic来创建第一个...react应用,如下: Hello World编写 react应用创建完成之后命令行面板会提示我们通过命令cd reactbasic进入项目目录,然后通过命令npm start来启动项目。...本文就到此结束了,这一篇文章其实大家只需要知道react的两种使用方式,并且学会使用”create-react-app创建react应用即可。

42910

正式发布一款可cmd命令安装的React.js项目脚手架——FastReactApp

使用工作进程来支持多核编译,并且有一个文件系统缓存,即使重新启动后也可以快速重建。 现在生成树震动包的源映射,并在引用未知符号显示友好的错误消息。...它对React Fast Refresh有一流的支持。它(大多数情况下)能够重新加载之间保持状态(即使发生错误之后)。...myreact2的项目,选择fast-react-app@1.0.1项目模板。...输入命令: npm install 运行项目 输入命令: npm run serve 这里需要声明一点,项目默认安装了mocker-api,mocker-api 为 REST API 创建模拟...项目成功启动。 发布项目 输入命令: npm run build 将用于生产的应用程序生成到buildDir文件夹。它在生产模式下正确地进行反应,并优化构建以获得最佳性能。

1.5K20

2020年值得你去试试的10个React开发工具

本文中,将介绍11个关于React的开发工具,以帮助你选择以及带你了解如何用它们来使你更充分的使用框架。 1....本质上,它是一组为完成与React相关任务的扩展包,在一般情况下,VS解析和在做一般JS需求做的很出色,这个小工具套包将它带入了一个新的高度。...npm:当你需要安装新的插件、重新启动服务器或是运行某些npm特定命令,你都必须从IDE跳到终端,这可能会令你有一些累,所以这个扩展增加了直接从IDE直接运行npm命令的功能。...为了将其包含到你的React项目中,你所需要做的就是(假设您已经安装了webpack,并且您使用Create React App创建了项目): $ npm install --save-dev react-styleguidist...如果你已经安装了npx,则无需安装任何内容,只需以下行即可: $ npx create-react-app my-app 或者,如果你不喜欢npx,你还可以使用npm或yarn: $ npm init

7.8K20

的第一个React应用

前言 说起前端框架,的第一反应就是Angular,Vue和React了,实习的时候Vue和Angular都使用过,也写过相关的博客,包括自己毕业设计就是Angular来做的,但是毕业之后现在家公司就没有机会去使用这些框架...我们先来看一下如何使用这种命令,然后再看以下这个命令行的作用 //全局安装create-react-app npm install -g create-react-app 安装create-react-app...当这里应用就成功的创建了,之后我们使用npm start来启动React 这里出现报错,同事跟我说要把node_moudle文件夹删掉,项目的目录下重新运行 npm install命令 ?...React创建路由,也需要我们安装一些包 npm install --save react-router-dom 安装好之后,我们就可以正式来使用路由了 我们先创建一个页面,这里模仿App.js import...现在如果你正在搭建react运行环境,使用 create-react-app 去自动构建你的app程序。你的项目所在的文件夹下是没有配置文件。

2.1K51

React Native 环境配置的坑

在这一步卡死了,因为这一步安装成功,npm -v也提示版本,但是提示npm not link,所以下面使用npm命令(第3步)的时候就用不了,然后找啊找找啊找,无数次卸载删除该路径都无效,就在放弃的时候突然想到...,用其它方法安装,不要用homebrew安装,然后就去官网下载安装了一个node.js ---- 2、然后安装 watchman(Facebook推出的文件改动监听器): brew install...---- 4、定位到要创建React Native 项目的文件夹使用CLI工具创建一个新的React Native项目: react-native init PropertyFinder 这将创建一个默认的...React Native项目文件夹中,有一个node_modules文件夹,它包含React Native 框架文件。此外还有一个 index.ios.js 文件,这是CLI创建的脚手架代码。...最后,还有一个Xcode项目文件及一个iOS文件夹,后者会有一些iOS代码用于引导React Navtive App

91630

定制 create-react-app:如何制作自己的模版

今天,将教你如何为自己的团队创建自定义的 create-react-app 脚本。...许多开发者已经使用了 create-react-app 来构建他们的 React 应用,像我之前提到的,开发者仍呼吁更多的配置选项。...开发者面对 eject 的主要挑战一是无法再享受 CRA 之后的新特性了,二是团队内同步设置会非常低效。... packages 目录内,有一个叫做 react-scripts 的文件夹。该文件夹包含了用于构建、测试和启动你的应用的脚本。事实上,这就是我们能作出改进的地方,可以配置并增加新的脚本和模版。...现在,终端中进入 test-app 目录,重命名 .env.example 为 .env 并运行 npm start 命令。 你的应用会以新模版启动: ?

1.3K10

基础 | 详解 ES6 Modules

3、hyperTerm 下载地址 https://hyper.is/ 3、安装create-react-app 命令行工具中使用查看版本的方式确保node与npm都安装好之后,我们就可以安装create-react-app...使用npm全局安装create-react-app 然后我们就可以使用create-react-app创建我们的第一个项目。...create-react-app会自动帮助我们develop目录下创建一个叫做es6app文件夹,这就是我们新创建的项目。 当项目创建完成之后命令行工具中,我们会看到如图所示的提示。...这些提示告诉了我们如何运行项目npm start,如何打包项目npm run build等,这里就不再赘述。 项目创建完毕之后,进入该文件夹。...安装完毕之后,我们就可以启动该项目了。 一般来说,启动之后会自动浏览器中打开。 create-react-app已经自动帮助我们实现了热更新,因此当我们修改代码,浏览器会自动更新。

52520

React Native 环境搭建和创建项目(Mac)

搭建基本环境(必要) 使用React Native开发iOS应用需要OSX系统,Xcode,Homebrew,node,npm,也可以有选择的使用watchman 、Flow。 1....使用Homebrew来安装Node.js React Native需要NodeJS 4.0或更高版本。本文发布Homebrew默认安装的是6.x版本,完全满足要求。...Xcode iOS 开发这个最基础的,应该一般有安装,,没有的话只推荐App Store直接搜索安装。 (二) 推荐安装的工具 1....Tools 更近一步的了解和使用参考一起写的另一篇文章哈哈: React Native 开发之IDE (三) 创建第一个项目 1....(最常用,对iOS开发者) 之后无论是从Xcode中启动还是直接npm install都会爆出一个相同的bug: Error watching file for changes: EMFILE {"

1.8K30

window环境下搭建react native及相关插件

官方文档中,只给出在Window上安装React Native的教程,没有给Mac下的教程,在网上找了半天,找了部分内容,又根据自己的理解整理了一下 1、安装Java 这里需要注意对环境变量的设置,...注意,目前已知Node 7.1版本windows上无法正常工作,请注意避开这个版本!...--global npm config set disturl https://npm.taobao.org/dist --global 创建项目 react-native init MyProject...运行完毕后可以模拟器或真机上看到应用自动启动了。 ? ? 卓调试 打开Chrome,访问 http://localhost:8081/debugger-ui,应当能看到一个页面。...发现在运行android.bat 运行package 运行React Native需要先启动 server,按照网上的一些教程需要运行node_modules\react-native\packager

2.5K80

React-day1

移动App第1天 什么是混合移动App开发【重点】 苹果上的软件是如何开发出来的:使用的是 OC、或者使用Swift这门语言 卓平台上的软件又是如何开发出来的:使用卓相关的语言开发的,Java,卓的控件进行开发...×的版本,注意勾选安装界面上的Add Python to path,这样才能自动将Python安装到系统环境变量中; 安装完毕之后,可以命令行中运行python,检查是否成功安装了python。...build-tools,并将改名为版本号之后文件夹,放到新创建出来的build-tools文件夹安装目录中,新建extras文件夹extras文件夹下新建android文件夹;解压m2responsitory...创建React-Native项目 运行cd AwesomeProject切换到项目根目录中,运行adb devices来确保有设备连接到了电脑上 运行react-native run-android打包编译卓项目...进入到项目的根目录中,打开cmd窗口,运行weex platform add android安装android模板,首次安装模板,等待时间较长,建议fq安装模板 打开android studio中的卓模拟器

2.2K20
领券