Hello World by React-爱红旗渠

文章目录

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

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

介绍

React 特点:

声明式设计 −React采用声明范式，可以轻松描述应用。
高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活 −React可以与已知的库或框架很好地配合。
JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − 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很简单，代码如下：

<!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://94275.cn/2017/01/09/react-hello-world/ 作者为 Zhenguo