React Native环境搭建及Hello World

湖边看客

已于 2023-11-30 23:52:20 修改

阅读量1.5k

点赞数 28

文章标签： react native react.js javascript

于 2023-11-30 23:45:50 首次发布

本文链接：https://blog.csdn.net/VVVVV16/article/details/134724203

版权

写这篇博客的目的就是想说,react native 挺简单,但是大部分初级前端会被环境搭建给难住,从而放弃.

环境搭建

环境搭建其实说简单也挺简单的,有经验的前端直接翻看react native中文文档就行,直接按上面来肯定没错

以下以安卓开发,windows配置环境为例,来演示一遍

首先

电脑上得有node环境和npm,yarn等随便一个包管理工具

下载java JDK 目前native 要用11版本的jdk

安装java的jdk得配置一下电脑的环境变量(我这里因为后端开发需要下载了两个版本)

在path路径中也配置好(有点乱,可以自行百度配置)

第二步

去下载 Android Studio 和应用工具 - Android 开发者 | Android Developers网站下载安卓开发工具

就按native官网所说的安装

第三步

下载完之后,我们也需要配置一下android的环境变量

点击安卓开发工具的左上角设置进入这个页面找到这个,将这个路径copy下来

path

第四步

我们点击这里需要下载一个模拟器

第五步

按照官网所说的创建一个新项目

运行yarn android

输入a

然后

就启动成功了

编写Hello World

App.tsx是入口文件

自己按着react语法配合着react native官网就可以开干了

!!!

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

湖边看客

关注关注

28
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
React Native环境搭建及Hello World

写这篇博客的目的就是想说,react native 挺简单,但是大部分初级前端会被环境搭建给难住,从而放弃.
复制链接

扫一扫

React Native环境搭建

fengyu_xueer的博客

04-20

238

前言：一直听别人说到react，但都没有去关心过，最近因为公司领导的要求，接触了一下react native，知道了它是facebook推出的一个全新的框架，主要用来做混合开发的，可以跨平台，第一感觉就是，我擦，这不是给日益严峻的安卓市场盖了一层霜吗？但技术总是在向前不断发展的，该学的还是要学的，今天费了好大的劲，参考了许多网上的资料，终于将环境搭建好了，在此分享一下完整成功步骤，希望可以给予别人一

React Native环境的搭建

jyt婷的博客

12-28

2737

安装必需的软件 Homebrew Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 安装完成之后,界面大概如图: 译注：在Max

1 条评论您还未登录，请先登录后发表或查看评论

ReactNative入门之编写HelloWorld

ZACH_ZHOU的博客

01-03

1002

上一篇文章简要的概括了RN的环境搭建，从本篇开始，我会带大家从一个RN小白，一步一步的具备RN开发的能力。按照传统，我们从HelloWorld开始。import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native'; class HelloWorldApp extends Compone

ReactNative-HelloWorld

u014773226的博客

08-03

714

