react 简单入门

已于 2022-10-12 17:32:33 修改
阅读量561 收藏
点赞数
分类专栏： # react 文章标签： react.js javascript 前端
于 2022-10-12 11:58:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46051479/article/details/127279962
版权

安装和创建项目

安装

安装react手脚架：

npm install create-react-app -g

创建项目：

create-react-app demo

进入文件夹并执行项目：

cd demo
npm start

创建基础目录

  1. 删除在src目录下所有文件

  2. src目录下新建index.js文件作为入口文件

    import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

  3. 创建App.js作为入口组件

    //1、导入React核心模块
import React from 'react'

//2、定义组件类
class Hello extends React.Component{
        //类
    render(){
          //函数
        return (   //返回值
            <div>
                hello world !!! 我是组件222
            </div>
        )
    }
}


//3、导出组件
export default Hello

  4. 创建pages文件夹放置页面组件，创建assets文件夹放置图片等静态文件，创建components文件夹放置公共组件

安装插件和库

使用scss

安装sass-loader和node-sass就直接可以创建scss文件直接使用

npm install sass-loader node-sass -S

采用 Normalize.css 初始化样式

安装

npm install Normalize.css

安装成功后，在src/pages下的index.js中:

//重置样式
import 'normalize.css'

安装react-router和创建路由文件

// 安装
npm install react-router-dom

// 创建src/router文件夹
mkdir router
cd router
mkdir index.js

路由文件 index.js

import {
    BrowserRouter, Route, Routes, Navigate } from "react-router-dom"

import Home from "../pages/home";
import Query from "../pages/query";
import Details from "../pages/details";
import Item from "../pages/item";

export default function Router() {
   
  return (
    <BrowserRouter>
      {
   /* 使用 Routes 替换曾经的 Switch */}
      <Routes>
        <Route path='/' element={
   <Home />} />
        <Route path='/query' element={
   <Query />} />
        <Route path='/details' element={
   <Details />} >
          <Route path='item/:id' element={
   <Item />} />
        </Route>
        {
   /* 重定向到首页 */}
        <Route path="*" element={
   <Navigate to="/" />} />
      </Routes>
    </BrowserRouter>
  );
}

src/index.js文件修改为

import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from "./router"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>
);

安装react-redux

npm install react-redux
mkdir store

react 18基础语法

组件化开发

简单创建组件

组件开发分为两种类组件开发和函数组件开发

类组件开发简单模板
//1、导入React核心模块
import React from 'react'

//2、定义组件类
class Hello extends React.Component{
      //类
    render(){
        //函数
        return (   //返回值
            <div>
                hello world !!! 我是组件222
            </div>
        )
    }
}

//3、导出组件
export default Hello
函数组件开发简单模板
//  写法一
export default const Hello = (props) => {
         
    return <div>{
   props.message}</div>
}

 //  写法二
export default const Hello = props => <div>{
   props.message}</div>  

// 写法三
export default function Hello(props) {
   
    return <div>{
   props.message}</div>
}

注意点：

  1. 定义组件的时候，return 后面只能有一个根标签，不能有多个，但这个标签内部可以有其他多个标签

  2. 使用组件的时候，首字母必须大写

JSX语法糖

React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展，在React中会被babel编译为JavaScript。

JSX的特点：

  • JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
  • 它是类型安全的，在编译过程中就能发现错误。
  • 使用 JSX 编写模板更加简单快速。
JSX几个注意的格式：

  1. React的JSX是使用大写和小写字母来区分本地组件和HTML组件

    （如：html就用 div p h1 ， 组件就用 MyButton App Home List等 ）

  2. JSX和html的标签属性的区别

    HTML标签属性 JSX 原因
    for htmlFor for在JS中为for循环关键字
    class className class在JS中为声明类关键字
    style 需使用JS对象(使用双花括号–{ {}}) 
    <div>
    <p  style={
     {
     backgroundColor: "#ccc"}}>
        hello world !!! 我是组件2223
    </p>

    <img src={
     MyImg} alt="" className="img1" /> <br/>
    <label htmlFor="username">用户名：
        <input type="text" id="username"/>
    </label>

</div>
JSX变量引用、三目运算符、for循环
  1. 调用变量，需要在return中直接使用单花括号-- **{}**调用
  2. 三目运算符直接在**{}**使用（做为 v-if 是否显示组件）
  3. for循环使用数组名.map(函数)（做为 v-for 循环显示组件）
import React, {
    Component } from 'react'

let name = "小明", num1=20, num2=30, arr=[1, 2, 3, 4, 5]

export default class App3 extends Component {
   
