react项目整理（react基础+react全家桶+ant-ui知识）基础篇(二)

最新推荐文章于 2025-02-03 14:34:28 发布

置顶 boJIke

最新推荐文章于 2025-02-03 14:34:28 发布

阅读量219

点赞数 1

CC 4.0 BY-SA版权

分类专栏： java 前端文章标签： react.js node.js git

本文链接：https://blog.youkuaiyun.com/bojikeqian/article/details/120664135

java 同时被 2 个专栏收录

30 篇文章

订阅专栏

前端

20 篇文章

订阅专栏

本文详细介绍了如何使用create-react-app创建React项目，并深入讲解了JSX语法，包括添加HTML、样式、逻辑、数组操作、组件创建、事件处理以及父子组件间的交互。同时，展示了React的声明式编码、组件化和高效更新等特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react正式开始咯（上诉方法均为自己手打搭建一个react项目，了解每一步，接下来是react提供的项目创建方法）
react => 视图层框架组件化 JSX表达式虚拟DOM
Facebook 开源的一个JavaScript库
React结合生态库构成一个MVC框架（vue也是mvc）
特点：Declarative(声明式编码:只需要声明在哪里做什么，无需关心如何实现)；Component-Based(组件化编码)；高效-高效的DOM Diff算法，最小化页面重绘
单向数据流
生态介绍

vue生态：vue + vue-router + vuex + axios + babel + webpack
react生态: react + react-router + redux + axios + babel + webpack

项目的创建

  yarn add / cnpm  install global/-g create-react-app (全局安装)
  在工作区创建项目

  create-react-app 你的项目名称

  cd 你的项目名称

  cnpm / yarn start 启动

JSX语法
1.添加html

let jsx = <div>this is a jsx programmer</div>

