一,react是什么?
react是一款前端编程框架,是一个用于构建用户界面的 javascript 库,最初起源于 Facebook 的内部项目,开源以后因其便捷的操作迅速成为了前端工程师最得力的工具,React 拥有较高的性能,代码逻辑非常简单,目前在全世界范围内仍是最受欢迎的前端框架。
二,react安装
首先,确保电脑上具备nodejs环境,之后用 win+r 呼出控制台,输入 cmd 命令弹出cmd控制台(小黑框)之后在默认路径输入如下代码
npm i -g create-react-app //全局安装react环境无需选择特定文件夹
安装成功后用cd / 命令跳转到要创建目录的文件夹之下输入如下代码创建一个react项目,我这里安装在了C盘中
cd / //cd+/跳转到电脑c盘
C:\>create-react-app mreact //create-react-app + 文件名 该文件名是react根文件名
创建过程可能会有一点漫长,请耐心等待。
三,配置和基础应用
创建完成后cmd控制台会给出如下信息:
然后我们在后面输入 cd /mreact 跳转到我们创建的react目录之下。输入如下代码
C:\>cd mreact //转到mreact文件目录下
C:\mreact>npm start //运行项目
等待控制台处理,处理完之后会自动打开浏览器,为你展现一个react项目。就像图片中一样。
此时可以先把cmd控制台最小化到托盘,但是千万不要关闭,后面还会用到。
好了,我们已经有了一个react脚手架基础了,之后用vs code 找到并打开该文件夹,我们将看到该文件夹下已经有了如下的文件
为了编程的愉快,这里推荐在vs code装载如下的插件
然后我们点开src目录把里面的App.js和App.css里面的内容全选然后删除,再回到浏览器我们就得到了一个空白页面,这样就能构建我们自己的网页了,对了vs code还要做如下设置,适配react的工作环境
做完如上的工作我们已经完成了最基本的环境。
函数组件(无状态组件/视图组件)
要学会并运用函数组件, 首先我们要先知道jsx是什么,jsx是JavaScript混合xml(html)的语法格式,目的是为了更好的在JavaScript中编写html模板。
jsx的主要特点有以下几点:
1. 有且只有一个根节点
2. class写成classname
3. 在{ }内写JavaScript
4. 数组里面可以直接写html标签
5. 注释用(/**/)
6. 样式可以直接展开
j首先在页面之中导入css样式
import './App.css'; //导入App.css的css文件
App.css内部代码如下
.active{
color: #f70;
}
之后在后面构建一个函数(因为是把js和html结合所以要用函数的方式来表述)最后不要忘了导出该函数
import './App.css';
function App() {
return() //括号内部写主要的页面构造诸如p标签div标签等
}
export default App; //导出该函数
之后定义一个数组这里命名为arr,arr数组内可以写页面元素,并且可以直接通过return输出在页面之上
import './App.css';
function App() {
var arr = [
<h3>ajax</h3>,
<h2>react</h2>,
<p>vue</p>
],
return(
{arr} //此时页面会显示ajax,react,vue三个元素
) //括号内部写主要的页面构造诸如p标签div标签等
}
export default App; //导出该函数
同时我们也可以再定义一个名为syles的对象并在里面写上对应的样式
import './App.css';
function App() {
var arr = [
<h3>ajax</h3>, //元素之间用逗号隔开
<h2>react</h2>,
<p>vue</p>
]
var styles = {
fontSize: "60px", //style样式按照css来写多个字母排列要使用驼峰布局如:backGroundColor
color: "#f70"
}
return (
<div>你好 react
<p className='active'>爱你呦</p> //jsx要求用className绑定类名,
//这里的active是在App.css内定义的
<p>{2 + 3}</p>
{arr}
<p style={styles}>文本</p>//该行文字在页面中会以60px大小和#f70的颜色在页面中显示
</div>
)
}
export default App;
类组件(有状态组件/容器组件)
接下来我们来了解一下react里的类组件,清空刚才我们所写的函数组件的内容,写下类组件的基本配置
import React,{Component} from ‘react’ //导入react设置
export default class App extends Compnent{//导出到页面
render(){
return(
<div>
页面主要内容
</div>) //return内部写页面布局 *注意只能有一个div作为根组件
}
}
上面就是我们的主要结构,接下来我们就要写数据进行数据和页面的联携了
import React,{Component} from ‘react’ //导入react设置
export default class App extends Compnent{//导出到页面
constructor(props) {
super(props)
this.state = {
} //state内部写数据
}
render(){
return(
<div>
页面主要内容
</div>) //return内部写页面布局 *注意只能有一个div作为根组件
}
}
之后在return内写组件绑定数据就好了
import React, { Component } from "react";
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
msg: "<b>喜</b>欢", //state中的msg数据
isLog: false, //state中的isLog数据
list: ['vue', 'react', 'jQuery', 'js'] //state中的list数组
}
}
//sayHello(msg="123"){ //函数的第一种写法
// alert(msg)
// }
sayHello = (msg = "默认值") => { //函数的第二种写法
alert(msg)
}
render() {
return (
< div >
{/*更新数据 setState*/}
<button onClick={() => {
this.setState({ isLog: !this.state.isLog }, () => {
console.log('完成');
})
}}>切换</button> <br />
{/*事件*/}
<button onClick={this.sayHello.bind(this, '中国人不骗中国人')}>你好-传参2</button>
<button onClick={() => { this.sayHello('参数1') }}>你好-传参</button>
<button onClick={this.sayHello}>你好-1</button>
<button onClick={() => alert('2020')}>你好</button>
{/*列表渲染*/}
{this.state.list.map(item => <p key={item}>{item} </p>)}
{/*文本渲染*/}
{this.state.msg}
<div dangerouslySetInnerHTML={
{ __html: this.state.msg }}></div>
{/*条件渲染*/}
{this.state.isLog ? <p>欢迎</p> : <p>请登录</p>}
{this.state.isLog && <p>wink</p>}
</div >
)
}
}
这些就是react最基本的操作和页面构架啦。