    render() {
   
        return (
            <div>
                {
   /* 这是注释的格式 */}
                {
   /* JSX中引用变量需要加单花括号 */}
                <p>{
   name}</p>
               
                {
   /* 三目运算符的使用 */}
                <p>num1和num2中比较大的是：{
   num1>num2? num1: num2}</p>


                {
   /* for循环的使用 */}
                <ul>
                    {
   /* 数组名.map(函数) */}
                    {
   
                        //格式1：
                        arr.map((v,k)=>(
                                <li key={
   k}>{
   v}</li>
                            )
                        )
                    }
                    {
   
                        //格式2：可以把上面的大括号和return换成小括号
                        arr.map((v,k)=>{
       
                                return <li key={
   k}>{
   v}</li>
                            }
                        )
                    }
                </ul>
                
            </div>
        )
    }
}

组件状态 state 的基本使用

类组件

组件状态this.state的基本使用总结:

  1. 在构造函数定义状态数据

    constructor(props){
     
    super(props)

    this.state = {
     
        num: 20
    }
}

  2. 在jsx标签里使用状态数据

    return (
    <div>
        <p>{
     this.state.num}</p>
    </div>
)

  3. 在方法里修改数据（注意只能使用this.setState修改数据，不像vue，react不会监听数据）

    // 1、通过事件或者定时器触发：
    <button onClick={
     this.handleClick.bind(this)}>点击增加1</button>

// 2、在事件函数中：
this.setState({
     
    num: this.state.num+1
})
函数组件
import React, {
    useState } from "react"

export default function Query() {
   
  // 1.定义状态
  const [num, setNum] = useState(0);

    
  const add = function () {
   
    // 3.修改数据
    setNum(num + 1)
  }

  return (
    <div>
      <h1>Query</h1>
      <span>2.使用状态数据：num的值：{
   num}</span>
      <button onClick={
   add}></button>
    </div>
  )
}

事件的使用

类组件
  1. 在类里定义方法 handleClick
  2. 在jsx 的标签属性里使用 οnclick={this.handleClick} 调用
import React, {
    Component } from 'react'

// 1、实现点击弹框效果(事件基本格式)
export default class App4 extends Component {
   
    handleClick(e){
     
        alert(132456)
    }

    render() {
   
    	return (
            <div>
                <button onClick={
   this.handleClick}>按钮</button>
            </div>
        )
    }
}

// <button onClick={this.handleClick.bind(this)}>按钮</button>

注意：方法中想使用组件的属性和方法（this调用），一定要使用.bind(this)改变this的指向，不然this指向的是这个方法，不是这个组件

实现双向数据绑定：

export default class App4 extends Component {
   
    constructor(props){
   
        super(props)

        this.state = {
   
            str1: "123"
        }
    }
    
    handleChange(e){
   
        console.log(e)
        console.log(e.target)
        this.setState({
   
            str1: e.target.value
        })
    }
    
    render() {
   
        return (
            <div>
                <input type="text" onChange={
   this.handleChange.bind(this)}/>
                <p>{
   this.state.str1}</p>
            </div>
        )
    }
}
函数组件
  1. 在函数里定义方法 handleClick
  2. 在jsx 的标签属性里使用 οnclick={handleClick} 调用

不用考虑this了

import React, {
    useState } from "react"

export default function Query() {
   
    const handleClick= function(e){
     
        alert(132456)
    }
    
    return (
        <div>
            <button onClick={
   handleClick}>按钮</button>
        </div>
    )
}

实现双向数据绑定：

import React, {
    useState } from "react"

export default function Query() {
   

    const [num, setNum] = useState(0);
    
    const handleChange= function(e){
     
        setNum(e.target.value)
    }
    
    return (
        <div>
            <input type="text" onChange={
   handleChange}/>
            <p>{
   num}</p>
        </div>
    )
}

组件属性 props 的基本使用

props 的作用就是接受父组件传输过来的值

类组件

props基本使用 总结：

  1. 在父组件中使用子组件的时候，可以给组件设定属性的值

    <组件名 属性名=值 />  

// 例如：
<Header title="首页" bgc="green"/>

  2. 在定义子组件的时候，需要填入值的位置书写 this.props.属性名 来获取定义的值

    <div style={
     {
     
        height:40,
        backgroundColor:this.props.bgc,
        textAlign:"center",
        color:"#fff"
    }}>
    {
     this.props.title}