要理解React Native应用的基本结构，首先需要了解一些基本的React的概念，比如JSX语法、组件、state状态以及props属性。如果你已经了解了React，那么还需要掌握一些React Native特有的知识，比如原生组件的使用。 Hello World 根据历史悠久的“传统”，我们也来写一个“Hello World”： import React, { Co

ReactNative入门（一）——环境搭建及第一个RN项目—HelloWorld

最新发布

白玉梁的专栏

09-07

2627

ReactNative入门——本篇以及接下来的几篇有关RN的文章，是默认你对前端相关知识如Node，React，以及原生移动端Android可以熟练使用的情况下（最起码达到了解会用的程度）为前提的！不然你就需要先去了学习前端（React为主）以及Android端知识了！另外，文章的内容都是在Windows环境下进行的！ReactNative是个什么东西？这里我就不做详细讲解了，直接去官网查看即可！

React Native 之 Hello World

03-03

428

1/创建HelloWord mac终端cd到workspace, 执行创建工程命令 : react-native init HelloWorld 2/ cd进工程,打开IOS工程用xcode,cmd+R运行前执行命令: react-native start , 开启服务如果 http://localhost:8081/index.ios.bundle?platform=ios&de

react native之helloworld

mockingbirds的专栏

01-05

1353

上一篇博客学习了如何在windows下搭建reactnative开发环境，先来简单总结一下吧：安装react-native命令： #在终端输入如下命令来安装react-native命令 npm install -g react-native-cli 创建react native工程 #同样在终端下输入如下命令来创建react native工程 react-native init 工程名开启re

react native：在windows上搭建安卓环境并在虚拟机上启动Hello World

01-03

React Native 是Facebook开源的跨平台移动应用开发框架，熟悉前端开发的容易上手，学习一次便能很快进行双端移动App的开发。一，环境搭建准备 windows系统（建议8G内存或以上） Node Python2 JDK1.8 Android Studio...

react-native-helloworld:将React Hello World应用程序转换为React Native应用程序

05-16

- `react-native-helloworld-master`这个文件名可能表示的是项目源代码的主分支。通常，React Native项目的根目录下会有`index.js`作为入口文件，`App.js`包含应用的主要组件，`package.json`记录项目依赖和配置，...

React-_Native_Hello_World

04-29

蜜蜂适用于React Native，Expo Technologies的示例培训项目入门克隆或下载项目git clone https://github.com/kwar0715/React-_Native_Hello_World.git先决条件NodeJS 10.6 NPM 6.2 react-native-app 世博会正在安装...

Android原生项目集成React Native的方法

08-28

准备开发环境需要按照开发环境搭建教程来安装React Native在安卓平台上所需的一切依赖软件（比如npm）。在应用中添加JS代码，首先需要在项目的根目录中运行以下命令：$ npm init、$ npm install --save react react-...

React Native之HelloWorld

my blog

06-24

209

#查看node版本 node -v #nodejs中有一个模块叫n，专门用来管理node.js的版本的 npm install -g n #使用n升级node.js到最新稳定版 n stable #安装expo npm install --global expo-cli #安装脚手架create-react-native-app npm install -g create-react-native-app #使用create-react-native-app创建应用 create-react-na

［ReactNative入门到精通］React Native 第一个程序 Hello Word

北漂周的专栏（微信：stchou_zst）

10-12

8374

人生没有对错，只有选择后的坚持，不后悔，走下去，就是对的。 React Native 项目目录解析上一节我们简单的新建了一个React Native的项目AwsoneProject，我们什么都没有操作，就直接在模拟器上运行起来了。这里我们详细的看看，React Native给我们生成的这几个文件到底是做什么用的。项目目录结构文件建构如下图所示： android android 的项目构建目录

02 React Native入门——Hello World

X北辰北的博客

04-26

473

简介每学一门语言，我们首先要做的第一个demo就是“Hello World”，不做对不起这门语言、对不起代码编辑器，哈哈，废话不多说了，这篇文章就用很少的文字来介绍下如何编写我们的Hello World吧。操作步骤 1、用我们经常用的前端代码编辑器来打开上文中我们创建的项目“myfirstapp”，在这里我用的是webstorm，如图： 2、然后打开项目目录下...

react native 之hello world

蒙的博客

11-13

1422

前言：前几天将react native开发需要的环境给搭建了起来，并且也初始化了一个react native 项目，这篇文章接着上个阶段，将细致的一步到位的简单的告诉对面的你怎么去将初始化的react native 项目在真机上跑起来，并且推开RN技术学习的大门，实现标志性的效果 hello world！！友情提示：以下流程的操作是基于我的windows电脑已经配置了java，安装了R

React Native 初学-新建HelloWorldApp工程

05-11

984

搭建react native环境基本上是参考了一下两篇文章：点击打开链接点击打开链接

React-native 程序第一个HelloWorld的编写

wolfking0608的博客

06-04

2856

前提: 我上文提到的环境配置,如果都ok的话,即可进行以下编写:第一步: cmd 命令行输入: react-native init RNDemo 回车 (备注:RNDemo 是自己随便给新程序命名,相当于Android Studio中的 New Project) 这个命令的目的,就是建立一个React native的新工程 ,等到cmd执行完毕,即可在cmd执行的目录下,看到新建的RNDem...

React-native之 helloworld

正在Android的学习路上

03-25

1191

React-native之 helloworld

［React-native］第一行代码Helloworld及集成已有项目的方案

haibo_bear的博客

11-02

4389

一、参考官方文档点击打开链接写了第一个文档hello world 二、开启学习ES 6第一步：部署支持环境三、在已有项目中引入react native

React Native入门与实战指南

本书旨在提供专业的提示和技巧，涵盖React Native的基础设置、 HelloWorld示例、组件属性（Props）、多属性渲染、Modal组件的使用、状态管理和路由等主题。" React Native是一种由Facebook开发的开源框架，用于构建...