React 学习笔记（1）--Windows环境搭建

最新推荐文章于 2024-04-18 07:57:23 发布
最新推荐文章于 2024-04-18 07:57:23 发布
阅读量577 收藏
点赞数
分类专栏： React Native 文章标签： React Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oMengShuaiShuai/article/details/55255520
版权

React 学习笔记

一、React Native环境搭建

1、下载安装jdk
2、下载安装sdk
  • 可以先安装Android Studio，然后使用其中的工具进行安装
  • 可以用http://androiddevtools.cn/中的镜像镜像配置安装，能提升下载速度
3、安装c++模块
  • （用于编译node.js用）可以安装windows sdk、cygwin或mingw等
4、安装node.js
5、安装git
6、安装好git之后再git.cmd.exe中设置全局镜像
  • 命令： npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist
7、在github上下载react native安装包
  • 进入https://github.com
  • 搜索react native，下载facebook官方版本到本地并解压
8、安装react native
  • 使用git.cmd.exe命令工具进入到react native的解压目录，然后使用如下命令进行安装
  • 命令： npm instatll –g react-native-cli
9、创建react native项目
  • 命令： react-native init [项目名]
10、运行react native packager
  • 进入到项目目录，然后使用如下命令运行
  • 命令：react-native start
  • 运行后不要关闭命令行窗口，使用浏览器访问: http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本，如果可以，证明运行成功。如果不能访问可以检查8081端口是否被占用，命令：netstat -aon|findstr "8081"找出占用程序的pid，然后使用命令：tasklist|findstr "[程序PID]"找到占用的程序，可以在任务管理器或者服务中关闭相应程序或服务
11、运行react-native（以android为例）
  • 可以下载android模拟器，（可以用“BlueStacks”、“夜神安卓模拟器”、“逍遥安卓模拟器”）

  • 命令：react-native run-android

    注意：

    • 1、如果出现找不到sdk或者找不到android相关的sdk版本，需要打开sdk工具进行相应的升级

    • 2、如果编译过程中发现下载gradle-2.4-all.zip十分缓慢，可以先到 http://androiddevtools.cn/ 找到gradle-2.4-all.zip这个文件的下载地址：http://pan.baidu.com/s/1c0dcgfe， 将它下载到本地。然后将[项目目录]/android/gradle/wrapper/gradle-wrapper.properties中的distributionUrl= https://services.gradle.org/distributions/gradle-2.4-all.zip 改为distributionUrl=file:///[本地保存的路径]，让它本地离线下载。例如：distributionUrl=file:///E:/ReactNativeWork/gradle-2.4-all.zip

12、运行异常
  • 第一次运行模拟器界面会出现错误（屏幕会红色），可以点击模拟器上面的摇晃手机图标，出现界面，然后选择Dev Setting，然后选择Debug server host&port for device，在其中的ip地址端口中填写当前机器的ip地址加8081的端口号，例如：192.168.1.1:8081 然后再次点击摇晃手机按钮，点击Reload即可.
  • 如果出现com.android.builder.testing.api.DeviceException: No connected devices!的错误，请确保Android虚拟机已经启动，并且通过adb devices可以查询到， 例如：emulator-5554 device.

二、WebStorm开发配置

1、下载开发IDE
2、WebStorm配置React Native代码提示
  • 在github命令工具中执行：git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate 然后在webstorm中file-->import setting…--> ReactNative.jar，重启webstorm即可

