Recat教程（二）

这里我们通过脚手架的方式来创建一个React项目，具体操作如下：

　　1、进入项目目录，使用npx create-react-appp  my-demo这条命令，会为我们下载react等组件且创建目录文件。

　　2、成功后，cd my-app

　　3、启动服务：npm start

• 简单的demo，安装好后，删除除了index.js的其他文件，然后将其修改为：

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  
  ReactDOM.render(
    <h1>Hello World</h1>,
    document.getElementById('root')
  );

  注意：在上面的代码中我们可以看出是使用了jsx语法，因为html和js混合编写了，其实底层是遇到<>号则当html处理，遇到{}就当作js处理。

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  const react = "React"
  ReactDOM.render(
    <h1>Hello {react}</h1>,
    document.getElementById('root')
  );

• 元素渲染, 通过函数的刷新刷新页

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  
  function tick () {
    // 注意当存在标签结构，且标签存在换行时需要使用()
    const element = (
      <div>
        <h1>Hello React</h1>
        <h2>It is { new Date().toLocaleTimeString() }</h2>
      </div>
    )
  
    // 需要实时渲染
    ReactDOM.render(element, document.getElementById('root'))
  }
  
  setInterval(tick,1000)

组件的创建, 首先我们需要创建一个组件，然后在index.js中使用组件，具体如下　　
• 创建组件app.jsx, 注意这里也可创建app.js,但是没有语法提示， 这里的return如果有多个标签，需要使用()包裹。

  import React from 'react'
  
  // 一种用类的方式创建组件，另一种是Hook形式，下面我们使用类的方式创建组件
  class APP extends React.Component {
      render() {
          return <h1>Hello React Compent</h1>  
      }
  }
  
  export default APP

• 然后就是在index.js中引用了

  import React from 'react';
  import ReactDOM from 'react-dom';
  import APP from './app'
  
  ReactDOM.render(<APP/>,document.getElementById('root'))

Props属性，通过它能给各个组件赋予不同的形式属性。需要注意的是：所有的props不允许被修改，要修改也是父组件自己修改。
• 我们新建一个组件myNav.jsx,用来更具不同的属性返回不同的组件形式

  import React from 'react'
  
  export default class MyNav extends React.Component {
      render() {
          // 通过不同的属性props来返回不同的结果
          console.log(this.props.nav)
          return (
              <div>
                  { this.props.title }
                  <ul>
                      {
                          this.props.nav.map((element,index) => {
                          return <li key={index}> { element } </li>
                          })
                      }
                  </ul>
              </div>
          )
      }
  }

• 然后我们的index.js没有变动，依旧引用APP，在app.jsx中我们需要修改如下：

  import React from 'react'
  import MyNav from './myNav'
  
  // 一种用类的方式创建组件，另一种是Hook形式，下面我们使用类的方式创建组件
  
  class APP extends React.Component {
      
      render() {
          const nav1 = ["首页","分类","我的信息"]
          const nav2 = ["Python","Go","Node"]
          return (
              <div>
                  <h1>Hello React</h1>
                  {/* 分别渲染出不同的结果 */}
                  <MyNav nav={nav1} title="路径导航"/>
                  <MyNav nav={nav2} title="学习导航" />
              </div>
          )
      }
  }
  
  export default APP