【备战春招】第4天 React样式添加

**课程名称：** React16.4 快速上手

**课程章节：第4章在react项目中添加样式

课程讲师： Dell

课程内容：
1、直接添加style样式

import React from 'react'

class TodoList extends React.Component {
	
	render(){
		return (
			<div>
				<div>
					<input  />
					<button style={{background:red,color:green}}>add </button>
				</div>
				<ul>
					<li>学习react</li>
					<li>学习vue</li>
				</ul>
			</div>
		)
	}
}

2、通过className实现添加样式

import React,{Fragment} from 'react'

class TodoList extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			list:[
				'learn react',
				'learn english'
			],
		}
	}
	handleBthClick(){
		this.setState({
			list:[...this.state.list,this.state.inputValue],
		})
	}

	render(){
		return (
			<Fragment>
				<div>
					<input />
					<button onClick={this.handleBthClick.bind(this)} className="btn">add </button>
				</div>
				<ul>
					{
·						this.state.list.map((item,index) => {
							return <li key={index} >{item}</li>
						})
					}
					
				</ul>
			</Fragment>
		)
	}
}

3、通过Fragment实现去掉最外层的标签

import React ，{Fragment}from 'react'

class TodoList extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			list:[
				'learn react',
				'learn english'
			],
			inputValue:''
		}
	}
	handleBthClick(){
		this.setState({
			list:[...this.state.list,this.state.inputValue],
			inputValue:''
		})
		this.state.list.push('hello world')
	}
	handleInputChange(e){]
		this.setState({
			inputValue:e.target.value
		})
	}
	render(){
		return (
			<div>
				<Fragment>
					<input onClick={this.handleInputChange.bind(this)} />
					<button onClick={this.handleBthClick.bind(this)}>add </button>
				</div>
				<ul>
					{
·						this.state.list.map((item,index) => {
							return <li key={index} onClick={this.handleItemClick.bind(this)}>{item}</li>
						})
					}
					
				</ul>
			</Fragment>
		)
	}
}

4、如何学习react读官网文档等
课程收获：
这个章节学习到了添加样式的两种方法首先直接添加是通过style={{}}进行添加的，再一种方法是通过className进行添加的，这就类似原生的class的添加，包括了如何引入外部的CSS文件，还学习到了通过Fragment去掉最外层的元素，这个很实用，最后是学习方法，通过阅读react官网文档巩固学习react