ReactNative--创建React工程

创建一个项目：

先创建一个文件夹，然后把那个build文件夹里的东西复制过去

然后在file中选择add project folder

就从Atom中打开了这个项目

虽然build文件夹中的js文件很多，但是不一定都用的到

一定会用的到的有三个：react.js react-dom.js browser.min.js

其中browser.min.js是我们自己创建的，就是那个网页中的内容

下面创建一个HTML文件

然后导入需要的js文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <!-- react.js 是React的核心库 -->
    <script src="./build/react.js" charset="utf-8"></script>
    <!-- react-dom.js 的作用是提供与dom相关的功能 -->
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <!-- browser.min.js的作用是讲jsx语法转换成JavaScript语法 -->
    <script src="./build/browser.min.js" charset="utf-8"></script>
    
  </head>
  <body>
    
  </body>
</html>

如果最后一个用的是网址，不是本地文件的话，就在src后面写上网址就可以了

在React开发中，使用jsx，跟JavaScript不兼容，在使用jsx的地方，要设置type：text/tabel

babel是一个转换编译器，ES6转成可以在浏览器中运行的代码

完整的模板

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <!-- react.js 是React的核心库 -->
    <script src="./build/react.js" charset="utf-8"></script>
    <!-- react-dom.js 的作用是提供与dom相关的功能 -->
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <!-- browser.min.js的作用是讲jsx语法转换成JavaScript语法 -->
    <script src="./build/browser.min.js" charset="utf-8"></script>
    
  </head>
  <body>
    <!-- React渲染的模板内容会插入到这个dom借点中，作为一个容器 -->
    <div id="container">
      
    </div>
  </body>

<!-- 在React开发中，使用jsx，跟JavaScript不兼容，在使用jsx的地方，要设置type：text/tabel -->
<!-- babel是一个转换编译器，ES6转成可以在浏览器中运行的代码 -->
  <script type="text/babel">

  //在此写React代码

  </script>


  
</html>

然后写一个小程序，展示一行字

Script中的代码为

  <script type="text/babel">

  //在此写React代码

  // 需求：渲染一行标题，显式"Hello React"
  /*
  ReactDOM.render()
  React的最基本方法，用于将模板转换成HTML语言，渲染dom，并插入指定的dom节点中

  3个参数
  第一个：模板的渲染内容（HTML形式）
  第二个：该段模板需要插入的dom节点（本程序中，是id为container的div节点）
  第三个：渲染后的回调，一般不用

  */  

  ReactDOM.render(
    <h1>hello react</h1>,
    document.getElementById("container")
  );


  </script>

然后保存，右键，选择open in browser

在浏览器中打开，就出现了hello React

如果没有字出现，可能是代码不对或者没有进行保存