Hello react

最新推荐文章于 2021-11-05 23:15:42 发布
最新推荐文章于 2021-11-05 23:15:42 发布
阅读量363 收藏
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wngzhem/article/details/72436518
版权 
<style>
        .wm-h{
                color:red;
            }
        </style>
    </head>
    <body>
    <div id="app"></div>

    <script type="text/babel">
    var Comp=React.createClass({
        render:function(){
           return <div style={{fontSize:'30px'}} className="wm-h">{this.props.name} <h1>我就试试{this.props.title}</h1></div>;
        }
    });
       ReactDOM.render(
        <Comp name="666" title="44944"/>,
        document.getElementById('app')

        );

    </script>

React.createClass声明组件
ReactDOM.render（component，挂载点）
jsx 中 style={{key:value}}形式 key 用驼峰命名
class为 className=”

React Components Lifecycle

hook ：

Mounting

 1.getDefaultProps()
 2.getInitialState()
 3.componentWillMount
    render
 4 componentDidMount
Created with Raphaël 2.1.0 getDefaultProps getInitialState componentWillMount Render componentDidMount

Updating

Created with Raphaël 2.1.0 componentWillReceiveProps shouldComponentUpdate(yes/no update) componentWillUpdate Render componentDidUpdate next cycle yes no

Unmounting

componentWillUnmount
（个人觉得应该再添加DidUnmount 状态）

v折耳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React入门之HelloWorld及环境搭建
LiuHe
04-22 1万+
关注React也已经很久了，一直没能系统地深入学习，最近准备好好研究一下，并且亲自动手做一些实践。 学习一门语言也好，学习一个框架也好，都是从最初的hello world程序开始的，今天我们也来用React写一个hello world出来，了解一下如何编写及运行React。 在官方文档中，有一种方式是基于npm的，我比较喜欢这种方式，这也是官方比较推荐的，下面我们就一步一步创建一个React的...
React初体验-Hello React的组件化方式-React入门小案例_react hand-polard
2401_84183753的博客
04-30 654
)// 将文本定义成变量// 定义一个函数, 处理按钮点击事件// 修改数据// 修改完成后需要重新渲染界面// 封装一个渲染函数// 第二个小括号表示括号内容是一个整体。
Hello React （创建自己的第一个React 页面）
cvvvvvvvvvv的博客
11-05 2140
Rract是啥？ React 是用于构建用户界面的 JavaScript 库 构建用户界面. User Interface，对咱们前端来说，简单理解为：HTML 页面 javscrtipt库。不是框架，是库， react 全家桶才是框架 react 全家桶： react: 核心库 react-dom: dom操作 react-router：路由, redux：集中状态管理 背景 Rract最牛逼！全球使用最多 特点 声明式 用类似于html的语法来定义页面。react中通过数据驱动视图的变
React 系列一： Hello React
XHSRookies的博客
07-17 172
快来加入我们吧！ "小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。 "Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！ 前言 这节我们将教你如何导入 React 并带领你编写出一个简单的 React 页面。 本
React——HelloReact实现
Always-Learning
01-20 273
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello_React</title> </head> <body> <!--
HelloReact
03-26
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行该应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何...
helloReact:使用React JS示例示例
04-13
在本项目"helloReact:使用React JS示例示例"中，我们主要关注的是如何运用React JS这一流行的JavaScript库来构建动态用户界面。React是由Facebook开发的，它提供了一种高效的方式来管理和更新复杂的Web应用程序的...
hello-component:Hello React 组件作为 JSPM 包
06-07
标题 "hello-component:Hello React 组件作为 JSPM 包" 指的是一个使用 React 框架创建的组件，该组件已经被打包为 JSPM（JavaScript Package Manager）兼容的格式。JSPM 是一个现代的前端模块打包工具，它支持 ES6 ...
helloreact:同构 ReactJS
06-16
目前，这个应用程序是由Webpack（编译器和各种构建优化） npm（依赖项和脚本） ReactJS React Hot Reload (Hot Module Reload, HMR) 使用 NodeJS 和 Express 的同构服务器端渲染模板Susy sass 框架设置只需
HelloReact:第一React项目
03-22
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行该应用程序。打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。您还将在控制台中看到任何棉绒...
Hello React
Admans的专栏
11-28 320
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name='viewport' ...
React - hello_react
weixin_46398446的博客
05-14 68
注意： 引入核心库必须早react-dom库之前 type = “text/babel” 类型要写babel，它是将jsx转为js ReactDOM需要大写！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello_react</title> </head> <body> <!--准备
React简单使用（一）之react环境搭建以及Hello world实现
指尖的星光的博客
09-01 1273
前言 背景：由于我本身是后端开发出身的，但是在公司做了全栈的工作，所以需要学习前端的一些知识。最近公司前端用的是react，所以我就需要自学react。 定位 我暂时只需要能够简单的使用react开发一些页面，就足够了，不需要更深入的了解。 只需要学会简单的使用即可。 正文 1、参考文档 菜鸟教程 Node.js安装和配置 React学习（一）——基础项目搭建以及环境配置 React官方...
重学react系列（一）—— hello-react
dreamer_sen的博客
09-22 204
不用JSX运行react程序 最简单的运行一个react程序，莫过于直接在HTML页面上引入react代码。 需要引入的js文件有两个：react和react-dom，（代码中的development后缀，表示开发版本，是未压缩的代码） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React</title> <script s
ReactJs实战-让人沮丧的HelloWorld
超期服役软件开发者的博客
06-24 2317
学习任何一门语言我们写出的第一个Demo，应该是Hello world了。相信第一个具有自主思想的智能机器人开口第一句话应该就是：Hello world, Human, Fuck you! 为什么取名为让人沮丧的Hello World？这也是我在学习、使用ReactJs过程中的感受。Hello World程序让我们了解一门新语言的基本结构、框架和运行方式。C、Java、C#等语言的Hel
react 基础篇 1 hello React
笑望灬星辰
05-20 153
react 基础篇 1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>helloReact</title> </head> <body> <!-- 容器 和Vue 的一样 --> <div id="app"></div> <!-- 引入react核心库 -->
尚品汇项目思维导图 根据思维导图进行复习
最新发布
07-13
尚品汇项目思维导图 根据思维导图进行复习
全网最热Python3入门+进阶 更快上手实际开发
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
react useContent
04-29
React 的 useContext() hook 用于在组件间共享数据，它接收一个 context 对象（通过 React....如果我们将 MyContext.Provider 的 value 改为 'Hello React'，那么 MyComponent 会重新渲染并显示 'Hello React'。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值