React学习之路(1)

最新推荐文章于 2024-01-05 14:10:33 发布

sinat_27654397

最新推荐文章于 2024-01-05 14:10:33 发布

阅读量91

点赞数

分类专栏： IT 文章标签： react

本文链接：https://blog.csdn.net/sinat_27654397/article/details/101362813

版权

IT 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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')} >

sinat_27654397

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习之路(1)

Create React App是学习React的舒适环境，是开始在React中构建新的单页应用程序的最佳方法。它可以设置您的开发环境，以便您可以使用最新的JavaScript功能，提供良好的开发人员体验并优化应用程序以进行生产。您的计算机上必须具有Node> = 8.10和npm> = 5.6。安装 node+npm 查看
复制链接

扫一扫