学习ReactNative笔记三 __React基础

---

学习ReactNative笔记三 __React基础

★★★笔记时间- 2017-1-11 ★★★

---

1.安装React

安装前的准备，原本是放在后面的，但是怕误导别人所以提到前面了。

如果上面的没有报错了，但是目录是空的话，请创建jspm项目

操作如下:

//1. 创建package.json
npm init

//2. 本地安装jspm
npm install jspm --save-dev

//3.创建config.js
jspm init

//4.安装包
jspm install npm:underscore

//5.安装jquery
jspm install jquery

React Native中文官网

1.1 jspm install react@0.14.0-rc1 安装React的版本;如果指定版本不对的话就，直接下载最新的包: jspm install react
1.2 jspm install react-dom@0.14.0-rc1 安装react-dom的版本,同上:jspm install react
1.3 jspm install semantic-uiUI样式
1.4 jspm install css UI插件
1.5 browser-sync start --server --no-notify --files 'index.html, app/**/*.js'创建一个服务器来监视文件的变化
1.6 npm install webpack -g安装webpack
1.6 npm install -g webpack webpack-dev-server webpack服务

执行:sudo npm i babel-runtime@6 --save-dev

ERROR:

sudo npm i babel-runtime@5 --save-dev
core-js@2.4.1 node_modules/babel-runtime/node_modules/core-js -> node_modules/systemjs-builder/node_modules/core-js
/Users/x
├── UNMET PEER DEPENDENCY  extraneous error: ENOENT: no such file or directory, open '/Users/x/node_modules/babel-core/package.json
├── babel-runtime@5.8.38 
└── UNMET PEER DEPENDENCY webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc

npm WARN enoent ENOENT: no such file or directory, open '/Users/x/node_modules/babel-core/package.json'
npm WARN babel-loader@6.2.10 requires a peer of babel-core@^6.0.0 but none was installed.
npm WARN babel-loader@6.2.10 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN x No description
npm WARN x No repository field.
npm WARN x No license field.
npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "i" "babel-runtime@5" "--save-dev"
npm ERR! node v6.2.0

解决的方法是:rm -rf node_modules/,然后就可以了

重新安装就好了:

➜  ~ sudo npm i babel-runtime@6 --save-dev
/Users/x
└─┬ babel-runtime@6.20.0 
  ├── core-js@2.4.1 
  └── regenerator-runtime@0.10.1 

npm WARN x No description
npm WARN x No repository field.
npm WARN x No license field.

安装UI样式:

➜  ~ jspm install semantic-ui

warn Running jspm globally, it is advisable to locally install jspm via npm install jspm --save-dev.
     Updating registry cache...
     Looking up github:Semantic-Org/Semantic-UI
     Looking up npm:jquery
     Looking up github:systemjs/plugin-css
ok   Up to date - semantic-ui as github:Semantic-Org/Semantic-UI@^2.2.7 (2.2.7)
ok   Install tree has no forks.

ok   Install complete.

➜  ~ jspm install css

warn Running jspm globally, it is advisable to locally install jspm via npm install jspm --save-dev.
     Updating registry cache...
     Looking up github:systemjs/plugin-css
ok   Up to date - css as github:systemjs/plugin-css@^0.1.32 (0.1.32)
ok   Install tree has no forks.

ok   Install complete.

npm ERR! Darwin 16.3.0

一直出错的原因是网络超时，墙一下就好了

2.定义组件

最外面的组件是:CommentBox
评论的列表:CommentList
评论的内容显示:Comment
评论的内容表单:CommentForm

3. 显示ReactDom.render

🐼🐶🐶如果对你有帮助，或觉得可以。请右上角star一下，这是对我一种鼓励，让我知道我写的东西有人认可，我才会后续不断的进行完善。

有任何问题或建议请及时issues me，以便我能更快的进行更新修复。

Email: marlonxlj@163.com