始学习React啦---React入门实例
React学习（第一个实例）
Vue学的差不多了，谈不上精通，但是单人搭建、开发、组件、路由、vuex什么的都基本没问题了，所以不能闲着，打算边写项目温习Vue，边学习下Reac。
因为是刚开始学习熟悉下写法，所以并没有上来就开始搭建脚手架什么的。需要注意下面三个地方。
引入文件 一共有三个 分别是 babel , react-dom , react.development ，点击即可下载，下载后引入页面即可
在写script标签时 要注意 <script type="text/babel"> 注意type的类型了
个人感觉在写的时候很少用双引号或者单引号了，{}大括号用的比较多了
创建dom的几种写法代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<style>
.imgInfo{
width: 300px;
}
</style>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="root"></div>
<div id="root2"></div>
<div id="root3"></div>
<div id="root4"></div>
<div id="root5"></div>
<div id="root6"></div>
<div id="root7"></div>
</body>
<script type="text/babel">
//1
var str=(<h3>Hello, world! 写法1</h3>);
ReactDOM.render(
str,
document.getElementById('example')
);
//2 创建对象函数
const user={
name:"夏天到了，写法2"
};
function formatName(user){
return user.name
};
const element=(<h1 className="baiyafei">{formatName(user)}</h1>);
ReactDOM.render(
element,
document.getElementById('root')
);
//3 创建图片
var imageUrl="http://attach.bbs.miui.com/forum/201208/29/232300kednk6zwdwl8nq6i.jpg";
const imgInfo=(<img src={imageUrl} className="imgInfo"/>);
ReactDOM.render(
imgInfo,
document.getElementById('root2')
);
//4 创建嵌套
var a1=(
<div>
<h3>11111 写法4</h3>
<h3>22222</h3>
</div>
);
ReactDOM.render(
a1,
document.getElementById("root3")
)
//5 元素更新
function time(){
var date=new Date().toLocaleTimeString();
var d = (<div>{date}，写法5</div>);
ReactDOM.render(d,document.getElementById("root4"));
};
setInterval(time,1000);
//6 函数定义组件 传参了
function Welcome(props){ //写法1
return <h1>函数组件,{props.name}，写法6</h1>;
}
// class Welcome extends React.Component{ //写法2
// render(){
// return <h1>函数组件,{this.props.name}</h1>;
// }
// }
const element2 = (<Welcome name="sara"/>);
ReactDOM.render( //或者<Welcome/>
element2,
document.getElementById('root5')
);
//7 组合组件
function Bai(opt){
return <h3>{opt.name}，写法7</h3>;
}
function Qs(){
return(
<div>
<Bai name="小明1"/>
<Bai name="小明2"/>
<Bai name="小明3"/>
</div>
);
}
ReactDOM.render(
<Qs />,
document.getElementById("root6")
)
//使用类创建组件
class Baiyafei extends React.Component{
render(){
return <h1>我是类组件，写法8</h1>
}
}
ReactDOM.render(
<Baiyafei />,
document.getElementById("root7")
)
</script>
</html>
下载地址:
npx 使用方法
React学习（五）——向服务器请求数据并显示 |
