React 入门（一）

最新推荐文章于 2024-09-13 15:06:03 发布
最新推荐文章于 2024-09-13 15:06:03 发布
阅读量480 收藏
点赞数
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49346957/article/details/119116237
版权

React

介绍

  • react就是一个框架 ，他相对于mvc来说只是其中的v 他适用于开发数据不断变化的大型应用程序
  • 在中大型项目中有百分之90的公司都用React框架；是因为React是由一个一个组件拼接而成的，它是一小部分一小部分拼接的，所以它在后期便于维护
  • 链接: 中文官网

目录

基本使用

  1. 先创建以个html文件
  2. 引入react.js文件和dom文件（我在这里用的是网上的没有下载到本地）
    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  1. 在script标签中声明 ReactDom.render函数 它里面有对应的参数
  // ReactDOM.render(element, container , [callback])
  //  element：要渲染的内容
  //  container：要渲染的内容存放容器
  //  callback：渲染后的回调函数

附完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <div id="root"></div>
    <script>
        // ReactDOM.render(element, container , [callback])
        //  element：要渲染的内容
        //  container：要渲染的内容存放容器
        //  callback：渲染后的回调函数 
        //第一种写法
        // ReactDOM.render(
        //     // React.createElement(type,props,children)
        //     React.createElement('h1',null,'我是一个标题') ,   
        //     document.querySelector("#root"),
        //     ()=>{
        //         console.log('成功');  
        //     }
        // )
        let h1= React.createElement('h1',null,'我是一个标题')
        let p= React.createElement('p',null,'我是一个段落')
        let el= React.createElement('header',{id:"header"},h1,p)
        //第二种写法
        ReactDOM.render(
            el,
            document.querySelector("#root"),
            ()=>{
                console.log('成功');  
            }
        )
    </script>
  </body>
</html>

JSX语法(语法糖)

  • 注意事项：
  • 它是一个基于 JavaScript + XML 的一个扩展语法
  • 它可以作为值使用，并不是字符串，也不是HTML
  • 它可以配合JavaScript 表达式一起使用
  • 它不可以和js语句一起使用
  • 所有的标签必须是闭合，包括单标签
  • class要写成className
  • style接收的是一个对象，并不是字符串
  • 每次只能输出一个标签（或者说必须有一个容器）

JSX基本使用

  1. 使用时要规定babel类型，和引入babel文件
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script type='text/babel'></script>
  1. 它使用是在ReactDOM.render()函数中直接定义标签就可以
         ReactDOM.render(
             <header>
                 <h1>{data.name}</h1>
                 <p>利用jsx渲染</p>
             </header>,
             document.querySelector("#root"),
             ()=>{
                 console.log('成功');  
             }
         )

附完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
         ReactDOM.render(
             <header>
                 <h1>我是标题</h1>
                 <p>我是段落</p>
             </header>,
             document.querySelector("#root"),
             ()=>{
                 console.log('成功');  
             }
         )
    </script>

  </body>
</html>

使用差值

  • 注意点：渲染时使用的是单括号{} 不是双括号{{}}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
        // 使用插值
        // let data='插值' //原样输出
        // let data=1 //原样输出
        // let data=false  //不输出
        // let data=null  //不输出
        // let data=undefined  //不输出
        // let data=['内容1','内容2']  // 去掉 ，  原样输出
         let data={
             name:'张',
             age:18
         } //对象要 .对象中的内容

        ReactDOM.render(
             <header>
                 <h1>{data.name}</h1>
                 <p>利用jsx渲染</p>
             </header>,
             document.querySelector("#root"),
             ()=>{
                 console.log('成功');  
             }
         )

    </script>

  </body>
</html>

