React基本项目构建

作者: 雅玲哑铃 | 来源:发表于2018-03-08 09:28 被阅读29次

文档链接https://reactnative.cn/docs/0.51/getting-started.html

构建项目
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

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

brew install watchman

测试安装:构建一个简单项目

react-native init MyApp --version 0.44.3

cd MyApp

react-native run-ios 运行项目

或者运行项目:双击ios/AwesomeProject.xcodeproj文件然后在Xcode中点击Run按钮。

在项目下新建components文件夹,存放所有组件

APP.js入口文件

传参给组件New.js——自定义属性

<New data={data}></New>

组件可通过this.props.data接收参数

相关文章

  • React基本项目构建

    文档链接https://reactnative.cn/docs/0.51/getting-started.html...

  • React基础

    一、react基本认识 1.react是一个用于构建用户UI的JS库。 2.若要使用react创建项目,需全局安装...

  • react 项目构建

    前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generato...

  • 2018-11-27 构建一个react,redux,react

    根据之前同事构建的react,redux项目,然后自己研究构建一个,下面是自己构建项目的流程。用的是react16...

  • 搭建react 脚手架

    react项目构建使用脚手架:create-react-app

  • nginx中对vue(spa)项目的缓存配置

    目前前端的项目基本上被vue、react、angular霸占了,构建打包也基本上都是基于webpack,3个不同框...

  • React

    使用 create-react-app 快速构建 React 开发环境 项目的目录结构如下: React JSX ...

  • React工程化项目结构详解

    通过create-react-app来构建React项目 create-react-app 是来自 FaceBoo...

  • React中Component与PureComponent的区别

    Component是React App的基本构建的单位,也是React中的基本代码复用单位。PureCompone...

  • react基本知识

    一、基本知识 1.新建项目(构建单页面) npx create-react-app my-app cd my-ap...

网友评论

    本文标题:React基本项目构建

    本文链接:https://www.haomeiwen.com/subject/zvpefftx.html