react创建项目

1. 环境需求

创建react项目需要安装node.js,安装方法百度自查，网上有很多，检查是否安装成功的方法如下

node -v //打开cmd输入node -v

安装完成后，打开cmd输入 node -v 如果出现版本号就说明已经安装成功了

2. 创建项目

1.下载react脚手架（打开cmd输入以下命令）

npm install create-react-app -g

2.创建项目

create-react-app react-demo //react-demo为项目名 自己定义

3.进入项目

cd react-demo

4.启动项目

npm start

3. 创建react组件

1.找到src目录 创建一个clickMe组件

2.打开clickMe.js文件 引入react 并创建组件

import React,{Component} from 'react'; //引入react 首字母必须大写
import './clickMe.css' //引入css样式

class ClickMe extends Component { //创建一个 ClickMe的类，继承与Component 【注】组件名首字母必须大写
	render() { //react里的一个生命周期，用于渲染dom
		return ( //return 里写的是jsx代码，和html基本一致
			<div className='click-box'> //jsx里的class要写成className
				clickMe
			</div>
		)
	}
	
}

export default ClickMe; //导出ClickMe组件

3.绑定事件

class ClickMe extends Component {
	clickMe() { //事件函数
		alert('被点击了')
	}
	
	render() {
		return ( 
			<div className='click-box' onClick={this.clickMe}>  //绑定事件 【注】react里的模板渲染是使用{},{}里可以放大多数js代码
				clickMe
			</div>
		)
	}
	
}

4.引入组件

import React,{Component} from 'react';
import ClickMe from './clickMe/clickMe' //在需要的页面引入该组件

class App extends Component {
	render() {
		return(
			<div>
				<ClickMe/> //渲染该组件
			</div>
		)
	}
}

export default App;