oMengShuaiShuai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Native学习笔记一：环境搭建、创建和启动项目
九段刀客的博客
07-14 285
初始化 npx react-native init AwesomeProject
React基础学习笔记（一）——简介及windows10下环境搭建和项目起步
weixin_36466834的博客
05-29 581
React学习笔记（一）—— 简介及windows10下环境搭建和项目起步一、前言二、开始安装（一）安装node.js1、下载node.js2、安装node.js（含npm）（二）基本操作1、查看版本号2、升级更新3、全局安装 create-react-app三、创建项目 一、前言 首先，什么是React？ 1）React是JavaScript最受欢迎的的库之一； 2）它不算是一个框架（这点和Angular不一样了）； 3）React是Facebook创建的一个开源项目； 4）React用于在前端构建用户界
microsoft /React Native for Windows 项目搭建
u011690583的博客
02-24 897
RN越来越强大了 随手构建一个windows环境玩玩。再与Electron做以下对比。其中，如果不懂C++和VS的同学，相比Electron是困难的，虽然微软做了很多，但也不能避免后期去修改基础项目的C++代码。整合其他C++代码是容易的，Electron的时候需要借助node-gyp来实现的部分，这里直接扔进来，再写一点代码就ok。相比Electron 这个项目只支持windows10，不支持win7…玩个毛线。留个脚步，说明我来过，一旦未来可能某年需要用到呢。。。。 1、配置开发环境 http://mi
React Native for Windows:使用React构建本机Windows应用程序的框架-开源
05-26
将您的React Native应用程序带到一些功能最强大的设备上。 借助我们对React Native的强大Windows扩展，可以在PC，Xbox，Surface Tablets和双屏上运行您的应用程序。 将您的桌面体验扩展到不仅仅是Windows！ 尝试使用我们完全支持的macOS对React Native的扩展。 适用于Windows + macOS的React Native为Windows 10 SDK和macOS 10.13 SDK带来了React Native支持。 这样，您就可以使用JavaScript为Windows 10支持的所有设备（包括PC，平板电脑，二合一设备，Xbox，混合现实设备等）以及macOS台式机和笔记本电脑生态系统构建本机Windows应用程序。 默认情况下，某些构建时工具会将遥测发送给Microsoft。 最终应用中未收集或传输遥测数据。 您可以使用--no-telemetry命令行选项阻止发送遥测。 有关更多详细信息，请参见--help命令或README文件。
React-Native-Windows 开发环境
MichaelMCFD的博客
05-15 1082
网上关于react-native-windows的踩坑好少，所以自己摸索着看看吧。
React native 开发环境配置 for windows
在岁月中沉淀的博客
08-13 626
React native开发环境配置  目有前来讲使用windows的开发者还是比较多的，毕竟门槛会低很多。移动开发可谓是热火朝天，涌现了一下框架，为移动开发助力。React Native是react的一个分支，转为移动开发设计的，使用的开发语言是JavaSrcipt脚本语言。最大的好处在于写一次代码，就能打包成IOS应用和Android应用，不仅缩短了开发周期，效率也提高。或许它会成为未来移动开发
(React-Native 学习之一) Windows版本搭建安装React Native环境配置
一条咸鱼
10-27 449
Reat-Native 环境配置以及软件安装说在前面的话:        感谢同事金晓冰倾情奉献本环境搭建教程        之前我们已经讲解了React Native的OS X系统的环境搭建以及配置，鉴于各大群里有很多人反应在Windows环境搭建出现各种问题，今天就特意更新一贴来说明。关于os x环境搭建以及react native入门学习资料请移步: http://www.lcode.org
flutter 环境搭建-flutter环境搭建,很不错的学习笔记
最新发布
07-05
### Flutter 环境搭建详解 #### Flutter 概述与特性 Flutter 是一款由谷歌公司推出的开源 UI 框架，旨在实现跨平台的应用开发，能够高效地在 iOS 和 Android 设备上构建出高质量的原生应用。其核心优势在于跨平台...
React-Native学习笔记1—环境搭建[Linux & Windows]
young_Emily的博客
01-10 782
这篇博文记录下我从reactnative搭建环境到从零开始学习的探索之旅，记录自己的成长。 1. 环境搭建 步骤如下： 1.安装node 2.安装JDK 3.安装/配置Android-studio开发工具 4.安装React-Native Cli及初始化reactnative项目 5.在模拟器或真机上运行项目 下面简略说下在win下和linux两个环境中的配
react create-react-app v5 从零搭建（使用 npm run eject）_react app
2401_83739821的博客
04-18 975
本书第﹖版以最新的Ubuntu 12.04为版本，循序渐进地向读者介绍了Linux 的基础应用、系统管理、网络应用、娱乐和办公、程序开发、服务器配置、系统安全等。需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论。需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论。//px2rem的配置。
reactChallengeWin7:使用基于Windows 7的Node.JS依赖关系来响应质询代码
04-05
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（webpa
react native 之 webstorm开发（windows）
蒙的博客
11-16 2161
前言：作为Android开发的老司机，前端时间我在windows上面把reactnative项目做了一个流程的研究，同时也把相关的博客给贴了出去。今天考虑到reactnative的js的书写需要开发工具，就看了一下网上的各种资料，最后选了webstorm作为自己开发reactnative的工具来走了一下reactnative项目js的书写流程。 我选择webstorm的原因主要是它和Androi
Windows下React环境搭建
！@#！！@#@！
01-29 592
1.安装Python，下载地址https://www.python.org/，选择"Windows x86-64 executable installer"即可。 (1.)勾选"Add Python x.x to PATH"（备注：x.x为版本号） (2.)点击"Customize installation" (3.)"Optional Features"默认即可,点击"Next" (4....
windows上搭建react native环境
weixin_33985507的博客
04-04 142
一、配置环境 1.准备相关资源 AndroidStudioAndroid开发集成开发环境（推荐下载含SDKtools版） JDKforWindowsJava Develop Kit（java开发工具） Nodejsnodejs环境 2.ReactNative环境配置步骤 1) 使用npm安装ReactNative 在...
relectron框架——打包前端vue3、react为pc端exe可执行程序
编程知识分享，主打前端
11-03 2万+
大家好，我是yma16，本文分享关于使用electronjs打包前端vue3、react成exe可执行程序。。前端vue2、vue3去掉url路由“ # ”号——nginx配置csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板认识vite_vue3 初始化项目到打包python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示vue3 + fastapi 实现选择目录所有文件自定义上传到服务器Electron前端框架。
react使用electron打包为桌面应用
qq_38331728的博客
03-26 904
#1. 准备 比如说你的react项目写到了一定地步，那就准备开始打包项目吧，先npm安装electron和electron-packager,建议全局安装。 #2. 安装 npm i -g electron electron-packager #3. 打包 先打包你的react项目，再package.json中增加一行"homepage":"./", 再执行build npm run build 完事你的根目录下会多出一个文件夹build，如下 这个build就是了， 进去
超简单的React项目打包后部署到服务器上
nihaio25的博客
12-21 1万+
前言：我们都知道有些react项目打包后生成的不管是dist,还是build的文件，直接打开都无法直接浏览到项目，然后查看控制器，就发现它报错。 如图： 用脚手架创建的 react / vue 项目，已经集成了webpack，只要运行命令：npm run build 或 yarn run build 项目就会编译成功，生成一个dist文件夹，现在问题来了，如何启动这个编译后项目呢。 ...
windows环境reactjs入坑记------react开发环境安装
热门推荐
VICHOU_FA的博客
01-07 2万+
React简介： React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
React从开始搭建到项目部署到服务器
胖叔的博客
05-22 1万+
导语 什么是React？Vue跟React相比的区别是哪些？为什么大厂都会选择React？ 区别 设计模式 React采用的是MVC模式（严格的view层）；Vue采用的是MVVM模式； 组件写法不同； react主张jsx+inline style,也就是讲HTML、css写到js中，一切皆js,vue则是webpack+Vue-loader的单文件组件格式，即HTML、css...
Angular4 vs React：对比与环境搭建笔记
在实际学习和搭建环境中，读者需要： 1. 安装Node.js，这是大部分前端开发工具的基础。 2. 选择一个合适的编辑器，Sublime Text轻量且可自定义，而WebStorm则提供全面的功能，但可能需要付费和占用更多系统资源。 3....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值