react循环data_react起步到入门

类似于vue-cli的react架子

react官网

react中文官网

redux

React Router 文档

#

准备

git clone https://github.com/reactjs/react-router-tutorial.gitcd lessons/01-setting-upnpm inpm start

浏览器打开http://localhost:8080/

创建Demo.js

// Demo.jsimport React, { Component} from 'react'export default class Demo1 extends Component { constructor (props) { super(props) this.state = { msg: "demo1" } } render () { let {msg} = this.state return ( 

{ msg }

) }}

修改App.js

import React from 'react'

import Demo from './Demo';

export default React.createClass({

render() {

return (

)

}

})

现在可以点击进入react官网，选择快速开始～

#

开始

• hello world

这块的代码很简单，具体可以看项目的app.js入口文件。

重点是 ReactDOM.render可以绑定应用到dom

接下来正式开始学习

ReactDOM.render( 

Hello, world!

, document.getElementById('your id'));

#

JSX

作用是react的视图

js的一种拓展语言，就是在js里面插入html标签。

vscode推荐插件:Auto Close Tag Babel JavaScript

以下的例子都可以用项目的demo1.js中尝试

注意点:

• jsx可以使用js表达式，必须写在{} 中
• "" 代表赋值，"{}" 这么写会被转译成字符串的值
• 标签中的class被改成了className，标签中的属性名全都要写成小驼峰命名
• 例子

const element = 

Hello, world!

;const animal = { cat: '小宝', dog: '小贝',}// 使用render () { let {msg} = this.state return (

{ msg }

{animal.dog}

) }// 定义属性const imgSrc='xxx/asset/xxx.png'const h1 =

class

// 可以用 {} 进行赋值，但是用了{} 就别用""包裹了，否则为字符串 const img = // const img = error

vue中是用.vue文件直接把html css js一并囊括了，但是react没有单独的.文件 。所以jsx就相当于是react的视图部分了。

没有v-if v-for之类的语法，全是原生写法的js