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

新手如此入门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实例

页面如下

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Hello React!

ReactDOM.render(

Hello, world!

document.getElementById('example')

);

说明：

html的页面引入三个库，

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

三，React的元素操作

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

 
 
 
 
  
  
  
  const = element = n你好，hello world

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

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

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

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

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

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

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

Hello React!
function tick() {
const element = (
Hello, world!
现在是 {new Date().toLocaleTimeString()}.
);
ReactDOM.render(
element,
document.getElementById('example')
);
}
setInterval(tick, 1000);

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

Hello, world!

n你好，hello world

Hello, world!

Hello, world!

我是前端工程师小A.

Hello, world!

现在是 {new Date().toLocaleTimeString()}.