条件渲染

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
        // 条件渲染
        ReactDOM.render(
            //会输出成立 如果写成false会输出不成立
            //基本使用
            // <header>
            //     <h1>{true?'成立':'不成立'}</h1> 
            //     <p>利用jsx渲染</p>
            // </header>,
            
            // 可以规定条件
                // ？类似 if..else()
                // || 类似if(!)取反
                // && 类似if()
            <header>
                <h1>{true?'成立':'不成立'}</h1> 
                <p>{false||'我是段落'}</p>
                <p>{false&&'正确'}</p>
            </header>,
            document.querySelector("#root"),
            ()=>{
                console.log('成功');  
            }
        )
    </script>

  </body>
</html>

解决每次只能输出一个标签使用Fragment

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <div id="main">
        <div id='header'></div>
        <div id='container'></div>
        <div id='root'></div>
    </div>
    <script type="text/babel">
    let style={
        width:'100px',
        height:'200px',
        backgroundColor:'green'
    }
    let {Fragment}=React
        ReactDOM.render(
            // <div>
            //     <div className='box' style={ {width:'300px',height:'400px'} }></div>
            // </div>,
            // 还可以用这种方法  style在上面定义
            <div className='box' style={style}>11</div>,

            // 用Fragment包裹可以写多个标签
            // <Fragment>
            //     <div className='box' style={style}></div>
            //     <p>我是段落</p>
            // </Fragment>,
            document.querySelector("#root"),
        )
    </script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
  </body>
</html>

列表循环

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- 提供 核心代码 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 提供与浏览器交互的DOM功能相当于DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
    // 列表循环
    // 第一种写法
        let data=['内容1','内容2','内容3','4']
        // function toData(){
        //    let arr=[];
        //    data.forEach((item)=>{
        //        //注意使用单括号不是双括号
        //        arr.push(<li>{item}</li>)
        //    })
        //    return arr
        // }
        // ReactDOM.render(
        //     <header>
        //         {toData()}
        //     </header>,
        //     document.querySelector("#root"),
        //     ()=>{
        //         console.log('成功');  
        //     }
        // )
        // 第二种写法
        ReactDOM.render(
            <ul>
                {
                    data.map((item)=>{
                        return <li>{item}</li>
                    })
                }
            </ul>,
            document.querySelector("#root"),
            ()=>{
                console.log('成功');  
            }
        )
    </script>
  </body>
</html>

以上就是单文件使用React，下面我们来看一下自动化构建的React怎么使用

搭建React框架

搭建框架步骤

  1. 创建一个文件夹来存放React框架
  2. cmd进入这个文件
  3. 安装create-react-app
命令：npm i -g create-react-app
  1. 安装完之后使用 create-react-app 命令搭建框架
//注意不要用驼峰命名法 推荐全小写
create-react-app 项目名称
  1. 完成之后使用 即按照提示cd xxx 和npm start 即可

框架的基本使用（写了一个案例做理解参考）

  • 你可把src中的文件全部删除只剩下index.js文件
  • 然后创建一个入口文件app.js（这是个空文件）
    index.js文件中的内容即下
import ReactDOM from 'react-dom';
//引入文件
import App from './app'

ReactDOM.render(
	//页面输出Hellow后就可吧这个Hellow删除
	//'Hellow',
	//这里相当于注册组件
  <App/>,
  document.getElementById('root')
);

app.js这里声明的是一个类式组件

import React,{Component} from 'react'
//引入friend组件
import Friend from './friend'
//  类式组件
//  组件类必须继承 **React.Component**
//  组件类必须有 **render** 方法
//  render的return后定义组件的内容
// 注意：记得导出
class App extends Component{
    render(){
    //先随意写一个内容做测试 , 在页面上显示之后就可删除
    //return (<div>哈喽</div>)
        return (<div><Friend/></div>)
    }
}
//导出APP类
export default App

定义一个friend.js文件

import {Component} from 'react'
//引入样式
import  './friend.css'
//引入数据
import data from './data'
//吧要显示在页面的数据封装到一个文件中
import DataList from './dataList'
//firend是你这个文件的名字
export default  class friend extends Component{
    render(){
        return (
        <div className="friend-list">

            {/* Object.keys  这个方法会吧给定对象自身的内容返回一个数组*/ }
            {
                Object.keys(data).map((item,index)=>{
                    return (
                        <DataList
                            key={index}
                            name={item}
                            value={data[item]}
                        />
                    )
                })
            }
        </div>
        )
    }
}

