React基础入门代码步骤

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

React

下载（引入顺序不能乱！）

npm i react --s   核心库
npm i react-dom --s  提供操作DOM的react扩展库
npm i babel-standalone --s   es6-->es5  jsx-->js

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入顺序不能乱 -->
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.min.js"></script>

</head>
<body>
    <!-- 创建一个根节点 -->
    <div id="app"></div>

    <script type="text/babel">
        let demo =<h1>刘某某</h1>
        ReactDOM.render(demo,document.getElementById("app"))
    </script>

</body>
</html>

独立写法

  • html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
    <style>
        .aa{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script src="jsx.js" type="text/babel"></script>
</body>
</html>
  • js文件
let user = {
    name: "小刘",
    age: 18
}

function fun(obj) {
    return `姓名是:${obj.name}-----年龄是:${obj.age}`
}
let cc = {color:"green",backgroundColor:"pink"}
let phone = 4999;

let demo = <div>
    {/* jsx注释 */}
    {/* <p className="aa">jenny</p>  */}
    <div style={cc}>{fun(user)}</div> 
    <div className="aa">这个手机{phone}---{phone>4000?"很贵":"很便宜"}</div>
    </div>
// 注意在jsx里不能使用 class 这个属性，因为class是js的属性，只能使用className
ReactDOM.render(demo, document.getElementById("app"));

组件三大属性

一、state
<body>
    <!-- 创建一个根节点 -->
    <div id="app">
    </div>
    <div id="app2">
    </div>

    <script type="text/babel">
        // 1、定义组件
        // 方式一：工厂函数组件(简单组件：没有状态的组件)
        function MyComponent(){
            return (<h2>工厂函数组件(简单组件)</h2>)
        }
        // 方式二：ES6类组件(复杂组件)
        class MyComponent2 extends React.Component{
            render(){
                return(<h2>ES6类组件(复杂组件)</h2>)
            }
        }
        // 2、渲染组件标签
        ReactDOM.render(<MyComponent/>,document.getElementById("app"))
        ReactDOM.render(<MyComponent2/>,document.getElementById("app2"))
    </script>
</body>

<script type="text/babel">
        /*
        需求：自定义组件，功能说明如下
        1.显示h2标题，初文本为：你喜欢我
        2.点击标题更新为：我喜欢你
        */
        // 1.定义组件
        class Like extends React.Component {
            
            constructor (props){
                super(props)
                // 初始化状态
                this.state={
                    isLikeMe:false
                }

                // 将新增方法中的this强制绑定为组件对象
                this.handleClick = this.handleClick.bind(this)
            }
        
        // 新方法添加：内部的this默认不是组件对象，而是undefined,需添加bind指定
        handleClick(){
            console.log('handleClick()',this);
            // 得到状态并取反
            const isLikeMe = !this.state.isLikeMe
            // 更新状态
            this.setState({isLikeMe})
        }
        
        // 重写组件类的方法
        render(){
            //读取状态
            const {isLikeMe} = this.state
            return <h2 onClick = {this.handleClick}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>
            }
        }
        
        // 2.渲染组件标签
        ReactDOM.render(<Like/>,document.getElementById('app'));
    </script>
二、Props验证和默认值
默认值：defaultProps
验证：propTypes

  • npm install --save prop-types

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <!-- 引入-->
    <script src="node_modules/prop-types/prop-types.js"></script>
    <script src="node_modules/babel-standalone/babel.min.js"></script>

</head>
<body>
    <!-- 创建一个根节点 -->
    <div id="app">
    </div>
    <div id="app2"></div>

    <script type="text/babel">
        /*
        需求：自定义用来显示一个人员信息的组件，效果如页面，说明
        1.如果性别没有指定，默认为男
        2.如果年龄没有指定，默认为18
        */
        // 1.定义组件
        // function Person(props){
        //     return(
        //         <ul>
        //             <li>姓名：{props.name}</li>
        //             <li>年龄：{props.age}</li>
        //             <li>性别：{props.sex}</li>
        //         </ul>
        //     )
        // }

        class Person extends React.Component {
        render(){
            return(
                <ul>
                    <li>姓名：{this.props.name}</li>
                    <li>年龄：{this.props.age}</li>
                    <li>性别：{this.props.sex}</li>
                </ul>
            )
        }
        }
        
        // 指定属性默认值
        Person.defaultProps={
            sex:'男',
            age:18
        }

        // 指定属性值得类型和必要性
        Person.propTypes={
            name:PropTypes.string.isRequired,
            age:PropTypes.number
        }

        // 2.渲染组件标签
        const p1={
            name :'jenny',
            age:21,
            sex:'女'
        }
        /*
        ...的作用
        1、打包
        2、解包
        */
        ReactDOM.render(<Person {...p1}/>,document.getElementById('app'));

        const p2={
            name:'jack'
        }
        ReactDOM.render(<Person name={p2.name} age={20}/>,document.getElementById('app2'));

    </script>
</body>
</html>
三、refs
<script type="text/babel">
        // 1.定义组件
        class MyComponent extends React.Component {

            constructor (props){
                super(props)
                this.showInput = this.showInput.bind(this)
                this.handleBlur = this.handleBlur.bind(this)

            }

        showInput(){
            const input = this.refs.input
            alert(this.input.value)
        }
        handleBlur(event){
            alert(event.target.value)
        } 

        render(){
            return(
                <div>
                    <input type="text" ref={input=>this.input=input}/>&nbsp;
                    <button onClick={this.showInput}>提示输入内容</button>&nbsp;
                    <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>
                </div>
            )
        }
    }
        
        // 2.渲染组件标签
        ReactDOM.render(<MyComponent />,document.getElementById('app'));
    </script>

React脚手架

npm i -g create-react-app
create-react-app  rproject (rproject为自定义项目名)，最后出现 happy hacking说明创建成功
小野又在卷了
关注
专栏目录
React18入门到实战2023版
郭宝的博客
10-24 939
React 是由Meta公司研发，是一个用于构建Web和原生交互界面的库。jsx 是 Javascript和XML（HTML）的缩写，表示在JS代码中编写HTML模板结构，它是React中编写UI模板的方式。HTML的声明式模板写法JS的可编程能力概念：自定义Hook是以use打头的函数，通过自定义 Hook 函数可以用来实现逻辑的封装和复用。需求：实现点击toggle 显示/隐藏 this is div 这个组件/***/
React基础入门(JSX与React组件基础,进阶) --第二篇
Bioye_的博客
07-27 414
接着上篇补充一下JSX的剩余基础知识 1. JSX 中使用 JavaScript 表达式 嵌入 JS 表达式 数据存储在JS中 语法：{ JavaScript表达式 } 注意：语法中是单大括号，不是双大括号！ const name = 'Jack' const dv = ( <div>你好，我叫：？？？</div> ) 嵌入 JS 表达式 const name = 'Jack' const dv = ( <div>你好，我叫：{name}</div> )
React入门看这篇就够了
weixin_33962923的博客
01-21 1176
react - JSX React 背景介绍 React 入门实例教程 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 什么是React A JAV...
React 入门学习
m0_62118859的博客
04-21 9387
目录 1. React 介绍 2. React 特点 （1）声明式 （2）组件化 （3）一次学习，跨平台编写 3. React 脚手架 方式 1 方式 2 4. React 基本使用 5. React 创建元素练习 1. React 介绍 了解 react 的历史背景和基本概念 React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套...
React学习笔记（一）——React 入门
最新发布
weixin_56370772的博客
09-13 1594
了解 react 的历史背景和基本概念React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。React 是最流行的前端框架之一。对比近两年Vue 和 Angular的下载量，还有 2021 年开发者使用的 web 框架的比例，可以看到 React 是前端工程师应该必备技能之一，现在很多大厂也在使用它。
React基础语法入门附上详细代码，
m0_56691541的博客
05-28 328
根据尚硅谷教学视频，从入门到精通总结了react基础语法，后续会持续更新react全家桶 一.Hello，React //1.创建虚拟DOM const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */ 二.虚拟DOM的两种创建方式 1.使用jsx创建虚拟dom //1.创建虚拟DOM const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */ <h1 id="title"> .
React基础
Jack汪喆的技术分享栏
08-04 476
1.使用React编写TodoList //TodoList.js import React ,{ Component, Fragment}from 'react'; class TodoList extends Component{ render(){ return( &amp;amp;amp;lt;Fragment&amp;amp;amp;gt; &amp;amp;amp;lt;in...
React 基础入门 （一）
小柒的前端之旅
06-22 789
前面的话 这是一篇算React入门级的文章，初次接触React，有问题请指出～～～。 安装方式 这里介绍搭建一个 react 项目的两种方式： CDN链接 和 官方推荐的 create-react-app 脚手架 CDN 链接 创建一个 index.html 文件，将 React、React DOM、Babel 这三个 CDN 链接引入到 head 标签中。并创建一个 div ，id为 root，作为根元素。 <!DOCTYPE html> <html lang="en"> <
React中文入门教程 pdf 下载
03-19
### React中文入门教程知识点概述 #### 一、React概览 **React** 是一个用于构建用户界面的JavaScript库，特别适合于构建复杂且交互频繁的Web应用。React的核心优势在于其虚拟DOM技术，使得更新界面变得高效且流畅...
JavaScript：前端框架入门：React基础
07-14
### JavaScript：前端框架入门：React基础 #### 一、React简介与环境搭建 ##### 1. React的历史与特点 **1.1 React的历史** React是由Facebook开发并维护的一个用于构建用户界面的JavaScript库。它最初在2013年...
react 入门，项目搭建
09-13
本教程将引导你入门React，介绍如何使用Webpack等基础工具搭建一个React项目。 React的核心概念是组件。组件是可重用的代码块，它们可以像HTML元素一样被组合起来，构建出复杂的UI。React组件可以接收props（属性）...
react组件开发流程（一个新手的入门开发整理）
07-25
刚接触React1个多月时对React基础知识的整理及理解
reactJsApp:带有ReactJs初始的App
05-24
=============================== React Github应用程序
React基础入门
donglize521521的博客
09-24 4217
React系列二 - 核心JSX语法一 React系列二 - 核心JSX语法二 React系列三 - 阶段案例练习
React基础入门学习
qq_42964711的博客
10-11 223
1. 核心文件 react.js 核心文件 react-dom.js 渲染页面DOM 当前文件必须1依赖react文件 babel.js 把ES6转化为ES5 把JSX语法转化为Javascript native app文件 2.什么是JXS 什么是JXS 定义：一个对象，很像html，但是不是。 这个东西的属性不能增加和修改。（约等于object.freeze） JXS代码会被运行或者打包阶段被编译、生成浏览器可以识别的代码。 为什么使用JXS 简化了语法、提高了开发效率。 一
01.react最基本代码
乐夫天命兮的博客
03-12 329
//webpack-dev-server 打包好的main.js是托管到了内存中；所以在项目目录中看不到； //但是我们可以认为，在项目目录中，有一个看不见的main.js // 1.这两个导入时候，接收的成员名称，必须这么写 import React from ‘react’ // 创建组件/虚拟dom元素，生命周期 import ReactDOM from ‘react-dom’ // 把创建好的 组件 和 虚拟dom放到页面上展示的 // 2.创建 虚拟DOM 元素 // 参数1：创建的元素的类型，字
React---基本入门知识
qq_46065861的博客
11-02 1290
自己有道云的文档 一、简介 React是目前前端较为流行的框架，是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。 2013年由FaceBook进行开源，我们将React 16以后的版本，称之为React Fiber(使react运行更加的流畅，特别是复杂的动画) 属于MVC设计模式 M model V view C control(即为模型层影响控制层，控制层影响视图层) 相关技术栈：React-Router Redux React Native React VR Ho
React基础入门详解
初学者乐园的博客
05-27 965
React项目的创建 1、 运行 cnpm i react react-dom -S 安装包 2、 在项目中导入两个相关的包： // 1. 在 React 学习中，需要安装 两个包 react react-dom // 1.1 react 这个包，是专门用来创建React组件、组件生命周期等这些东西的； // 1.2 react-dom 里面主要封装了和 DOM 操作相关的包，比如，要把 组件渲...
ReactNative入门与原理探索
1. **跨平台**：React Native支持iOS和Android，一份代码，两端运行，极大地减少了开发成本。 2. **热更新**：React Native可以实现热更新，避免了传统应用必须通过App Store或Google Play审核的过程。 3. **快速...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值