react入门--------安装react

创建一个单页面应用

Create React App是开始构建新的React单页应用程序的最佳方式。 它可以帮助您快速集成您的开发环境,以便您可以使用最新的JavaScript功能,它提供了一个很好的开发体验,并可以有效优化您的应用程序,提升开发效率。

$ npm install -g create-react-app
$ create-react-app hello-world
$ cd hello-world
$ npm run start
上面只是创建了一个React应用,不需要关心也需要不处理后端逻辑或数据库; 
它只是一个React的前端环境集成工具,负责创建前端的开发环境,所以你可以使用它与你想要的任何后端进行交互。 它内部使用了webpack,Babel和ESLint,你可以单独配置它们,来达到定制化的效果。

在已经开发的项目中使用React

您不需要重新编写应用程序即可开始使用React。
我们建议将React添加到应用程序的一小部分,例如单个小部件,以便您可以看到它是否适合您的用例。
虽然React可以在没有构建工具的情况下使用,但我们建议使用并设置它,以便提高生产力。 现代构建工具通常包括:

    • 一个包管理器,例如npm

    • 一个打包工具,例如webpack

    • 一个编译工具,例如Babel

    • 安装React

      建议使用Yarn或npm来管理React前端模块的依赖。

      通过Yarn安装:

      yarn add react react-dom

      通过npm安装:

      npm install --save react react-dom
    • 使用ES6和JSX

      建议您使用Babel中的React配置让您在JavaScript代码中可以使用ES6和JSX。 ES6是一组现代JavaScript特性,使开发更容易,JSX是对React非常有效的JavaScript语言的扩展。

      具体请百度Babel如何在许多不同的构建环境中配置Babel。首先 确保你安装了babel-preset-reactbabel-preset-es2015,并已经在.babelrc配置中启用它们。

      使用ES6和JSX写一个HelloWorld的例子

      建议使用像webpackBrowserify这样的打包工具,以便您可以编写模块化代码,它们可以将不同的代码模块打包捆绑到一起,用来优化的代码加载时间。

      一个简单的React示例如下所示:

      这里我使用的是bower来安装react和react-dom。

      mkdir hello-world & cd hello-world
      bower install react babel --save
      touch index.html

      然后在index.html中写入以下内容:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <script src="bower_components/react/react.js"></script>
          <script src="bower_components/react/react-dom.js"></script>
          <script src="bower_components/babel/browser.js"></script>
          <script type="text/babel">
              var doc = document;
              ReactDOM.render(
                      <h1>你好,react</h1>,
                      doc.getElementById('app')
              )
          </script>
          <title>ReactDOM.render</title>
      </head>
      <body>
      <div id="app"></div>
      </body>
      </html>

      最后在浏览器中打开这个页面,就可以看到最终效果。

 
posted @ 2017-08-02 13:10  豆浆油条123  阅读(267)  评论(0编辑  收藏  举报