React-Nativ 移动app开发
React-Nativ标签（空格分隔）： ReactNative 前景知识nodejs react reactj 环境搭建：ReactNative中文网： https://reactnative.cn/npm（全称Node Package Manager，即node包管理器）. react native 启动服务端：npm star 查看打包后的脚本 http://localhost:8081/index.a... 基础语法ReactWhat’s ReactReact是一个用于组建用户界面的JavaScript库，让你以更简单的方式来创建交互式用户界面。 当数据改变时，React将高效的更新和渲染需要更新的组件。声明性视图使你的代码更可预测，更容易调试。
Get Started使用React之前需要在页面引入如下js库 。
上面一共列举了三个react.js 、react-dom.js 和 browser.min.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，browser.min.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。 使用Reac <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello,world!</h1>,document.('example')
);
</script>
</body>
</html>
在 JavaScript 代码里写着 XML 格式的代码称为 JSX，下文会介绍。为了把 JSX 转成标准的 JavaScript，我们用<script type="text/babel">标签，然后通过Babel转换成在浏览器中真正执行的内容。 ReactDOM.render() ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。 ReactDOM.render(
<h1>Hello,document.getElementById('example')
);
###JSX JSX 不是一门新语言，是个语法是一个看起来很像 XML 的 JavaScript 语法扩展。 每一个XML标签都会被JSX转换工具转换成纯JavaScript代码，使用JSX，组件的结构和组件之间的关系看上去更加清晰。 JSX并不是React必须使用的，但React官方建议我们使用 JSX,因为它能定义简洁且我们熟知的包含属性的树状结构语法。 JSX必须React上 在JSX中运行javascript代码，要使用**** var text = "shufu";
ReactDOM.render(
<h1>text</h1>，
document.getElemetByI("容器")
);
Usage: React.render(//使用JSX
<div>
<div>
<div>content</div>
</div>
</div>,document.getElementById('example')
);
React.render(//不使用JSX
React.createElement('div',null,React.createElement('div','content')
)
),document.getElementById('example')
);
API和组件创建组件3种方式：
组件生命周期组件
React
React组 工具webstorm fuwuqi 出现问题 [坑点]react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ 一类的错误，其实仔细读错误日志就可以看得明白是没有assents目录，手动创建assents目录，之后再次执行上面这段命令行。 这里写图片描述 看样子是正确执行了 Watchman# npm start
┌────────────────────────────────────────────────────────────────────────────┐ React packager ready. [12:00:54] <START> Building Dependency Graph {"watchmanResponse":{"version":"3.7.0","error":"A non-recoverable condition has triggered. Watchman needs your help!nThe triggering condition was at timestamp=1443812455: inotify-add-watch(/home/oren/projects/react-native/ReactNative-PropertyFinder/node_modules/react-native/node_modules/module-deps/node_modules/detective/node_modules/escodegen/node_modules/.bin) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctlnAll requests will continue to fail with this message until you resolventhe underlying problem. You will find more information on fixing this atnhttps://facebook.github.io/wa...n"}} at emitTwo (events.js:87:13) at ChildProcess.emit (events.js:172:7) at maybeClose (internal/child_process.js:817:16) at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5) echo 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instancesecho 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_eventsecho 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watcheswatchman shutdown-server （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |