创建 React工程(学习笔记)

最新推荐文章于 2024-09-03 09:40:53 发布

Man Up技术服务支持

最新推荐文章于 2024-09-03 09:40:53 发布

阅读量455

点赞数

文章标签： atom react

本文链接：https://blog.csdn.net/qianxiao120/article/details/54140854

版权

1.在本地新建一个文件夹例如：Hello React

2.把解压好的React包中的build 复制粘贴到Hello React文件中。

3.用ATOM打开Hello React这个文件工程结构如图：（其中Hello React.html和index.html是我自己创建的）

4.我把 index.html代码展示下，里面注解挺全的，我就不一一说明了

<!DOCTYPE html>
<!--模板页面-->
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <!--1.导入react 文件-->

    <!--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>

    <!--浏览器引用browser.min.js 和 上面的两者任选其一-->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->

    </script>

  </head>
  <body>

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

    </div>
  </body>


<!--2.react 编码区-->

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

  //在此处编写React代码

  //需求：渲染一行标题 显示“Hello React”

  /*
  ReactDOM.render()
  React的最基本方法，用于将模板转换成HTML语言，渲染DOM，并插入指定的DOM节点中

  支持三个参数：
  1.模板的渲染内容（HTML形式）
  2.这段模板需要插入的DOM节点（本程序中，id为container的div节点）
  3.渲染后的回调，一般不用
  */



 ReactDOM.render(
   <h1>Hello React</h1>,

  document.getElementById('container')

 );

</script>

</html>

5.如果你的ATOM已经安装了open in browser 这个插件，那么你直接在index.html右键鼠标选择open in browser 即可在浏览器中看到效果