下载安装node js
下载 | Node.jsnodejs.org![e7a749d1e54bc8f168ed8b03a1423fe6.png](https://img-blog.csdnimg.cn/img_convert/e7a749d1e54bc8f168ed8b03a1423fe6.png)
安装 create-react-app
npm install -g create-react-app
![803f589798292acc3a8a43d530ddfcde.png](https://img-blog.csdnimg.cn/img_convert/803f589798292acc3a8a43d530ddfcde.png)
创建第一个react app
create-react-app react-is-fun
cd react-is-fun
npm start
![16c0b9fc23faa0cbd4dde0e16b311fcc.png](https://img-blog.csdnimg.cn/img_convert/16c0b9fc23faa0cbd4dde0e16b311fcc.png)
![a5038231ac0845582c266133c9ce81ff.png](https://img-blog.csdnimg.cn/img_convert/a5038231ac0845582c266133c9ce81ff.png)
渲染第一个元素
编辑 <path>/react-is-fun/src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
const title = React.createElement(
'h1',
{id: 'title', className: 'header'},
'Hello World'
)
ReactDOM.render(
title,
document.getElementById('root') // 可在 react-is-fun/public/index.html 中找到 id=root 的元素
)
刷新页面
![547cda4a84c35c5a091ec9a5b59d89ab.png](https://img-blog.csdnimg.cn/img_convert/547cda4a84c35c5a091ec9a5b59d89ab.png)
加一点样式
import React from 'react'
import ReactDOM from 'react-dom'
var style = {
backgroundColor: 'orange',
color: 'white',
fontFamily: 'Arial'
}
const title = React.createElement(
'h1',
{id: 'title', className: 'header', style: style},
'Hello World'
)
ReactDOM.render(
title,
document.getElementById('root')
)
![8091e72b120aec6e15a59558c543006f.png](https://img-blog.csdnimg.cn/img_convert/8091e72b120aec6e15a59558c543006f.png)
还可以用 JSX (javascript as XML)实现同样的效果
import React from 'react'
import ReactDOM from 'react-dom'
var style = {
backgroundColor: 'orange',
color: 'white',
fontFamily: 'Arial'
}
// const title = React.createElement(
// 'ul',
// {id: 'title', className: 'header', style: style},
// React.createElement(
// 'li',
// {},
// 'item on our list'
// )
// )
ReactDOM.render(
<div style={style}>
<h1>Hellow World</h1>
</div>,
document.getElementById('root')
)