ReactDOM.render(
      jsx, // 将jsx组件放到渲染的dom下
      document.getElementById('app)
)

2.添加样式

行内样式
let style = {
    color: 'red'
}
let jsx = <div style={style}></div>

引入class样式
在index.scss中设置
body {
    .jsx {
          font-size: 16px;
     }
}
let jsx = <div className="jsx"></div> // react中使用className引用样式名称

添加逻辑

（1）使用变量

    let name = "pig"
    let jsx = <div>I am a {pig}</div>
    ReactDom.render(
          jsx,
          document.getElementById('app')
    )
（2）条件判断

     let truth = true
     let jsx = (//加括号的目的是为了换行的时候，编辑器不会给我们自动填补分号
          <div>
                { // 条件判断需要加上{}
                      truth ? <p>I am a pig</p> : <p>I am not a pig</p>
                }
          </div>
     )
（3）jsx中插入注释

      {/*我是一个注释*/} 
（4）数组的使用

      let names = ['pig', 'dog', 'chicken']
      let jsx = (
          {
              names.map((name,index) => <p key={index}>I am {name}</p>)
          }
      )
添加组件
（1）基础

      function Component () {
            return <h1>I am a pig</h1>
      }
      ReactDom.render(
            <Component />, // 如果是变量直接饮用，如果是组件需要加上标签
            document.getElementById('app')
      )
（2）es6组件写法

      class ES6Component extends React.Component{
            render () {
                  return <h1>I am a pig in es6</h1>
            }
      }
      ReactDom.render(
          <div>  // 两个组件共存需要包裹在一个div中
              <Component />
              <ES6Component>
          </div>,
          document.getElementById('app')
      )
（3）组件初始化变量

      class Component extends React.Component {
            constructor (props) {
                  super(props);
                  this.state = {
                        name: 'pig'
                  }
            }
            render () {
                 return <h1>I am a {this.state.pig}</h1>
            }
      }
（4）更改组件初始化变量

      class Component extends React.Component {
            constructor (props) { // props在子组件中只能被使用不能被改变
                  super(props);
                  this.state = {
                        name: 'pig'
                  }
            }
            render () {
                setTimeOut(() => {
                       this.setState({
                          name: 'Pi g Pig'
                       })
                }, 2000)
                 return <h1>I am a {this.state.pig}</h1>
            }
      }
（5）父组件传值

      class Component extends React.Component {
            constructor (props) {
                  super(props)
            }
            render () {
                 return <h1>I am a {this.props.name}</h1>
            }
      }
      ReactDom.render(
            <Component name="pig" />,
             docuement.getElementById('app')
      )
（6）组件添加点击事件（方法一）

      class Component extends React.Component {
            constructor (props) {
                  super(props)；
                  this.state = {
                      age: 18
                  }
                  this.addAge = this.addAge.bind(this)
            }
            addAge () {
                this.setState({
                    age : this.state.age + 1
                })
            }
            render () {
                 return (
                      <div>
                            <h1>I am  {this.state.age} years old </h1>
                            <button onclick={this.addAge}><button />
                      </div>
                ）
            }
      }
      ReactDom.render(
            <Component />,
             docuement.getElementById('app')
      )
（7）组件添加点击事件（方法二）

        class Component extends React.Component {
              constructor (props) {
                    super(props)；
                    this.state = {
                        age: 18
                    }
              }
              addAge () {
                  this.setState({
                      age : this.state.age + 1
                  })
              }
              render () {
                   return (
                        <div>
                              <h1>I am  {this.state.age} years old </h1>
                              <button onclick={(e) => {this.addAge(e)}}><button />
                        </div>
                  ）
              }
        }
        ReactDom.render(
              <Component />,
               docuement.getElementById('app')
        )
（8）组件添加输入框更改事件

        class Component extends React.Component {
              constructor (props) {
                    super(props)；
                    this.state = {
                        age: 18
                    }
              }
              changeValue (e) {
                  this.setState({
                      age : e.target.value
                  })
              }
              render () {
                   return (
                        <div>
                              <h1>I am  {this.state.age} years old </h1>
                              <input type="text" onChange={(e) => {this.changeValue(e)}} />
                        </div>
                  ）
              }
        }
        ReactDom.render(
              <Component />,
               docuement.getElementById('app')
        )
（9）容器性组件嵌套组件

        class Component extends React.Component {
              constructor (props) {
                    super(props)；
                    this.state = {
                        age: 18
                    }
              }
              changeValue (e) {
                  this.setState({
                      age : e.target.value
                  })
              }
              render () {
                   return (
                        <div>
                              <h1>I am  {this.state.age} years old </h1>
                              <input type="text" onChange={(e) => {this.changeValue(e)}} />
                        </div>
                  ）
              }
        }
        class Title extends React.Component{
              constuctor (props) {
                  super(props)
              }
              render (props) {
                  return <h1>{this.props.title}</h1>
              }
        }
        class App extends React.Component{
              render () {
                  return (
                      <div>
                          <Title title="app" />
                          <Component />  // 在这里引用小组件component
                      </div>
                  )
              }
        }
        ReactDom.render(
              <App />, // 这里换成App
               docuement.getElementById('app')
        )
（10）组件嵌套组件

        class Component extends React.Component {
              constructor (props) {
                    super(props)；
                    this.state = {
                        age: 18
                    }
              }
              changeValue (e) {
                  this.setState({
                      age : e.target.value
                  })
              }
              render () {
                   return (
                        <div>
                              <h1>I am  {this.state.age} years old </h1>
                              <input type="text" onChange={(e) => {this.changeValue(e)}} />
                        </div>
                  ）
              }
        }
        class App extends React.Component{
              render () {
                  return (
                      <div>
                          <h1>app</h1>
                          <Component />  // 在这里引用小组件component
                      </div>
                  )
              }
        }
        ReactDom.render(
              <App />, // 这里换成App
               docuement.getElementById('app')
        )
（11）容器性组件嵌套组件，传值可以为任何html形式

        class Component extends React.Component {
              constructor (props) {
                    super(props)；
                    this.state = {
                        age: 18
                    }
              }
              changeValue (e) {
                  this.setState({
                      age : e.target.value
                  })
              }
              render () {
                   return (
                        <div>
                              <h1>I am  {this.state.age} years old </h1>
                              <input type="text" onChange={(e) => {this.changeValue(e)}} />
                        </div>
                  ）
              }
        }
        class Title extends React.Component{
              constuctor (props) {
                  super(props)
              }
              render (props) {
                  return <h1>{this.props.children}</h1> // 这里变成获取子children
              }
        }
        class App extends React.Component{
              render () {
                  return (
                      <div>
                          <Title>
                                <span>我是spanspan</span>
                                <a href="">link</a>
                          </Title> //更改为html形式
                          <Component /> 
                      </div>
                  )
              }
        }
        ReactDom.render(
              <App />, // 这里换成App
               docuement.getElementById('app')
        )
（12）子组件给父组件传值

    class Father extends React.Component {
       constructor (props) {
           super(props);
           this.state = {
               bgColor: 'red'
           }
       }
       changeMyBgColors (color) {
           this.setState({
               bgColor: color
           })
       }
       render () {
           return (
               <div style={{background: this.state.bgColor}}>
                   <h1>我是爸爸</h1>
                   <Child bgColor={this.state.bgColor} changeColor={(color) => {this.changeMyBgColors(color)}}/>
               </div>
           )
       }
   }
   class Child extends React.Component {
       constructor (props) {
           super(props)
       }
       changeMyBgColor () {
           this.props.changeColor('blue')
       }
       render () {
           return (
               <div>
                   <h2>我是baby</h2>
                   <button onClick={(e) => {this.changeMyBgColor(e)}}>我想改变我爸爸的背景颜色</button>
               </div>
           )
       }
   }
   ReactDOM.render(
       <Father />,
       document.getElementById('app')
   )
（13）兄弟之间的组件通信（子1传父，父在传子2）


        class Child1 extends React.Component{
           constructor (props) {
               super(props)
               this.state = {
                   color1: 'red'
               }
           }
           changeMyBrotherColor (props) {
               this.props.change2Color(this.state.color1)
           }
           render () {
               return (
                   <div>
                       <h2>我是孩子1</h2>
                       <button onClick={(e) => {this.changeMyBrotherColor(e)}}>我要改变我弟弟的颜色咯</button>
                   </div>
               )
           }
       }
       class Child2 extends React.Component{
           constructor (props) {
               super(props)
           }
           render () {
               return (
                   <div>
                       <h2 style={{color: this.props.color22}}>我是孩子2</h2>
                   </div>
               )
           }
       }
       class Father extends React.Component{
           constructor (props) {
               super(props)
               this.state = {
                   color2: 'yellow'
               }
           }
           changColor (colorsss) {
               this.setState({
                   color2: colorsss
               })
           }
           render () {
               return (
                   <div>
                       <h1>这是我的孩子们</h1>
                       <Child1 change2Color={(color) => {this.changColor(color)}}/>
                       <Child2 color22={this.state.color2}/>
                   </div>
               )
           }
       }
       ReactDOM.render(
           <Father />,
           document.getElementById('app')
       )