react18之01 创建项目与基础之 jsx语法(类组件、函数组件定义变量、遍历数组、使用三目、定义事件修改数据、插槽)

小小亮01

已于 2023-08-15 16:32:36 修改

阅读量924

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2021-03-22 14:54:59 首次发布

本文链接：https://blog.csdn.net/weixin_43845137/article/details/115065857

版权

React 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

react创建项目

使用脚手架创建项目
- create-react-app 项目名称
- 或者 npx create-react-app react-demo npx创建临时的 app包，后面react-demo为项目名称
- 创建之后运行项目 npm start || yarn start
- 注意点：就是创建的项目名称不能携带大写字母，一般来说 test 或者 01-test等项目名称

项目目录的优化

1：将src下的所有文件都删除
2：将public文件下只留下 favicon.ico和index.html之外的文件都删除掉

3：修改public下的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

4：src目录下创建App.jsx组件，然后在引入index.js之中

	import './App.css';
	
	function App() {
	  return (
	    <div className="App">
	      app
	    </div>
	  );
	}
	
	export default App;

5：在src目录下创建index.js，这是项目的入口文件

	import React from 'react';
	import ReactDOM from 'react-dom/client';
	import './index.css';
	import App from './App';
	
	const root = ReactDOM.createRoot(document.getElementById('root'));
	root.render(
	// <React.StrictMode>严格模式节点去掉 会影响useEffect的时机
	  <React.StrictMode>
	    <App />
	  </React.StrictMode>
	);

6：启动项目
- yarn start

react 基础之 jsx语法

01: 函数组件定义基础的渲染(变量、数组、对象、三目、定义事件修改数据)

code

import { useState  } from "react"
function App() {
  // 01：渲染简单变量
  // 02：渲染数组
  // 03：渲染对象
  // 04：渲染三目
  // 05：定义事件 并且修改数据更新
  const name = '我是ppp'
  const arr = [{age:10},{age:20},{age:30}]
  const obj = { sex:'男',age:40}
  const active = 1
  const [count, setCount] = useState(0);
  function cilckCount(){
    console.log('cilckCount');
    setCount(count + 1)
    
  }
  return (
    <div className="App">
      {/* 01：渲染简单变量 */}
      <div>
        name - { name }
      </div>
      {/* 02：渲染数组 */}
      <div>
        arr - {
          arr.map((item,idx) =>{
            return (
              <div key={idx}>
               age- {idx}- { item.age}
              </div>
            )
          })
        }
      </div>
      {/* 03：渲染对象 */}
      <div>
        obj - { obj.sex } - { obj.age }
      </div>
      {/* 04：渲染三目 */}
      <div>
        {
          active === 1 ? '我是1' : '我是0'
        }
      </div>
      {/* 05：定义事件 并且修改数据更新 */}
      <div>
        <button onClick={cilckCount}>点击count++</button>
        当前count - {count}
      </div>
    </div>
  );
}

export default App;

效果

在这里插入图片描述

02: 类组件定义基础的渲染(变量、数组、对象、三目、定义事件修改数据)

code.jsx

import React, { Component } from 'react';

export default class 类基础语法渲染数组对象三目事件App extends Component {
  // 01：渲染简单变量
  // 02：渲染数组
  // 03：渲染对象
  // 04：渲染三目
  // 05：定义事件 并且修改数据更新
 state = {
  name:'我是ppp',
  arr : [{age:10},{age:20},{age:30}],
  obj : { sex:'男',age:40},
  active: 1,
  count: 0
 }
 componentDidMount() {}
 cilckCount = ()=> {
  this.setState({
    count:this.state.count + 1
  })
 }
 render(){
  const { name,arr,obj,active,count } = this.state
   return (
     <div>
      {/* 01：渲染简单变量 */}
      <div>
        name - { name }
      </div>
      {/* 02：渲染数组 */}
      <div>
        arr - {
          arr.map((item,idx) =>{
            return (
              <div key={idx}>
               age- {idx}- { item.age}
              </div>
            )
          })
        }
      </div>
      {/* 03：渲染对象 */}
      <div>
        obj - { obj.sex } - { obj.age }
      </div>
      {/* 04：渲染三目 */}
      <div>
        {
          active === 1 ? '我是1' : '我是0'
        }
      </div>
      {/* 05：定义事件 并且修改数据更新 */}
      <div>
        <button onClick={this.cilckCount}>点击count++</button>
        当前count - {count}
      </div>
     </div>
   )
 }
}

效果

在这里插入图片描述

03：函数组件插槽

03-1 父组件 app.jsx

import React, { Component } from 'react';
import AppSon from "./appSon";
export default class App extends Component {
 state = {
 }
 componentDidMount() {}
 render(){
   return (
     <div>
      <div>
        <AppSon
          left={<div>我是左边</div>}
          right={<div>我是右边</div>}
        >
          <span>我是app传递给son的默认插槽</span>
        </AppSon>
        <AppSon></AppSon>
      </div>
     </div>
   )
 }
}

03-2 子组件

import React from 'react';

export default function AppSon(props) {
    console.log('props',props);
    const { children,left,main,right } = props
    return (
        <div className='content'>
          <p>appSon 函数组件</p>
          <div>默认插槽-{children}</div>
          <div>
            <p>具名插槽</p>
             <div style={{display:'flex'}}>
                <div style={{width:'30%',textAlign:"center"}}>{left ? left : 'left'}</div>
                <div style={{width:'40%',textAlign:"center"}}>{main ? main : 'main'}</div>
                <div style={{width:'30%',textAlign:"center"}}>{right ? right : 'right'}</div>
             </div>
          </div>
        </div>
    )
}

03-3 效果

在这里插入图片描述

04：类组件插槽

04-1 父组件 app.jsx

import React, { Component } from 'react';
import AppSon2 from "./appSon2";
export default class App extends Component {
 state = {
 }
 componentDidMount() {}
 render(){
   return (
     <div>
      <div>
        <AppSon2
          left={<div>我是左边-son2</div>}
          right={<div>我是右边-son2</div>}
        >
          <span>我是app传递给son2的默认插槽</span>
        </AppSon2>
        <AppSon2></AppSon2>
      </div>
     </div>
   )
 }
}

04-2 子组件

import React, { Component } from 'react';

export default class AppSon2 extends Component {
 state = {
 }
 componentDidMount() {}
 render(){
  const { children,left,main,right } = this.props
   return (
     <div>
        <p>appSon2 类组件</p>
        <div>默认插槽-{children}</div>
        <div> ------------分界线 ---------</div>
        <div>
          <p>具名插槽</p>
           <div style={{display:'flex'}}>
              <div style={{width:'30%',textAlign:"center"}}>{left ? left : 'left'}</div>
              <div style={{width:'40%',textAlign:"center"}}>{main ? main : 'main'}</div>
              <div style={{width:'30%',textAlign:"center"}}>{right ? right : 'right'}</div>
           </div>
        </div>
     </div>
   )
 }
}