react学习第一天笔记

import React,{Component} from 'react';

import '../assets/css/inde.css';

import logo from '../assets/images/logo.jpg';

/**

 * 绑定属性注意

 * class要变成className

 * for要换成htmlFor

 * style要转换成 <div style={{"color":'red'}}>我是红色的div 行内样式 </div>

 * 其他的属性和其他的写法是一样的

 * 引入本地图片    import logo from '../assets/images/logo.jpg';

 * 而引入网上的图片直接引入链接就可以

 */

 

class News extends Component{

    constructor(props){

        super(props);//用于父子组件传值，如果不用的父子组件传值可以直接去掉这个，但是建议写

        //定义数据

        this.state={

            user:"ligengxian",

            color:'red',

            style:{

                color:'red',

                fontSize:'40px'

            },

            list:[

                '11111','22222','3333333'

            ],

            list2:[

                <h2>我是一个h2</h2>,<h2>我是一个h2</h2>,<h2>我是一个h2</h2>

            ],

            list3:[

                {title:"新闻11111"},

                {title:"新闻12111"},

                {title:"新闻13111"},

                {title:"新闻14111"}

            ]

 

        }

    }

    render(){

        //通过这样list格式就转化成了lsit2格式，就可以直接输出了

        let l=this.state.list.map(function(value,key){

            

            return <li key={key}>{value}</li>

        })

 

        return(

            <div>

                <h1>{this.state.user}</h1>

                <ul>

                    <li>这是一个列表</li>

                    <li>这是一个列表</li>

                    

                    <li>这是一个列表</li>

                </ul>

                <div title={this.state.user}>我是一个div</div>

                //给这个div引入颜色

 

                <div className={this.state.color}>我是红色的div  </div>

 

                <label htmlFor="name">姓名</label>

                <input id="name"/>

                //接下来我们要给div写一个行内的样式,看下怎么写

                <div style={{"color":'red'}}>我是红色的div 行内样式 </div>

                <div style={this.state.style}>我是红色的div 行内样式 </div>

 

                <div className="news">

 

      

                  <p>图片：

                  <img src={logo}></img>

                  <img src={require('../assets/images/logo2.jpg')}></img>

                  <img src="http://pic16.nipic.com/20111006/6239936_092702973000_2.jpg"></img>

                  </p>

                  </div>

                  <br/>

                  {this.state.list2}

                 <ul>{l}</ul> 

                 <br/>

                <ul>{

                    //花括号就可以自己写js的代码 */

                   //处理list3数组加对象进行处理

                   this.state.list3.map(function(value,key){

                       //如果返回的数据是多行的话就用一个()给他，key也给他指定

                           return (<li key={key}>{value.title}</li>)

                           //接着模板里面循环数据

                   })

 

                }

                </ul>

            </div>

        )

    }

}

 

export default News;