React基础使用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43188554/article/details/103841252

React

1、认识react

1.1、基础介绍

1.2、中文官网地址：

https://react. docschina.org/

2、react基础使用

2.1、引入文件

// react核心库
<script  src="https://unpkg.com/react@16/umd/react.development.js"></script>
// reactDOM 库
<script  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
// babel
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

2.2、一个容器元素

<div id="root"></div>

2.3、初始化

// 设置type属性为text/babel 识别jsx语法
<script type="text/babel">
  	
 
  // 核心方法： ReactDOM.render(模板，挂载的节点);
  
  let template = (<div>
                  		<h3>我是标题</h3>
                  </div>)
  ReactDOM.render(template,document.querySelector('#root'));
  
</script>

3、JSX语法

3.1、渲染变量

格式： {变量}

// 设置type属性为text/babel 识别jsx语法
<script type="text/babel">
  
  // 定义好变量
  let msg = "老子天地之间第一帅！"
  
 
  // 核心方法： ReactDOM.render(模板，挂载的节点);
  
  let template = (<div>
                  		<h3>{msg}</h3>
                  </div>)
  ReactDOM.render(template,document.querySelector('#root'));
  
</script>

注意：

不可以直接渲染对象变量
渲染数组，会直接将每个值变成字符串放在一起
{}括号内部，想js一样可以进行运算。类似 {1+1} {‘a’+‘b’}
不会对运算的结果是布尔值进行返回比如: {10>20} 如果是Vue返回false，React中不会任何返回信息,但是对于三木运算，会有返回结果

3.2、模板注意语法

- 所有标签必须闭合，无论单双，特别注意单标签，如img,br,hr，input
- 注释写法：  {/* 注释内容 */}
- HTML标签的某些属性更换了名称 如： class 换成了className;  label的for换成了 htmlFor
- HTML标签的属性，需要驼峰命名。 如：onclick 变成  onClick ,   rowspan 变成 rowSpan

组件的首字母必须大写

3.3、属性绑定

格式： 
		<标签 属性名={变量名} />
		<标签 属性名={ '字符串'+变量名} />
// 切记：不需要双引号

3.4、条件渲染

做法：和传统的html判断非常类似，通过if语句决定变量的不同值。

实现：

// 设置type属性为text/babel 识别jsx语法
<script type="text/babel">
  
  // 定义好变量
  let state =true

  let htmlstr = "";
	
	 // 适用于大段的html内容
   if(state){
      htmlstr = (
      	<div class='aa'>
        	<h1>我是对的哦</h1>
        </div>
      )
   }else{
     htmlstr = (
      	<div class='aa'>
        	<h1>我是错的哦</h1>
        </div>
      )
   }

  
  // 核心方法： ReactDOM.render(模板，挂载的节点);
  
  let template = (<div>
                  		<h3>标题啊</h3>
                  		{htmlstr}
                  </div>)
  ReactDOM.render(template,document.querySelector('#root'));
  
</script>

比较小的html内容更换，使用三木判断

// 设置type属性为text/babel 识别jsx语法
<script type="text/babel">
  
  // 定义好变量
  let state =true

  let htmlstr = "";
	
	 
  
  // 核心方法： ReactDOM.render(模板，挂载的节点);
  
  let template = (<div>
                  		<h3>标题啊</h3>
                  		<div>
                  				{ state ? <h3>对的</h3> : <h3>错的</h3> }
                  		</div>
                  </div>)
  ReactDOM.render(template,document.querySelector('#root'));
  
</script>

3.5、循环渲染

本质：抓住了，渲染数组的时候会将数组的每个值直接放入到模板中。
- 我们将数组中的每个值变成html，然后将数组直接丢入去渲染，会直接渲染这些HTML

实现：

<script type="text/babel">

    // 数据   
    let arr = [3,545,6,7,3,2]
		// 每个元素可以使HTML， 但是每个HTML需要有一个key值
    let arr2= [<h3 key="1">3333</h3>,<p key="2">555555</p>,<h4 key="3">ggggggg</h4>]
   
    // 渲染数组：
            // 直接渲染数组的话，会吧每个值拿出来变成字符串放在一起，逗号都没有，如果是HTML标签，那么直接渲染。

    let domstr =(
       <div>
            <div>{arr}</div>
            <div>{arr2}</div>
       </div>
    )
    ReactDOM.render(domstr,document.querySelector("#app"))

