react|react框架入门 react|react.js

文章目录

一、React简介
二、特点
三、安装并创建 react 项目
- 1.安装命令
- 2.创建项目
- 3.启动项目
二、react 基础语法
- 1.hello world 案例
- 2.文本渲染、html渲染、条件渲染、列表渲染
- 3.添加事件
- 4.组件

一、React简介用于构建用户界面的 JavaScript 库，就是将数据渲染为HTML视图的js库。
二、特点

组件思维
单向数据流
虚拟DOM节点

三、安装并创建 react 项目 1.安装命令

npm i create-react-app -g

2.创建项目

create-react-app 项目名

3.启动项目

1.先切换到要运行的项目 2.执行 npm start 命令

【react|react框架入门】运行成功页面：

文章图片

二、react 基础语法 1.hello world 案例创建一个App组件，返回一个DOM节点

function App(){ //返回一个Dom节点 return ( 你好react ) }

2.文本渲染、html渲染、条件渲染、列表渲染

const str = '你好'; const msg = '你好呀'; const score = 80; const flag = true; const list =["vue","react","angular"]; // 创建组件 function App(){ return ( 模板语法文本渲染 //文本渲染 {str} {9*9} {str.split('').reverse().join('')} html 渲染 // html渲染条件渲染 // 条件渲染 {score>=60?"及格":"再来一次"} {flag&&芝麻开门 } 列表渲染 //列表渲染 {list.map((item,index)=>{index}--->{item} )} ) } export default App;

3.添加事件

import './App.css' // 创建组件 function App(){ function say(str){ alert("夏天的风"+str) } return ( 事件事件与 js 事件一致，需要驼峰写法 )}export default App;

4.组件

// 导入方法快捷键(imrc + tab) import React,{Component} from 'react' // 创建App类快捷键(ccc+tab) class App extends Component{ // 构造函数 constructor(props){ super(props); this.state = {num:1} } // 更新方法 addNum(n){ this.setState({num:this.state.num+n}) } // 渲染方法 render(){ // 返回节点 return ( 函数 ); } } export default App;