React
React 是什么?
React是一个简单的javascript UI库,用于构建高效、快速的用户界面。它是一个轻量级库,因此很受欢迎。它遵循组件设计模式、声明式 编程范式 和 函数式编程 概念,以使前端应用程序更高效。它使用虚拟DOM来有效地操作DOM。它遵循从高阶组件到低阶组件的单向数据流。
命令式编程 和 声明式编程
声明式编程: 是一种编程范式,它关注的是你要做什么,而不是如何做。它表达逻辑而不显式地定义步骤。这意味着我们需要根据逻辑的计算来声明要显示的组件。它没有描述控制流步骤。声明式编程的例子有HTML、SQL等
声明式编程: 函数式编程是声明式编程的一部分。javascript中的函数是第一类公民,这意味着函数是数据,你可以像保存变量一样在应用程序中保存、检索和传递这些函数。
简单来说就是:
告诉计算机怎么做(How) - 过程
告诉计算机我们要什么(What) - 结果
React的基本使用
1.初始React
代码:
<body>
<div id="root"></div>
<script>
ReactDOM.render(
'今天天气有点阴',
document.querySelector('#root'),
()=>{
console.log('成功渲染在页面上')
}
)
</script>
</body>
效果:
2.利用React创建试图
代码:
<body>
<div id="root"></div>
<script>
let h1 = React.createElement('h1',null,'我是一个react标题')
let p = React.createElement('p',null,'我是一个react段落标签')
let el = React.createElement(
"header",
{id:"header"},
h1,p
)
ReactDOM.render(
el,
document.querySelector('#root'),
()=>{
console.log('成功渲染在页面上')
}
)
</script>
效果:
3.React的JSX
代码:
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<header>
<h1>hello react</h1>
<p>利用JSX来渲染数据</p>
</header>,
document.querySelector('#root'),
()=>{
console.log('成功渲染在页面上')
}
)
</script>
</body>
效果:
4.差值表达式
代码:
<body>
<div id="root"></div>
<script type="text/babel">
let data = {
name:'大大大',
age:18
}
let str = "今天天气不怎么样"
ReactDOM.render(
<header>
<h1>{data.name}</h1>
<h1>{data.age}</h1>
<h1>hello react {str}</h1>
<p>利用JSX来渲染数据</p>
</header>,
document.querySelector('#root'),
()=>{
console.log('成功渲染在页面上')
}
)
</script>
</body>
效果:
5.条件输出
代码:
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<header>
<h1>{false ? '成立' : '不成立'}</h1>
<h1>{true || '正确'}</h1> {}
<h1>{true && '错误'}</h1> {}
</header>,
document.querySelector('#root'),
()=>{
console.log('成功渲染在页面上')
}
)
</script>
</body>
效果:
6.列表循环
代码:
<body>
<div id="root"></div>
<script type="text/babel">
let data = [
"内容1",
"内容2",
"内容3"
]
ReactDOM.render(
<ul>
{}
{}
{
data.map(item=>{
return <li>{item}</li>
})
}
</ul>,
document.querySelector('#root'),
()=>{
console.log('成功渲染在页面上')
}
)
</script>
</body>
效果:
7.JSX注意事项
代码:
<body>
<div id="root"></div>
<script type="text/babel">
let style = {
width:'600px',
height:'200px',
backgroundColor:'red'
}
let {Fragment} = React;
ReactDOM.render(
<Fragment>
<div className="box" style={style}></div>
</Fragment>,
document.querySelector('#root'),
()=>{
console.log('成功渲染在页面上')
}
)
</script>
<style>
.box{
width:200px;
height:200px;
background-color:aqua;
}
</style>
</body>
效果:
基于自动化的集成环境模式 - create-react-app - 脚手架
介绍
通过前面 script 的方式虽然也能完成 React.js 的开发,但是有一个现在前端很重要的特性 - 模块化,无法使用。
Create React App 是一个使用 Node.js 编写的命令行工具,通过它可以帮助我们快速生成 React.js 项目,并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包,也就是通过它,我们可以使用 模块化 以及 ES6+ 等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用,其实还有更多。
这些都通过 Create React App 帮助我们安装并配置好了,开箱即用
安装与使用
通过 npm、yarn、npx 都可以
npm i -g create-react-app
yarn global add create-react-app
安装完成以后,即可使用 create-react-app 命令
create-react-app <项目名称>
或者通过 npx 的方式
npx create-react-app <项目名称>
项目目录结构说明
运行命令以后,就会在运行命令所在目录下面创建一个以项目名称为名的目录
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
关于其他的一些命令(如: 启动, 打包命令)请进入 package.json 文件进行查看
React组件案例实例
创建一个新的 FriendList.js 文件
import React,{Component} from 'react';
import './FriendList.css'
class FriendList extends Component {
render(){
return (
<div className="friend-list">
<div className="friend-group">
<dt>家人</dt>
<dd>爸爸</dd>
<dd>妈妈</dd>
</div>
<div className="friend-group">
<dt>朋友</dt>
<dd>张三</dd>
<dd>李四</dd>
<dd>王五</dd>
</div>
<div className="friend-group">
<dt>客户</dt>
<dd>阿里</dd>
<dd>腾讯</dd>
<dd>头条</dd>
</div>
</div>
)
}
}
export default FriendList
创建一个新的 FriendList.css 文件
.friend-list {
border: 1px solid #000000;
width: 200px;
}
.friend-group dt {
padding: 10px;
background-color: rgb(64, 158, 255);
font-weight: bold;
}
.friend-group dd {
padding: 10px;
}
.friend-group.expanded dd {
display: block;
}
.friend-group dd.checked {
background: green;
}
最后在 App.js 文件中类显示到页面上
import React,{Component} from 'react';
import FriendList from './FriendList'
class App extends Component {
render() {
return (<div>
<FriendList />
</div>)
}
}
export default App;
效果:
组件复用 - 数据抽取(优化案例)
为了提高组件的复用性,通常会把组件中的一些可变数据提取出来
创建一个新的 data.js 文件,把抽离的数据放入其中
let datas = {
family: {
title: '家人',
list: [
{name: '爸爸'},
{name: '妈妈'},
{name: '儿子'}
]
},
friend: {
title: '朋友',
list: [
{name: '张三'},
{name: '李四'},
{name: '王五'},
{name: '赵六'}
]
},
customer: {
title: '客户',
list: [
{name: '阿里'},
{name: '腾讯'},
{name: '头条'}
]
}
};
export default datas
在 FriendList.css 文件中创建循环,先循环输出外面一层, 然后把数据发给 dl.js
import React,{Component} from 'react';
import './FriendList.css'
import Dl from './dl'
import data from './data'
class FriendList extends Component {
render(){
return (
<div className="friend-list">
{
Object.keys(data).map((item,index) => {
return (
<Dl
key = {index}
name = {item}
value = {data[item]}
/>
)
})
}
</div>
)
}
}
export default FriendList
最后在dl.js 文件中接收遍历数据,然后渲染出来
import React,{Component} from 'react';
class Dl extends Component {
render(){
let {title,list} = this.props.value;
return (
<div className="friend-group">
<dt>{title}</dt>
{
list.map((item,index) =>{
return <dd key={index}> {item.name} </dd>
})
}
</div>
)
}
}
export default Dl
效果:
React的事件
代码:
class App extends Component {
state = {
num:20,
name:'叮当猫',
sex:'蓝胖子'
}
render() {
let {num} = this.state;
return (
<div>
{}
<p>{this.state.num}</p>
<p>{this.state.sex}</p>
<p>{this.state.name}</p>
<button onClick={()=>{
this.setState({
num:num+1,
sex:'可爱的蓝胖子'
})
}}>
长一岁
</button>
</div>
)
}
}
效果:
React的案例(使用事件(优化案例)
只需要改动 dl.js 文件中的代码就可以了
import React,{Component} from 'react';
class Dl extends Component {
state = {
isOpen:false
}
render(){
let {title,list} = this.props.value;
let {isOpen} = this.state;
return (
<div className={"friend-group " + (isOpen ? "expanded" : "")}> {}
<dt
onClick={()=>{
this.setState({isOpen:!isOpen})
}}
>{title}</dt>
{
list.map((item,index) =>{
return <dd key={index}> {item.name} </dd>
})
}
</div>
)
}
}
export default Dl
效果:
注意
1.注意:JSX是基于 javascript 和 XML 的扩展语法
2.注意:要在 script 标签上写 type=“babel” 来解析XML语言
总结
本篇文章主要介绍了 React 的基本语法和安装, 还用脚手架写了一个小案例, 如有任何疑问请移步官网
|