React 安装

90 阅读 0 评论 60 点赞

我是靠谱客的博主纯情老虎，这篇文章主要介绍React 安装，现在分享给大家，希望可以做个参考。

文章目录

React环境准备
React 开发环境搭建：安装node.js，安装cnpm/npm、yarn cnpm install -g yarn 或者 npm install –g yarn
创建React 开发环境：安装脚手架cnpm install -g create-react-app 或者 npm install –g create-react-app 、创建项目 create-react-app reactdemo
文件配置
src开发文件 src>component
public静态资源目录
声明组件

React 创建组件

复制代码

1
2
3
4
5
6
7
8
9
10
11
import React, { Component } from 'react';
import './Home.css'
//组件的类声明  继承
class Home extends Component{
    render(){  //view
        return <div>我是组件</div>;  //只能有一个父div
    }
}
//组件暴露
export default Home;

React 组件挂载到app

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from 'react';
//组件的引入
import Home from './components/Home'
class App extends Component {
  render() {
    return (
      <div className="App">
        你好React
        <Home></Home>  //组件挂载
        <Cart/>
      </div>
    );
  }
}

export default App;

组件内部声明数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//组件的类声明
class Home extends Component{
    //声明类的构造函数
    constructor(){
        //类似于Java里面的继承
        super(props);
        //React 定义数据
        this.state={
            arr:[],
            classname:"username",
            btncolor:"red",
	        style:{
	              color:"red",
	              fontSize:"20px"
	            }
        }
    }
    render(){
        return (
            <div>
{/****数据的绑定 ****/} 	
				<p className={this.state.classname}>数据属性绑定</p>
				<div style={this.state.style}>绑定style属性</div>
                <ul> //数组循环绑定***key={key}
                   {this.state.arr.map(function (value,key){
                       return <li key={key}>{value}</li>
                   })}
                </ul>
          </div>
        );
    }
}
//组件暴露