friend.css文件

.friend-list {
    border: 1px solid #000000;
    width: 200px;
}
.friend-group dt {
    padding: 10px;
    background-color: rgb(64, 158, 255);
    font-weight: bold;
}
.friend-group dd {
    padding: 10px;
    display: none;
}
.friend-group.expanded dd {
    display: block;
}
.friend-group dd.checked {
    background: green;
}

data.js文件

  • 为了提高组件的复用性，通常会把组件中的一些可变数据提取出来
let datas = {
    family: {
        title: '家人',
        list: [
            {name: '爸爸'},
            {name: '妈妈'}
        ]
    },
    friend: {
        title: '朋友',
        list: [
            {name: '张三'},
            {name: '李四'},
            {name: '王五'}
        ]
    },
    customer: {
        title: '客户',
        list: [
            {name: '阿里'},
            {name: '腾讯'},
            {name: '头条'}
        ]
    }
}
//吧datas暴露出去
export default datas

dataList.js文件

import React,{Component} from 'react'
export default class dataList extends Component{
    // state 组件自身状态
    // 它的主要作用是用于组件保存、控制、修改 *自己* 的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state
    //setState()修改state中的数据
    state={
        isOpen:false
    }
    render (){
    	//props 父组件传递过来的参数
        // console.log(this.props);
        let {title,list}=this.props.value
        let {isOpen} = this.state
        //下面的onClick是一个点击事件 注意他的大小写
       //在onClick中使用()=> (箭头函数是因为他的this指向问题)
        return(
            <div className={"friend-group "+(isOpen?"expanded":"")}>
                    <dt onClick={
                        ()=>this.setState({
                            isOpen:!isOpen
                        })   
                    }>{title}</dt>
                    {
                        list.map((item,index)=>{
                        return <dd key={index}>{item.name}</dd>
                        })
                    }
            </div>
        )
    }
}

最后的文件格式是这样的
在这里插入图片描述
最后的效果图
点击就会显对应的内容
在这里插入图片描述
总结：

  • react最显著的优势就是组件
  • 组件是react的核心，一个完整的react应用是由若干个组件搭建起来的，每个组件有自己的数据和方法，组件具体如何划分，需要根据不同的项目来确定
  • 简单说就是组件可复用，可维护性高
