1 react 入门

1 前期准备
安装node.js 安装编辑器(sublime text3)
2 创建工程(使用create-react-app脚手架创建工程)
脚手架使用方法参考 Facebook官方

npx create-react-app my-app
cd my-app
npm start  #启动程序
npm install bootstrap@3.3.7 --save  #安装bootstrap
npm isntall axios --save  #安装axios

3 创建多组件
在src下面创建一个components的文件夹,在component文件价下面创建Home.js,Header.js组件
这是一个简单组件,组件必须引入react,继承Component,用export default导出才能在父组件中使用
组件目录
4 动态数据
react组件中动态数据的使用,用{}表示

import React, { Component } from 'react';

export default class Header extends Component{
	render() {
	    return (
	      <h1>{2+2}</h1>
	    );
 	 }
}

5 数据传递
父组件往子组件中传递数据使用props函数

#父组件传参
<div className="App">
    <Header></Header>
    <Home name={'zhangsan'} age={12}></Home>
</div>
#子组件调用
import React, { Component } from 'react';
export default class Home extends Component{
	render() {
	    return (
	      <div>
		      <h1>Home</h1>
		      <div>{this.props.name}</div>
	      </div>	
	    );
 	 }
}

6 引用bootstrap,在组件中引用bootstra

import 'bootstrap/dist/css/bootstrap.css'

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值