Android程序猿的react学习之路-入门指南篇

2023年7月19日 89次阅读 来源: 牛晓伟

前言

我是一名Android开发程序员，开发Android也有些年头了，最近在学习react知识(react是如此之火)，但是自己对于前端开发知识又知之甚少，在国内网站上也看到一些react相关的知识内容，但是感觉都是千篇一律，所以就到官网上来进行系统的学习，在学习过程中自己就想着把官网的英语文档翻译为中文，希望能帮助大家，同时也能锻炼自己的英文水平（由于本人的英文水平有限，翻译有误的地方希望大家多多提建议）
以下内容是对react官网 进行了翻译，同时也会与Android进行对比，有了对比学习的的效率就高，就会有深度，也加入了自己的一些总结。

入门指南

一个JSFiddle的react例子（JSFiddle是一个前端在线编辑，编译web app）

最简单的了解React的方法是使用以下JSFiddleHello World例子：

使用npm学习React（npm是一个包管理和分发工具）

准备材料

  • nodejs,npm安装（windows），npm类似于maven中的中央仓库的意思。
  • 一个CommonJS的模块系统的构建工具（browserify或webpack）任意一个都可以。webpack构建工具类似于android中的ant或gradle构建工具，解决工程中的依赖关系，并负责编译打包工程。
  • react和react-dom包安装。类似于java中的类库。
  • 编辑工具sublime（还有其他种类的编辑工具），sublime是一个轻量级的编辑工具类似于android studio(它是一个重量级的开发工具)，sublime可以安装各种需要的插件，在学习react首先需要安装Babel插件（Babel的作用后面有解释）

使用npm下载react和react-dom示例：
安装react和react-dom包并使用browserify来编译打包你的程序

  $ npm install --save react react-dom babelify babel-preset-react
  $ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

安装react和react-dom使用webpack来编译打包你的程序

  $ npm install --save react react-dom babel-preset-react
  $ webpack

不使用npm来学习React

如果你还未准备好使用npm，可以直接下载starter kit（工具包），该工具包包含react和react-dom预制包
Download Starter Kit 0.14.7
解压下载好的starter kit文件，在解压的starter kit的根目录下创建一个helloworld.html的文件，该文件内容是:

  <!DOCTYPE html>
    <html>
     <head>
       <meta charset="UTF-8" />
       <title>Hello React!</title>
       <script src="build/react.js"></script> <script src="build/react-dom.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   </head>
   <body>
     <div id="example"></div>
     <script type="text/babel">
         ReactDOM.render( 
             //JSX代码
            <h1>Hello, world!</h1>, 
            document.getElementById('example') ); 
      </script>
     </body>
  </html>

JavaScript中的类似于xml的语法的代码我们叫它JSX，点击JSX syntax可以了解更多。为了把JSX代码转化为javascript代码我们使用<script type=”text/babel”>来导入Babel，Babel是真正在浏览器里起转换作用。

单独的文件

你可以把上面的JSX代码块放入一个单独的文件中，假设该文件名为src/helloworld.js,文件内容如下：

    ReactDOM.render(
        <h1>Hello, world!</h1>, 
        document.getElementById('example')
    );

然后在helloworld.html文件中引用helloworld.js：

  <script type="text/babel" src="src/helloworld.js"></script>

注意有些浏览器（chrome等）将会加载文件失败除非打开一个http的服务器。

离线转换

首先安装Babel命令行工具，需要npm：

  npm install --global babel-cli
  npm install babel-preset-react

然后你就可以使用下面命令把JSX转换为普通的javascript代码：

  babel --presets react src --watch --out-dir build

注意：如果你使用的是ES2015,你还得下载babel-preset-es2015包

build/helloworld.js文件内容是自动更新的的只要源文件发生改变。Babel CLI documentation可以了解更多关于Babel的知识。

转换以后build/helloworld.js的文件内容：

    ReactDOM.render(
       React.createElement('h1', null, 'Hello, world!'), 
      document.getElementById('example')
    );

总结

看了上面的内容您应该对react代码是什么样子，开发react需要哪些材料有了初步的了解，具体详情可以看react官网，有错误的地方欢迎拍砖。

期待别的章节翻译……

    原文作者：牛晓伟
    原文地址: https://www.jianshu.com/p/ce68ab32c330
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