React去负责UI渲染,并在数据变化时更新。
const jsx = <div className="app">
<h1>Hello React {count}</h1>
</div>
组件表示页面中的部分内容
两者本质区别在于控制权:你可以控制库,而框架会控制你。
angular、React、vue就属于框架 而jQuery、bootstrap就是库
首先新建一个文件夹,然后 打开命令窗口cmd 。
初始化命令
npm init
起一下package name的名字 ,其他的可以直接回车 不填写。
确认 yes
然后在问价夹下可以发现生成了package.json文件
package.json文件的内容
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
新建一个txt文档 然后将其改为 index.html
用vscode打开文件夹(只是我用了这个编辑器,其他皆可)。终端执行安装命令:
npm i react react-dom
安装完成后我们在package.json中可以找到两个包的依赖配置
<html>
<head>
</head>
<body>
<div id="root"></div>
<!-- 1 引入js文件 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 2 创建react元素 -->
<script>
// param1 元素名称
// param2 元素属性
// param3 第三个及以后的参数 元素的子节点
const title = React.createElement('h1',null,"hello React")
// 3. 渲染react元素
// param1 要渲染的react元素
// param2 挂载点
ReactDOM.render(title,document.getElementById('root'))
</script>
</body>
</html>
方法说明:
const title = React.createElement('p',{title:'p标签'},'hello React')
元素中再创建元素
const title = React.createElement('p',{title:'p标签'},'hello React',
React.createElement('span',null,'span子节点')
)
ReactDOM.render(title,document.getElementById('root'))