前言

React是Facebook在2011年开发的前端js库，当时FB对市场上的mvc框架都不满意，于是乎自己写了一套，用来架构Instagram，直到2013年开源。React是基于组件，构建可复用的UI组件。

一、React是什么？

React.js 简单地理解为，React.js 将帮助我们将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

React.js 不是一个框架，它只是一个库。它只提供 UI 层面的解决方案。在实际的项目当中，它并不能解决我们所有的问题，需要结合其它的库，例如 Redux、React-router 等来协助提供完整的解决方法。

二、使用原生的方法实现来实现点击按钮改变文本

<body>// 文本<h2 class="title"></h2>// 点击按钮 改变文本<button class="btn">改变文本</button><script>let message = "Hello World";// 通过getElementsByClassName 获取title元素const titleEl = document.getElementsByClassName('title')[0];// innerHTML 来改变文本titleEl.innerHTML = message;// 通过getElementsByClassName 获取button元素const btnEl = document.getElementsByClassName('btn')[0];// 添加点击事件来改变 titlebtnEl.addEventListener('click', (e) => {message = "Hello React";titleEl.innerHTML = message;})</script></body>

三、使用React实现来实现点击按钮改变文本

<!-- 添加React的依赖 -->
<script src="../../react插件/react.development.js"></script>
<script src="../../react插件/react-dom.development.js"></script>
<script src="../../react插件/babel.min.js"></script><body><div id="app">app</div><script type="text/babel">// 使用React的类组件，需要有constructor() {super()}class App extends React.PureComponent {constructor() {super();// state是保存数据的this.state = {message: "Hello World"}}render() {return (<div>// {} 是jsx语法<h2>{this.state.message}</h2><button onClick={e => this.changeText()}>改变文本</button></div>)}changeText() {// setState()是为了修改state里面的数据this.setState({message: "Hello React"})}}// 把这个组件定义到我要的位置ReactDOM.render(<App/>, document.getElementById('app'));</script></body>

总结

我们已经进入到React的学习了，ReactJs是基于组件化开发的，一个页面可以通过多个小组件组合而成，复用性高。

学习React[一]相关推荐

怎样快速学习React
react简单学习路线(实用版) 学习一门新的技术之前有必要了解一下该技术在专业领域的评价,使用的领域,以及整体的学习路线,总之尽可能多的在入坑之前了解相关方面的信息.不要什么都不去查就直接学了,这个 ...
学习react心得及总结
注意学习这个在D盘:小红书第一部分的案例react/new-my-app 小红书第二部分的案例react/make-redux 小红书第三部分的案例react/my-app-higher 并且里面有说 ...
学习react的心路历程（一）
我是react小白,网上的react教程成堆成堆的,我就不在这里写什么教程,巴拉巴拉以下我的学习"心得"! 我是在"技术胖"的带领下学习的react,这个教程是 ...
react学习预备知识_在10分钟内学习React基础知识
react学习预备知识 If you want to learn the basics of React in the time it takes you to drink a cup of coff ...
重新学习 React (二) Diffing 算法
前几天面试问道 react 的相关知识,对我打击比较大,感觉对 react 认识非常肤浅,所以在这里重新梳理一下,想想之前没有仔细思考过的东西. 另外有说的不对的地方还请帮我指正一下,先谢谢各位啦. ...
新手学习 react 迷惑的点(完整版)
网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以来讲 ...
【学习react中遇到的坑:内存泄漏报错】
学习react中遇到的坑:内存泄漏报错对就是这个错误 Can't perform a React state update on an unmounted component. This is a ...
通过构建Paint App学习React Hooks
According to people in the know, React Hooks are hot, hot, hot. In this article, we follow Christian ...
如何从零学习 React 技术栈
为什么要学习 React? 首先,React 相较于其他框架,其生态圈发展最为完整成熟,有非常多现成的.完整的解决方案. 其次,它适用于大中型应用的开发,便于团队中多人之间协作,很多大厂都在正式的项目 ...
学习React (3) - 如何用Jumbotron
已经学会了怎么用React来写Hello World, 那么下一步就开始学习React那些组件.现在就先讲讲Jumbotron. 这个Jumbotron 大部分用在bootstrap里面的,采用官方的 ...

学习React[一]

前言

一、React是什么？

二、使用原生的方法实现来实现点击按钮改变文本

三、使用React实现来实现点击按钮改变文本

总结

学习React[一]相关推荐

最新文章

热门文章

学习React[一]

前言

一、React是什么？

二、使用原生的方法实现来实现 点击按钮改变文本

三、使用React实现来实现 点击按钮改变文本

总结

学习React[一]相关推荐

最新文章

热门文章

二、使用原生的方法实现来实现点击按钮改变文本

三、使用React实现来实现点击按钮改变文本