nodejs android 开发,Android - NodeJS与React

1NodeJS安装React

参考: C盘下React2019项目, Rethinking Web App Development

1.1NodeJS

1.1.1命令

$ node -v

#create-react-app是业界最优秀的 React 应用开发工具之一

$ npm install create-react-app -g

//安装目录，webpack也已就位

C:\Users\xxx\AppData\Roaming\npm\node_modules\create-react-app\index.js

1.1.2安装目录

1.1.3升级NodeJS

Windows下直接安装NodeJS到原目录进行升级，并：

$ npm update -g

1.1.4创建React项目

$ create-react-app react-project

#查看项目

$ cat package.json

#启动项目

$ npm start

#验证项目

http://localhost:3000/

1.1.5把组件挂载到DOM节点

ReactDOM.render(, document.getElementById('root'));

#组件的render方法

render() { return

hello react

; }

1.1.6JSX JS-XML

JSX就是js的语法糖：添加的语法对功能没有影响，为了增加语言的可读性；被解析为js再执行

https://juejin.im/entry/58c6c6d32f301e006bcc1260#comment

1.1.7很好的JSX参考资料

https://www.yuque.com/ant-design/course/fd5af7

JSX 可以被 Babel 转码器转为正常的 JavaScript 语法。

可以看到，JSX 语法的值的部分，只要使用了大括号{}，就表示进入 JS 的上下文，可以写入 JS 代码。const element = (

Hello, {formatName(user)}!

);

任何 JSX 表达式，顶层只能有一个标签，也就是说只能有一个根元素。下面代码中，如果根元素的位置有两个并列的

标签，在它们外面再包一层，就不会报错了。// 不报错

constelement=

hello

world

;

虽然输出 JSX 代码的函数就是一个 React 组件，但是这种写法只适合那些最简单的组件。更正式、更通用的组件写法，要使用 ES6 类(class)的语法。

使用 React 组件也很简单，引入这个组件以后，就可以直接使用。假定上面的组件脚本叫做shoppinglist.js，那么使用它的代码如下。importShoppingListfrom'./shoppinglist.js';

一般来说，HTML 原生标签都使用小写，开发者自定义的组件标签首字母大写，比如。

组件内部，所有参数都放在this.props属性上面。通过this.props.name就可以拿到传入的值(张三)。

除了接受外部参数，组件内部也有不同的状态。React 规定，组件的内部状态记录在this.state这个对象上面。

通过前面的学习，你应该已经搭建完成了脚手架，并且了解了 React 的基本概念。这一节，我们就来教大家如何使用 Ant Design 组件库，完成一个卡片组件(card)。