文章目录
  1. 1. 介绍
  2. 2. 安装环境
  3. 3. 创建Hello World
  4. 4. 运行
  5. 5. 创建成功
  6. 6. 参考地址

React 是一个用于构建用户界面的 JAVASCRIPT 库。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

介绍

React 特点:

  1. 声明式设计 −React采用声明范式,可以轻松描述应用。
  2. 高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
  3. 灵活 −React可以与已知的库或框架很好地配合。
  4. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
  5. 组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
  6. 单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

安装环境

npm install -g create-react-app

创建Hello World

create-react-app hello-world

运行

cd hello-world
npm start

创建成功

执行命令的输出结果如下:

Success! Created hello-world at /Users/zhenguo/Documents/develop/react/hello-world
Inside that directory, you can run several commands:

npm start

Starts the development server.

npm run build

Bundles the app into static files for production.

npm test

Starts the test runner.

npm run eject

Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd hello-world
npm start

Happy hacking!

执行效果如下:

react-hello-world-preview

以上是 React 给我们创建的默认项目。其实时间 Hello World很简单,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.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>

直接保存本地就可以看到 “Hello world!” 了!

参考地址

https://facebook.github.io/react/docs/installation.html

http://www.runoob.com/react/react-tutorial.html


本文地址 http://ihongqiqu.com/2017/01/09/react-hello-world/ 作者为 Zhenguo

author:Zhenguo
Author: Zhenguo      Blog: http://ihongqiqu.com/     Email: jinzhenguo1990@gmail.com
I have almost 6 years of Android application development experience and have a keen interested in the latest emerging technologies. I use my spare time to turn my experience, ideas and love for Android tech into informative articles, tutorials and more in hope to help others and learn more.
文章目录
  1. 1. 介绍
  2. 2. 安装环境
  3. 3. 创建Hello World
  4. 4. 运行
  5. 5. 创建成功
  6. 6. 参考地址
返回顶部