1.安装
1.win+R 输入cmd打开黑窗口
2.安装到全局
npm i -g create-react-app
3.创建 react项目
create-react-app 项目名
3.进入创建目录
cd 项目名
4.启动
npm start
5.在浏览器中打开 http://localhost:3000/ ,结果如下图所示:
即为成功
2.使用
1.用 vs code开发软件找到创建的项目并打开
vs code 需要安装以下插件
react
live server
eslint 等等
2.打开项目文件后,进入App.js
用函数组件的形式编译
import './App.css';//这里是导入css
function App(){
var arr=[
<h4>jquery Dom\Ajax</h4>,
<h4>react</h4>,
<p>vue</p>
]
var styles= {
fontSize:"48px",
color:"#f70"
}
return (
<div>
{/* 你好呼呼 */}
<p className='active'>你好react</p>
<p>{2+3}</p>
{arr}
<p style={styles}>幸运</p>
</div>
)
}
export default App;
这里是App.css的内容
.active{
color: rgb(130, 169, 201);
}
3.查看页面前,很关键的一步
4.打开浏览器,查看效果
5.类组件的编译形式
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
</div>
)
}
}
3.react的语法特点
react是JavaScript混合xml(html)语法格式
jxs语法特点:
①只有一个根节点;
②类名 className
③数组里面可以直接写html标签;
④{ } 写JavaScript
⑤对象样式自动展开
⑥采用{/*内容*/}注释
其他react使用方法见下篇。