1:hello_react
<div id="text"></div>
<script type="text/babel">
const Vdom = <h1>Hello React</h1>
ReactDOM.render(Vdom, document.getElementById('text'))
</script>
2:jsx的语法规则
* 1.定义虚拟dom时,不要使用引号
* 2.标签中混入JS表达式要用{}
* 3.样式的类名指定不要用class,要用className
* 4.内敛样式,要用style={{key:value}}
* 5.必须只有一个根标签
* 6.标签必须闭合
* 7.标签首字母
* (1).若小写字母开头,则将改标签转为html中同名元素,若html中无该标签对应的同名元素,则报错
* (2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错
3:遍历数组渲染到界面
const arr = ["vue", "react", "angular"];
const myText = (
<div>
<h1>{title}</h1>
<ul>
{
arr.map((item, index) =>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
);
ReactDOM.render(myText, document.getElementById("text"));
4:react中定义组件
- 类式组件
class HelloMesage extends React.Component {
render(){
console.log(this);
return <h1>123</h1>
}
}
ReactDOM.render(<HelloMesage />, document.getElementById('text'))
- 函数式组件
function Demo() {
return <h1>This is a demo</h1>;
}
ReactDOM.render(<Demo />, document.querySelector("#text"));
5:组件实例三大属性
- state
class Weater extends React.Component {
state = { isHot: false, text: "这是一个测试文字" };
render() {
const text = this.state.isHot ? "炎热" : "下雨";
return <h1 onClick={this.demo}>今天天气怎么样:{text}</h1>;
}
demo = () => {
console.log(this, "123");
this.setState({ isHot: !this.state.isHot });
};
}
ReactDOM.render(<Weater />, document.getElementById("text"));
- props
class Person extends React.Component {
render() {
const { name } = this.props;
return (
<ul>
<li>姓名:{name}</li>
</ul>
);
}
}
ReactDOM.render(<Person name="李四" />, document.getElementById("text"));
ReactDOM.render(<Person name={1} />, document.getElementById("text2"));
function Person(props) {
return (
<ul>
<li>姓名:{props.name}</li>
</ul>
);
}
ReactDOM.render(<Person name="李四" />, document.getElementById("text"));
ReactDOM.render(<Person />, document.getElementById("text2"));
class Person extends React.Component {
constructor(props) {
super(props);
}
render() {
const { name } = this.props;
return (
<ul>
<li>姓名:{name}</li>
</ul>
);
}
}
ReactDOM.render(<Person name="李四" />, document.getElementById("text"));
ReactDOM.render(<Person name="123" />, document.getElementById("text2"));
- ref
class Demo extends React.Component {
render() {
return (
<div>
<input ref="input1" type="text" placeholder="点击触发" />
<button onClick={this.submit}>点击</button>
</div>
);
}
submit = () => {
const val = this.refs.input1.value;
alert(val);
};
}
ReactDOM.render(<Demo />, document.getElementById("text"));
class Demo extends React.Component {
render() {
return (
<div>
<input ref={this.saveInput}
type="text"
placeholder="点击触发"
/>
<button onClick={this.submit}>点击</button>
</div>
);
}
saveInput = (e) =>{
this.input1 = e
}
submit = () => {
const val = this.input1.value;
alert(val);
};
}
ReactDOM.render(<Demo />, document.getElementById("text"));
class Demo extends React.Component {
myRef = React.createRef()
render() {
return (
<div>
<input
ref={this.myRef}
type="text"
placeholder="点击触发"
/>
<button onClick={this.submit}>点击</button>
</div>
);
}
submit = () => {
console.log(this.myRef.current.value, 'myRef');
};
}
ReactDOM.render(<Demo />, document.getElementById("text"));
5.react中的事件处理
(1)。通过onXxx属性指定事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件,而不是使用的原生DOM事件 ----为了兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)----为了高效
(2)。通过event。target得到发生事件的DOM元素对象 ----不要过渡使用ref