失う.
关注
react入门学习文档
08-29
React入门学习文档 React 是一个用于构建用户界面的 JavaScript 库，是一个数据驱动的 MVVM 模式的框架。学习 React 需要了解其主要特点、JSX 元素渲染、生命周期、组件事件等知识点。 React 介绍 React 是一个...
react18 学习（一）
weixin_44812511的博客
09-27 1854
记录自己学习react过程，会一直更新。
React 入门（超详细）
weixin_62897746的博客
03-23 3万+
1. React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 2. React 是一个用于构建用户界面的JavaScript 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 3. React 是用于动态构建用户界面的
React学习笔记（一）——React 入门
最新发布
weixin_56370772的博客
09-13 1669
了解 react 的历史背景和基本概念React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。React 是最流行的前端框架之一。对比近两年Vue 和 Angular的下载量，还有 2021 年开发者使用的 web 框架的比例，可以看到 React 是前端工程师应该必备技能之一，现在很多大厂也在使用它。
react快速开始(一)-入门基础
西京刀客
10-09 1万+
react快速开始-入门基础 在前端框架框架方面，其中的佼佼者React和AngularJS均出名门公司，具有非凡的影响力和号召力。尤其是React，它定位于前端组件化、高性能和跨平台，它提出的基于虚拟DOM的理念一出现就获得了广泛的关注和认可，也被AngularJS等其他前端框架所引入。
React基础入门
donglize521521的博客
09-24 4434
React系列二 - 核心JSX语法一 React系列二 - 核心JSX语法二 React系列三 - 阶段案例练习
React 入门学习
m0_62118859的博客
04-21 9398
目录 1. React 介绍 2. React 特点 （1）声明式 （2）组件化 （3）一次学习，跨平台编写 3. React 脚手架 方式 1 方式 2 4. React 基本使用 5. React 创建元素练习 1. React 介绍 了解 react 的历史背景和基本概念 React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套...
react 入门实操示例
01-17
当谈及前端框架时，很多人第一反应便是 React、Angular、Vue.js 三剑客。不过当前，三剑客虽然还在，但是它们三个却往不同的方向前进。 React 用户粘性最强，有 57% 的受访者表示“用过这个技术，以后还会再用”，...
React官网入门教程
02-22
本教程将基于React官网的入门教程，介绍React的基本概念、语法以及如何创建一个简单的React应用。 首先，React的核心概念是组件。组件是React中的基本构建块，可以看作是自包含的、可重用的UI部分。每个组件都有...
react入门实践案例
01-24
本实践案例将带你逐步了解并掌握React的基础知识，让你能够快速入门React开发。 一、React组件化开发 React的核心思想是组件化，它将复杂的UI拆分成独立、可复用的组件。每个组件都有自己的状态和属性，可以独立...
react redux入门示例
08-27
React Redux入门示例 React Redux是一个流行的前端状态管理框架，用于管理React应用程序中的状态。下面是React Redux入门示例的知识点总结： 一、环境准备 在使用React Redux之前，需要先准备好环境。这里使用...
React 快速入门 这篇就够了
制定持续可量化的目标，不断坚持。
02-23 4330
React 是一个流行的 JavaScript 库，它专注于用户界面的构建。它的主要特点包括：1.组件化架构：React 使用组件来构建 UI，每个组件都是独立的，可以重复使用，这有助于代码的模块化和项目的可维护性。2.虚拟 DOM：React 维护一个内存中的虚拟 DOM 树，只有在真正需要时才更新实际的 DOM，这提高了更新效率和性能。3.声明式 API：开发者通过描述 UI 应该是什么样子来创建组件，React 负责实际的渲染工作，这使得代码更易理解和编写。
ReactJS入门（一）—— 初步认识React
精选资讯文章
06-06 4482
它返回了一个p标签，其中的内容是 this.props.abc 和 this.props.name，这里的 this 指的是组件 Component1 本身，因此比如 this.props.name 获取到的便是组件 Component1 自身的属性 name 的值（abc 和 name 的值我们都在 Component2 中进行了定义）。2. React很擅长于处理组件化的页面，在页面上搭组件的形式有点像搭乐高一样，因此用上React的项目需求常规为界面组件化。isClick :!
从0到1无比流畅的React入门教程
tangdou369098655的博客
05-17 2480
用于构建 Web 和原生交互界面的库React 用组件创建用户界面是一个将数据渲染为HTML视图的开源JS库执行顺序->或者->render->
React入门看这篇就够了
weixin_33962923的博客
01-21 1217
react - JSX React 背景介绍 React 入门实例教程 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 什么是React A JAV...
React教程（详细版）
热门推荐
Ronychen的博客
03-19 20万+
一、简介（背景） 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、io
【2024官方文档版】React快速入门
不被定义的程序媛写的博客儿
04-12 3569
偶然翻开React的官方文档。觉得蛮有意思，总觉是入了坑洋洋洒洒几千字，记录学习React的一段旅程温故而知新^皿^
React 超详细入门教程
m0_60970928的博客
03-27 1万+
React 是一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，而不是一个 MVC 框架，但可以使用 React 作为 MVC 架构的 View 层轻易的在已有项目中使用，它是一个用于构建用户界面的 JavaScript 库，起源于 Facebook 的内部项目，用来架设 Instagram 的网站，于 2013 年 5 月开源。React 是用于动态构建用户界面的 JavaScript 库(只关注于视图)。
一看就会的React入门
暗武逢天的博客
05-17 461
React用于构建用户界面的JS库。是一个将数据渲染为HTML视图的开源JS库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值