专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

如果你还在为前端的布局和JS头疼，你应该看看这篇连载文章

ins518 2024-09-29 18:28:19 技术文章 196 ℃ 0 评论

新手如此入门React，我觉得你应该从下面几点开始入手学习，今天给大家分享的是第一期，后续还会不断的更新和实战的分享。

一，了解React

  1. 声明式（React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。以声明式编写 UI，可以让你的代码更加可靠，且方便调试）

2.组件化（创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据并使得状态与 DOM 分离。

3.高效（React通过和DOM的模拟，最大限度的减少与DOM的交互）

4.JSX（javascript的拓展语言，建议在React开发中使用JSX）

5.灵活（React可以和已知的库或者是框架完美的配合）

6.单向响应的数据流（React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单的原因）

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

二，第一个React实例

页面如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>
 
</body>
</html>

说明：

html的页面引入三个库，

  1. react.min.js(React的核心库)
  2. react-dom.min.js（提供与DOM相关的功能）
  3. babel.min.js (ES6代码转换为ES5代码，还支持JSX)

三，React的元素操作

元素在React应用中最小的单位，主要作用就是为了描述屏幕上输出的内容。

  const = element = <h1>n你好，hello world</h1>

不过我们在引入React的时候都是如下操作，

   <div id="example"></div>

定义一个跟节点，div的所有内容都将属于 example的 React DOM来管理，我们也把这个称为“根”DOM节点。

下一步就是将React的元素， const渲染到DOM节点中，方法如下：

const element = <h1>Hello, world!</h1>;
ReactDOM.render(
    element,# 元素
    document.getElementById('example') # 节点
);

说明：采用的方法为：ReactDOM.render()，此方法的两个重要点就是 元素和节点。

这个时候我们就会产生一个问题，我们需要在同一个节点显示多个元素该怎么办？

其实在React的特性中，元素都是不可改变的，但是我们可以通过更新的方式来达到我们需要实现的目的，比如重新创建一个元素再渲染到同一个节点，这样元素的内容就更新了。

  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>我是前端工程师小A.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}

空口无凭，我们可以通过一个实际例子来总结React的第一章学习

<!DoCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
setInterval(tick, 1000);
</script>
</body>
</html>
</html>

怎么样？是不是感觉React很简单，当然通过一个简单的hello world 还真的看不出什么东西，但是我们可以明显的感觉到React更加的注重js的编写，所有可以用js实现的就不用再去“麻烦”html，高效的DOM就是最好的一个例子。

下一篇我们接着给大家讲解React JSX（javascript的拓展语法）

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表