一、创建React项目

方法一：使用vite创建

Vite中文网

•  在终端创建项目

  npm create vite@latest

  

  

•  配置项目支持的模式

  

  •  创建项目成功实例

    

    方法二：使用Create React App创建

    Create React App

    • 在终端输入命令

      npx create-react-app 项目名称

      二、项目基本架构说明

      

      三、运行项目

      在项目根目录下运行

      npm run dev

      

      四、jsx基本语法

      •  在页面显示元素

        //index.html
        
        
        
            
            
            
            
        
        
            
            
            
            
        
        

        // 导入ReactDOM
        import ReactDOM from "react-dom/client";
        // 定义节点
        const e = 
        你好 React
        // 使用ReactDOM绑定容器，root对应html中的id容器
        const container = ReactDOM.createRoot(document.getElementById("root"));
        // 将节点添加到容器中，显示
        container.render(e)

        运行代码，成功将节点显示到页面上

        

        • 在函数中使用jsx语法

          //main.jsx
          import ReactDOM from "react-dom/client";
          //定义user对象
          let user = {
              firstname:'will',
              lastname:'up',
          }
          //定义formate函数传入user对象，并返回名字字符串拼接
          function formate(user){
              return user.firstname+'-'+user.lastname
          }
          //定义geeting函数传入user对象
          function geeting(user){
          //如果user对象存在则返回formate函数处理好的节点内容
              if(user) return 
          hello {formate(user)}
          //否则返回另一个节点内容
              else return 
          hello stranger
          }
          //将geeting函数处理的结果赋值给e
          const e = geeting()
          const container = ReactDOM.createRoot(document.getElementById("root"));
          //将geeting处理好的结果渲染到网页中
          container.render(e)

          • 渲染图片

            import ReactDOM from "react-dom/client";
            // const e = 
            hello
            let user ={name:'lili',avater:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2021%2F04%2F2115%2F220535311_6_20210421035428113&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1719331409&t=3fedf0a4a4794c7b0d6dcea6089a23ee'}
            let e = 
            const container = ReactDOM.createRoot(document.getElementById("root"));
            container.render(e)

            •  绑定id，点击name也可以获取input焦点

              import ReactDOM from "react-dom/client";
              let e = name:
              const container = ReactDOM.createRoot(document.getElementById("root"));
              container.render(e)

              •  转义

                let e = '你好'

                • 渲染HTML超链接类似js原生innerHTML 

                  import ReactDOM from "react-dom/client";
                  let content = '百度'
                  let htmlConetent = {
                      __html:content
                  }
                  const e = 
                  const container = ReactDOM.createRoot(document.getElementById("root"));
                  container.render(e)

                  •  遍历渲染数据

                    let hobbys = [
                        'eating',
                        'sleeping',
                        'playing'
                    ] 
                    // 法一
                    // let eArr = []
                    // for(let i=0;i{hobbys[i]}

                  // eArr.push(item) // } // let e =
                  {eArr}
                  // 法二 const a = hobbys.map((item,index)=>{ return
                  • name:{item}-index:{index}
                  }) let e =
                  {a}
                  const container = ReactDOM.createRoot(document.getElementById("root")); container.render(e)

                  •  显示本地时间及日期

                    import ReactDOM from 'react-dom/client'
                    // 显示本地时间
                    // let e = 
                    clock
                    time:{new Date().toLocaleTimeString()}
                    // 显示日期
                    let e = 
                    clock
                    time:{new Date().toLocaleDateString()}
                    const contari = ReactDOM.createRoot(document.getElementById('root'))
                    contari.render(e)

                    • react组件 

                      //App.jsx子组件
                      function App(){
                          return 
                      你好
                      }
                      export default App

                      //main.jsx
                      //使用子组件
                      import ReactDOM from 'react-dom/client'
                      // 导入外部组件
                      import App from './compontes/App'
                      // 创建虚拟DOM
                      let e = 
                      // 绑定DOM容器
                      const contari = ReactDOM.createRoot(document.getElementById('root'))
                      // 渲染DOM节点
                      contari.render(e)