React(一)
React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。
使用React需要计算机上必须具有Node> = 8.10和npm> = 5.6
安装 node+npm 查看
https://blog.csdn.net/sinat_27654397/article/details/101351739
要创建一个项目,运行:npx create-react-app my-react-app
当您准备部署到生产环境时,运行npm run build
1:react学习
const
定义变量 before: var;React: const
eg > const div = document.createElement('div');
let
let声明的变量只在它所在的代码块有效。
render
渲染 ReactDOM.render(<App />,div);
ReactDOM.render(…) 是渲染方法,两个参数,内容和渲染目标 js 对象。
unmountComponentAtNode
解除渲染ReactDOM.unmountComponentAtNode(div);
自定义组件
示例
<body>
<div id="example"></div>
<script type="text/babel">
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
const element = <HelloMessage />;
ReactDOM.render(
element,
document.getElementById('example')
);
</script>
</body>
JS OR ES6 定义组件
js
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
const element = <HelloMessage />
为用户自定义的组件。
es6
class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
const element = <Welcome />
为用户自定义的组件。
原生 HTML 元素名以小写字母开头
自定义的 React 类名以大写字母开头
例:HelloMessage 不能写成 helloMessage
除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。
this.props 对象
向组件传递参数
js
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}
const element = <HelloMessage name="Runoob"/>;
es6
class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}!</h1>;
}
}
const element = <Welcome name="Runoob"/>;
组件样式
组件名内不能使用 style 样式,
eg <HelloMessage style={{color:'red',textAlign:'center'}}/>
style是无效的
//js
function HelloMessage(props) {
return <h1 style={{color:'red',textAlign:'center'}}>Hello World!</h1>;
}
//es6
var myStyle = {color:'red',textAlign:'center'}
class HelloMessage extends React.Component {
render() {
return <h1 style={myStyle}>Hello World!</h1>;
}
}
箭头函数
箭头函数优点 减少输入代码,避免 this 造成的困扰
eg <button className="square" onClick={function(){alert('click')}} >
将onClick={function(){alert('click')}}
改为onClick={() => alert('click')}
eg <button className="square" onClick={()=>alert('click')} >