</script>

可以对数据进行加工展示：

<script type="text/babel">

    // 数据
    let arr3 = [
        {name:"张飞",age:210},
        {name:"张飞22",age:220},
        {name:"张飞33",age:2320},
    ]

    // 循环生成我们的 react 节点元素 数组  
    // let arr4 = [];
    // arr4 = arr3.map((val,idx)=>{
    //     return (
            // <li key={idx}>
            //     <h3>{val.name}</h3>
            //     <p>{val.age}</p>
            //     <hr/>
            // </li>
    //     )
    // })
    // console.log(arr4);
    


    // 渲染数组：
            // 直接渲染数组的话，会吧每个值拿出来变成字符串放在一起，逗号都没有

    let domstr =(
       <div>
           	{/*剥离写法：外面生成号，这里直接渲染数组*/}
            {/*
            <ul>
                {arr4}
            </ul>
             */}
      
    				{/*内嵌直接渲染写法： 直接内部循环返回*/}
            <ul>
                { 
                    arr3.map((val,idx)=>{
                        return (
                            <li key={idx}>
                                <h3>{val.name}</h3>
                                <p>{val.age}</p>
                                <hr/>
                            </li>
                        )
                    }) 
                }
            </ul> 
       </div>
    )
    ReactDOM.render(domstr,document.querySelector("#app"))

</script>

3.6、样式操作

class操作
- 和属性绑定一致
- 注意： class属性变成className

style操作

注意： style属性不接收字符串样式

    // 错误
    // let domstr =(
    //     <div>
    //         <h3 style="color:red;font-size:20">你好</h3>
    //     </div>
    // )

style接收一个样式对象 style={ 样式对象 }

<script type="text/babel">
   
    let styleobj = {color:"red",fontSize:"40px",border:"2px solid orange"};
    let domstr =(
        <div>
      			{/* 直白写法 */}
            {/*<h3 style={ {color:"red",fontSize:"40px",border:"2px solid orange"} }>你好</h3>*/}
    				{/* 剥离简写写法 */}
            <h3 style={ styleobj }>你好</h3>
        </div>
    )

    
    ReactDOM.render(domstr,document.querySelector("#app"))

</script>

4、组件的创建

4.1、函数式创建

//要是构造函数
function Banner(){
		return (
			<div>我是div啊</div>
		)
}
// 简写：
let Banner =()=>(
			<div>我是div啊</div>
		)

4.2、class创建

// class类创建，主要继承React里面Component类
class Banner extends React.Component{
     render(){  // 渲染
          return ( 
            <div>我是div啊</div>
          )
     }
}

4.3、组件调用

// 引入组件
import 组件名 from "组件地址"

模板内部通过：
		<组件名/>

5、脚手架

网址：https://www.html.cn/create-react-app/docs/getting-started/
英文网址：https://create-react-app.dev/

5.1、全局安装脚手架

// 1、node环境安装了

// 2、npm安装脚手架
		npm install create-react-app -g   //全局安装

5.2、初始化项目

// 1、找到项目想存放的目录，进入该目录的cmd
// 2、初始化项目
		create-react-app 项目名称

5.3、目录结构介绍

my-app
├── README.md  // 说明文件 
├── node_modules  // 包文件
├── package.json  // 包配置文件
├── .gitignore  // git忽略文件
├── public
│   ├── favicon.ico    // 网页图标
│   ├── index.html     // 单页面文件
│   └── manifest.json  // 缓存
└── src   // 开发目录
    ├── App.css   // 根样式，看情况
    ├── App.js    // 根组件  【重要】
    ├── App.test.js  // 无用
    ├── index.css  // 全局样式，看情况
    ├── index.js   // 【非常重要】  【入口文件】
    ├── logo.svg   // logo文件，无用
    └── serviceWorker.js  // 服务注册文件，无用

//index.js

import React from React;
import ReactDOM from ReactDOM;

// 引入根组件
import App from "./APP.js";

// 渲染
ReactDOM.render(<App/>,document.querySelector("#root"));