</div>

  3. 在子组件内部可以定义默认值

    class Header extends React.Component{
     
    // 定义默认值
    static defaultProps = {
     
        属性名：默认值,
        bgc : "blue",
最低0.47元/天 解锁文章
想吃凤梨酥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 中实现简单的拖拽
qq_42925952的博客
08-25 2218
最近项目有一个拖放的需求，自己写了一个简单的demo 1.jsx文件代码 import React from 'react' import { Tree, Select } from 'antd' import './test.less' const { Option } = Select class Sql extends React.Component { constructor() { super() this.state = { arr: [], num
react，babel，react-dom三个包整合
09-05
react，babel，react-dom三个包的整合，实现react环境的搭建
react动态添加样式：style和className
waillyer的博客
01-21 1万+
一、react向元素内，动态添加style 例如：有一个DIV元素， 需要动态添加一个 display:block | none 样式， 那么： 二、react向元素内，动态添加className 比如： 1、DIV标签中，没有其他class，只需要动态添加一个.active的className，来显示内容是否被选中状态，则： 此标签是否选中 2、如果DIV标签本身有其他class，又要动态添加一个.active的className，来显示内容是否被选中状态，则： ...
React中Babel的配置
kitty007th的博客
03-22 779
Babel的配置因为继承了Facebook的官方配置，自己项目中需要做的配置就简单得多了，但是仍需注意React的官方大致都完成了什么配置，可参考github上的。2. Babel配置文件中直接继承React的官方配置。
React动态添加样式：style和className
icemwj的博客
03-16 1770
React动态添加样式：style和className
React 动态属性Style和动态类名className
Youyzq的博客
01-20 3472
React 动态属性Style和动态类名className 怎么操作单个动态属性和多个动态属性 Style 怎么操作单个动态类名和多个动态类名 className
React 中五种常见的样式
song854601134的博客
03-09 2918
内联样式 CSS样式表 CSS模块 styled-components JSS
react-React简单入门demo
08-15
React 简单入门demo
react入门学习文档
08-29
React入门学习文档 React 是一个用于构建用户界面的 JavaScript 库，是一个数据驱动的 MVVM 模式的框架。学习 React 需要了解其主要特点、JSX 元素渲染、生命周期、组件事件等知识点。 React 介绍 React 是一个...
React框架入门.pdf
06-12
本文介绍 React的背景和用例的一些细节，并在自己的电脑上建起基本的 React 工具链，创建并使用一个简单的入门应用程序，以学习一些关于 React 在此过程中如何工作的知识。
React快速入门教程
01-21
简介 Facebook官网介绍：React 是一个用来构建用户界面的 JavaScript 库。相当于 MVC 架构的 V 层。...这是一个简单完整的React组件（类），props 主要作用是提供数据来源，可以简单的理解为 props 就是构造函数的参数
react简单介绍和使用入门
01-08
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 什么是React React 是一个为数据提供渲染为 HTML 视图...
react动态添加和设置样式：style和className
热门推荐
大师兄
04-23 1万+
原文链接:https://dsx2016.com/?p=467 ➢react动态设置样式 所谓动态,有两种方式: 在react生命周期中获取数据并使用js来改变某些属性和样式 监听state,props等某些动态变量,使用条件判断或者赋值来改变 ➢style动态设置 例如: 改变一个div的显隐 通过设置div的display:blick|none来控制显示和...
【React】动态绑定style和class
surZhang的博客
05-11 1259
可以定义到state中，直接绑定上去。单个类名，不含其他类。
react的class和style，动态添加类classnames库
过客如期的博客
05-16 7730
一，前言 1.在react中想要动态添加className时，通过就会使用classnames这个库。 二，使用方法 1.引入classnames: import classnames from classnames。 2.classnames是一个函数，使用的形式较多，记住通常使用方法即可： （1）传入一个对象：classnames({class1:true,class2:false}) ，true表示相应的class生效，反之false表示不生效。 （2）接受多个类名：classnames(class1
初学React遇到想要动态绑定组件的Style问题
qq_31794615的博客
03-25 2478
先说一下我的问题吧！ 使用ProForm组件，组件中有两个ProForm.Group子组件想要与一个ProFormRadio.Group单选组件进行联动，需要根据ProFormRadio.Group组件的选择项动态的显示/隐藏两个ProForm.Group组件 左图 单选框选中 网络连接 时，下边的网络地址输入框出现， 右图 单选框选中 微信链接 时，下边的图片出现， 先说好，网络地址 和 图片 输入框 不是同一个 根据这个需求，我可以想到使用 FormText 中的 hidden 属性，
React如何配置路由
最新发布
weixin_47121832的博客
06-15 146
react配置路由方法
react入门
05-26
下面是一个简单的 React 入门指南： 1. 安装 React React 可以通过 NPM 安装，可以在命令行中执行以下命令来安装 React： ``` npm install react react-dom ``` 2. 创建 React 组件 在 React 中，一个组件就是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值