react实现浏览器自动刷新_前端小白上手React - 1

下载安装node js

下载 | Node.js​nodejs.org

安装 create-react-app

npm install -g create-react-app

facebook/create-react-app​github.com

创建第一个react app

create-react-app react-is-fun
cd react-is-fun
npm start 

项目结构

浏览器弹出页面

渲染第一个元素

编辑 <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 的元素
)

刷新页面

加一点样式

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')
)

还可以用 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')
)