React 如何快速上手

最新推荐文章于 2024-06-18 11:41:09 发布

昼月眠

最新推荐文章于 2024-06-18 11:41:09 发布

阅读量3.9k

点赞数 3

文章标签： reactjs 前端框架 html5

本文链接：https://blog.csdn.net/xiuxiuxiu555/article/details/123965605

版权

本文介绍了React的基本使用，包括如何通过create-react-app创建项目，展示HTML渲染、模板语法、条件渲染和HTML内联样式。还详细讲解了React的事件处理，如按钮点击事件，并展示了如何利用state进行响应式数据更新。通过实例代码，帮助读者快速掌握React开发基础。

摘要由CSDN通过智能技术生成

React 是一个用于构建用户界面的 JavaScript 库它是Facebook公司的出品

它的特点是组件思维单向数据流虚拟Dom节点

1.创建项目

1.打开cmd输入以下指令下载react脚手架

npm install create-react-app -g

2.创建项目输入

create-react-app react-demo

3.进入项目

cd react-demo

4.运行项目

npm start

2.React的使用

1.在App.js里面使用html的样式

import './App.css'

const arr = [

<p key="a">你好中国</p>,

<p key="b">你好世界</p>,

<p key="c">你好react</p>

]

const stl = {

fontSize:"24px",

color:"#f70"

}

function App(){

return (<div>

<h1 className="myh">你好react</h1>

{arr}

{<p style={stl}>应用样式</p>}

</div>)

}

export default App;

效果图

2.html的渲染

const str = "你好react"

const msg = "还是<strong>html</strong>简单"

const score = 80;

let flag = true;

const list = ["react","vue","javascript","css","jquery"]

function App(){

return (

<div>

<h1>模板语法</h1>

{list.map((item,index)=><p key={index}>{item}</p>)}

<p>03条件渲染()三目运算符,&&</p>

<p>{score>=60?'及格':'在学一遍'}</p>

{flag&&<p>芝麻开门</p>}

<p>{str}</p>

<p>{3+2}</p>

<p>{str.split('').reverse().join('')}</p>

<p>02 html渲染</p>

<p dangerouslySetInnerHTML={{__html:msg}}></p>

</div>

)

}

export default App;

效果图

3.react的点击事件

function App(){

function say(str){

alert("我喜欢夏天的雨"+str)

}

return (

<div>

<h1>事件</h1>

<p>react 事件与js事件一致,需要驼峰写法</p>

{/* <button onClick={()=>{alert("我喜欢春天")}}>按钮</button> */}

<button onClick={say.bind(this,"甜的")}>按钮1</button>

<button onClick={say.bind(this,"冷的")}>按钮2</button>

<button onClick={()=>say('苦的')}>按钮3</button>

</div>

)

}

export default App;

效果图

按钮1

按钮2

按钮3

4.react 响应式数据 state

// react 响应式数据 state

import React,{Component} from "react";

// 导入React 和Component方法 imrc + TAB

class App extends Component{

// 创建一个App类基础了Component ccc+Tab

constructor(props){

// 构造函数

// 执行父类方法

super(props)

// 响应式方法

this.state = {num:1}

}

addNum(n){

this.setState({num:this.state.num+n})

}

render(){

// 渲染方法

return (

// 返回一个节点

<div>

<h1>函数类</h1>

<button onClick={()=>{

// 更新num值为原来的值+1

this.setState({num:this.state.num+1})

}}>

{this.state.num}

</button>

<button onClick={this.addNum.bind(this,2)}>{this.state.num}</button>

</div>)

}

}

export default App;