学习链接：https://react.docschina.org/docs/getting-started.html
jsx:js和html混写的方式
render里return的代码，必须用一个根节点包起来，这个跟vue是一样的
image.png
jsx里：
不要用for，用htmlFor；不要用class，用className
image.png
父子组件传值：
跟vue类似，父组件定义一个属性，子组件用props接受
react表达式跟vue表达式类似，可以放简单的运算、三元表达式
注释格式：{/注释.../}，注意外面要套一层大括号
jsx设置点击事件：
方法1：
<div onClick={function(){console.log('我是div')}}>div1</div>
方法2：
function click_e(){
console.log('div1被点击了');
}
ReactDOM.render(
<div>
<div onClick={click_e}>div1</div>
</div>,
document.getElementById('app')
);
问：点击时如何获取event对象？
答：
function Action_link(e){
console.log('e', e);
e.preventDefault();
}
ReactDOM.render(
<div>
<a href="https://www.baidu.com" onClick={Action_link}>点我</a>
</div>,
document.getElementById('app')
);
不过，上面这种方式获得的event，跟原生js的event有点区别
问：如何实现父子组件？
答：
1.引入：
import 组件名称 from '组件地址';
2.使用：
<组件名称 />
问：如何遍历数组？
答：
import React,{Component} from 'react';
let list=[
{
name:"百度",
address:"http://www.baidu.com"
},
{
name:"google",
address:"http://www.google.cn"
}
];
class Home extends Component{
render(){
//定义一个数组，将数据存入数组
const elements=[];
list.forEach((item)=>{
elements.push(
<div>
{item.name}
<a>{item.address}</a>
</div>
)
});
return(
<div>
{elements}
</div>
)
}
}
export default Home;
问：如何跳转路由？
答：
路由跳转：
import React,{Component} from 'react';
class Home extends Component{
to_login(){
this.props.history.push('/login');
}
render(){
return(
<div onClick={this.to_login.bind(this)}>
我是div
</div>
)
}
}
export default Home;
image.png
image.png
页面里的onClick不能用函数名()【如果这样写，页面一进来就调用函数了】，这个跟vue的methods的@click不一样，跟html里的onclick也不一样
问：为什么使用虚拟DOM？
答：虚拟DOM就是js的对象，使用虚拟DOM的原因是：修改js的对象比修改真实DOM的成本更低
问：如何在react项目里引入css？
答：
js文件：
import styles from './IndexPage.css';
function IndexPage() {
return (
<div className={styles.normal}>
如果清除缓存，页面仍然看到的是以前的效果，可以把项目重新运行一下
constructor里不要使用setState，如果使用了setState，会报错如下：
image.png
问：jsx里不能使用if语句，怎么办？
答：可以使用替代方案，比如使用三元表达式、函数等方式实现需求
问：如何理解下面这段话？
image.png
答：看我下面的代码，如果直接把input写的内容渲染到页面里的话，可能就会变成标签，这是有危险的
image.png
这是jsx的情况，<script>只是字符串，不会变成标签：
image.png
问：如何理解‘Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。’这句话？
image.png
网友评论