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
      复制代码

       

 

posted @   独角兕大王  阅读(521)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示