创建React工程

最新推荐文章于 2022-09-20 11:59:34 发布

menglong0329

最新推荐文章于 2022-09-20 11:59:34 发布

阅读量248

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/menglong0329/article/details/80979061

版权

React Native 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、下载React编译环境包

官方网址：https://www.facebook.github.io/react/

百度网盘链接：https://pan.baidu.com/s/1w7BaI7GeomHJxypkw-XUnA 密码：2glq

注意：在下载的build文件夹中的没有browser.min.js文件，有两种方式：

1.可以直接在项目中添加链接，自动加载。链接： https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js

2.可以在build文件夹中创建browser.min.js文件，打开连接，将之内容复制到这个文件中。

二、在桌面上创建项目文件夹，例如ReactDemo

1.将build文件夹复制到ReactDemo中。

2.将创建的工程文件夹添加到Atom编辑器中。

File->Add Project Folder 或是 Ctrl+Shift+A

3.导入成功。

三、编写模板代码

在ReactDemo工程下右键->New File->index.html
index代码

<!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语法转换成JavaScrept语法 -->
    <script src="./build/browser.min.js" charset="utf-8"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
  </head>
  
  <body>
    <!-- React渲染的模板内容会插入到这个DOM节点中，作为一个容器 -->
    <div id="container"></div>
  </body>

<!-- 在React开发中，使用JSX语言，与JavaScrpt不兼容，在JSX的地方，要设置一下type为text/babel -->
<!-- babel是一个转换编辑器，把ES6转换成可以在浏览器运行的代码 -->
<script type="text/babel">
  // 在此处编写React代码
</script>

</html>

四、案例：在浏览器显示“Hello React”

<!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语法转换成JavaScrept语法 -->
    <script src="./build/browser.min.js" charset="utf-8"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
  </head>

  <body>
    <!-- React渲染的模板内容会插入到这个DOM节点中，作为一个容器 -->
    <div id="container"></div>
  </body>

<!-- 在React开发中，使用JSX语言，与JavaScrpt不兼容，在JSX的地方，要设置一下type为text/babel -->
<!-- babel是一个转换编辑器，把ES6转换成可以在浏览器运行的代码 -->
<script type="text/babel">
  // 在此处编写React代码

  /*
  React.render()是React最基本的方法，用于将moan转换成HTML语言，并插入到指定的DOM节点中。
  其包含三个参数：
  1.模板的渲染的内容（HTML形式）
  2.这段模板需要插入的DOM节点（HTML形式），本程序中是id为container的节点。
  3.是一个回调函数。一般不会使用。
  */
  ReactDOM.render(
    <h1>Hello React</h1>,
    document.getElementById("container")
  );

</script>

</html>

运行结果：

五、工程结构

menglong0329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建React工程

一、下载React编译环境包官方网址：https://www.facebook.github.io/react/百度网盘链接：https://pan.baidu.com/s/1w7BaI7GeomHJxypkw-XUnA 密码：2glq注意：在下载的build文件夹中的没有browser.min.js文件，有两种方式： 1.可以直接在项目中添加链接，自动加载。链接：https://cdnjs....
复制链接

扫一扫