【React-2】组件开发初步探索

得强调的是，在React 16之后，React.createClass语法就没了，取代的是class Welcome extends React.Component{}，在后面的项目中会用最新版本的写。

这里暂时以0.14.7作为学习版本，核心逻辑没有大的不同，细节之处需要额外注意。

另外，browser的版本，也没有用最新的6.xx版本，用的是5.8.25.

<!DOCTYPE html>
<html>
<head><title>Learning React.js</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><script src="https://unpkg.com/react@0.14.7/dist/react.js"></script><script src="https://unpkg.com/react-dom@0.14.7/dist/react-dom.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"></script></head>
<body><div class="container"><div clas="row"><div class="col-md-12"><div id="jumbotron">  </div>    </div>    </div></div><!-- 注意在React16以后，createClass已经弃用了 --><script type="text/babel">var Jumbotron = React.createClass({render: function() {return(<div><div className="jumbotron"><h1 class="display-4">Hello, world!</h1><p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p><a className="btn btn-primary btn-lg" href="#" role="button">Learn more</a></div></div>    )}});// 将组件渲染到id为jumbotron的div中ReactDOM.render(<Jumbotron />, document.getElementById('jumbotron'));</script>
</body>
</html>

END.

参考：

https://www.youtube.com/watch?v=CVigtRUxj2I&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO&index=4

【React-2】组件开发初步探索相关推荐

React Native组件开发指南
React Native的组件开发一直处在一个比较尴尬的处境.在官方未给予相关示例与脚手架的情况下,社区中依然诞生了许许多多的React Native组件.因为缺少示例与规范,很多组件库仅含有一个in ...
React-Native 组件开发方法
前言 React Native的开发思路是通过组合各种组件来组织整个App,在大部分情况下通过组合View.Image等几个基础的组件,可以非常方便的实现各种复杂的跨平台组件,不过在需要原生功能支持. ...
Storybook:组件开发
title: Storybook date: 2022-08-31 23:20:04 tags: React Storybook 组件开发 categories: 框架 React 组件 Storyb ...
Vite + React 组件开发实践
简介: 毫不夸张的说,Vite 给前端带来的绝对是一次革命性的变化.或者也可以说是 Vite 背后整合的 esbuild . Browser es modules.HMR.Pre-Bundling 等 ...
【天赢金创】我是如何看待React 组件开发
从 auto-ellipsis 看 React 组件开发 auto-ellipsis 是一个用于解决文本超长溢出截断并加 ... 的 React 组件. 关于 React 随着 React 的火热,随 ...
react测试组件_测试驱动的开发，功能和React组件
react测试组件 This article is part of my studies on how to build sustainable and consistent software. In ...
react复习总结（1）--react组件开发基础
这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...
从零开始的 React 组件开发之路 (一)：表格篇
React 下的表格狂想曲 0. 前言欢迎大家阅读「从零开始的 React 组件开发之路」系列第一篇,表格篇.本系列的特色是从需求分析.API 设计和代码设计三个递进的过程中,由简到繁地开发一个 ...
React.js组件化开发第一步(框架搭建)
开始前安装 node.js; 安装 cnpm; 安装 yarn; 安装完成yarn后, 将镜像替换成国内的: $ yarn config set registry 'https://registry ...

【React-2】组件开发初步探索

【React-2】组件开发初步探索相关推荐

最新文章

热门文章