认识Ract

学习React

安装

cnpm install -g create-react-app

创建第一个react

create-react-app react-for-my-app
# 等待完成

启动

cd react-for-my-app
npm start

创建我的第一个app

回到项目里 删除src 下所有 文件

1. 使得src下目录为空

2. 在src下创建一个名为index的文件

3. 接下来写自己的第一个react文件

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
    <h1>欢迎来到React的世界</h1>,
    document.querySelector('#root')
)

元素和组件

import React from 'react'
import ReactDOM from 'react-dom'

const App = <h1>欢迎来到React的世界1</h1>

ReactDOM.render(
    App,
    document.querySelector('#root')
)

函数组件

import React from 'react'
import ReactDOM from 'react-dom'

const App = (props) => {
  return <h1>欢迎来到{ props.name }的世界</h1>
}
ReactDOM.render(
    <App name="React"/>,
    document.querySelector('#root')
)

类组件

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render(props) {
    return <h1>欢迎来到{this.props.name}的世界</h1>
  }
}

ReactDOM.render(
    <App name="React1"/>,
    document.querySelector('#root')
)

有多余和没多余的Div

import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'

class Title extends Component {
  render() {
    return (
        <h1>欢迎来到React的世界</h1>
    )
  }
}

class Content extends Component {

  render() {
    return (
        <p>React.js是一个构建UI库的组件</p>
    )
  }
}

// class App extends Component {
//   render() {
//     return ( // 多余的Div
//         <div>
//           <Title/>
//           <Content/>
//         </div>
//     )
//   }
// }

class App extends React.Component {

  render() {
    return (
        <Fragment>
          <Title/>
          <Content/>
        </Fragment>
    )
  }
}

ReactDOM.render(
    <App />,
    document.querySelector('#root')
)

JSX 原理

// <div className='app' id='appRoot'>
//   <h1 className='title'>欢迎进入React的世界</h1>
//   <p>
//     React.js 是一个帮助你构建页面 UI 的库
//   </p>
// </div>

// 以上的标签可以直接使用JavaScript对象表示

// const Html = {
//   tag: 'div',
//   attrs: { className: 'app', id: 'appRoot'},
//   children:[
//     {
//       tag: 'h1',
//       attrs: { className: 'title'},
//       children: ['欢迎来到Html的世界']
//     },
//     {
//       tag: 'p',
//       attrs: null,
//       children: ['react.js 是一个构建页面的UI库']
//     }
//   ]
// }

// 但是用 JavaScript 写起来太长了，结构看起来又不清晰，用 HTML 的方式写起来就方便很多了。


import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {

  // render() {
  //   return (
  //       <div className='app' id='appRoot'>
  //         <h1 className='title'>欢迎进入React的世界</h1>
  //         <p>
  //           React.js 是一个构建页面 UI 的库
  //         </p>
  //       </div>
  //   )
  // }
  render() {
    return (
        React.createElement(
            'div',
            {
              className: 'app',
              id: 'appRoot'
            },
            React.createElement(
                'h1',
                {className: 'title',},
                '欢迎来到React的世界'
            ),
            React.createElement(
                'p',
                null,
                'React.js 是一个构建页面的UI库'
            )
        )
    )
  }
}

ReactDOM.render(
    <App/>,
    document.querySelector('#root')
)