react 学习笔记第一次课
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react 第一次课</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div ></div>
<script type="text/babel">
/*JSX 用于将模板转为 HTML 语言，并插入指定的 DOM 节点*/
var flag=true;
var div1={
fontSize:'20px',
color:'#f60'
};
ReactDOM.render(
<ul className="lists-ul">
<li 111':'123'}</li>
<li>2222</li>
<li>3333</li>
</ul>,
document.getElementById('example')
);
/*var child1 = React.createElement('li',null,'1111');
var child2 = React.createElement('li',null,'2222');
var child3 = React.createElement('li',null,'3333');
var str = React.createElement('ul',{className:'lists-ul'},child1,child2,child3);
ReactDOM.render(
str,
document.getElementById('example')
//没有jsx的情况下使用的方法
);*/
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>react 第一次02</title>
<meta charset="UTF-8" />
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div ></div>
<script type="text/babel">
/*JSX 用于将模板转为 HTML 语言，并插入指定的 DOM 节点*/
var arr=['aaa1','bbb1','ccc1'];
/*ReactDOM.render(
<div>
{
arr.map(function(item,index){
return <div key={index}>hello,{item}</div>
})
}
</div>,
document.getElementById('example')
);*/
var names =[];
for(var i=0;i<arr.length;i++){
names.push(<div key={i}>hello,{arr[i]}</div>);
};
ReactDOM.render(
<div>
{names}
</div>,
document.getElementById('example')
);
/*
var names =[<div key="1">111</div>,
<div key="2">222</div>,
<div key="3">333</div>];
ReactDOM.render(
<div>
{names}
</div>,
document.getElementById('example')
);*/
</script>
</body>
</html>
00::55:00
开始
react 第一次
view 负责UI组件
MVVM
双向绑定要自己来写
路由/单页面应用/
公司：Facebook
---------------------------------------
JSX
1.npm init
2.npm install react react-dom babel-standalone -S
react/react-dom/babel-standalone
react 核心库
react-dom 操作虚拟dom
babel-standalone(jsx 转js)
---------------------------------
<div ></div>
var flag=true;
var div1={
fontSize:'20px',
color:'#f60'
};
ReactDOM.render(
<ul className="lists-ul">
<li 111':'123'}</li>
<li>2222</li>
<li>3333</li>
</ul>,
document.getElementById('example')
);
模板内容里面只能有一个更目录！！！
<> 当做html解析
{} 当做js解析
知识点：jsx,react 绑定样式，react 加判断。
-----------------------------------------
遍历
//map 方法
var arr=['aaa1','bbb1','ccc1'];//三段都在用
ReactDOM.render(
<div>
{
arr.map(function(item,index){
return <div key={index}>hello,{item}</div>
})
}
</div>,
document.getElementById('example')
);
---------------------
//for 方法
var arr=['aaa1','bbb1','ccc1'];//三段都在用
var names =[];
for(var i=0;i<arr.length;i++){
names.push(<div key={i}>hello,{arr[i]}</div>);
};
ReactDOM.render(
<div>
{names}
</div>,
document.getElementById('example')
);
------------------------
//直接写代码方法
var arr=['aaa1','bbb1','ccc1'];//三段都在用
var names =[<div key="1">111</div>,
<div key="2">222</div>,
<div key="3">333</div>];
ReactDOM.render(
<div>
{names}
</div>,
document.getElementById('example')
);
----------------------------------------------------------------