React入门：轻松解决前端的布局和JS_JavaScript

React入门：轻松解决前端的布局和JS

2020-12-22 23:33今日头条聊互联网金融科技 JavaScript

新手如此入门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的页面引入三个库，

react.min.js(React的核心库)
react-dom.min.js(提供与DOM相关的功能)
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>