创建React项目工程及JSX相关语法_新建ant-design-pro react项目,使用jsx语法-优快云博客

本文链接：https://blog.youkuaiyun.com/a821814989/article/details/53809518

一、创建项目文件：
1、在pc上创建一个文件夹，名字可以随便取，用来保存以后开发react项目的工程文件夹。（本人是将在D盘中创建了一个名为React Demo的文件夹）
2、在React Demo文件夹中创建工程文件夹Hello React，工程文件夹中必须包含React开发的JS包(build文件，在React环境搭配文章中已经下载好)
这里写图片描述
在此步骤一定要注意了，上篇博客中提到了一个名为browser.min.js文件，如果是用本地的这个文件，一定要将这个文件添加到build文件夹中，再将build文件夹添加到你的工程文件夹里。
3、使用开发编辑器Atom将工程文件夹打开：
这里写图片描述
完成后将会在编辑器中看到你所添加的工程文件夹

二、创建React开发模板：
1、在已经创建好的工程文件夹下面新建一个名为index.html的文件，步骤如图所示
这里写图片描述
2、打开index.html文件，然后编写以下的代码块

<!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语法，在这里一定要注意了，如果引用本地的此js文件就如下添加即可，如果是使用网络的，则这里输入的应该是js所在网址-->
    <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/babel"-->
  <!--babel是一个转换编译器，可以将ES6转成可以在浏览器中运行的代码-->
  <script type="text/babel">

  //在此处编写React代码
  </script>
</html>

至此React工程模板就算创建完成了，我们以后在开发React项目的时候就可以不需要再重复编写以上的代码，直接可以复制使用。

三、创建第一个React小程序以及JSX相关语法：
1、在Hello React项目文件夹下创建一个新的html文件，文件名取名为Hello React.html
2、将index.html文件中的工程模板复制粘贴过来
3、然后在编写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语法转换成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/babel"-->
  <!--babel是一个转换编译器，可以将ES6转成可以在浏览器中运行的代码-->
  <script type="text/babel">

  //在此处编写React代码

  //需求：渲染一行标题，显示"Hello React"
  //
  /**
    这里首先就需要用到一个ReactDOM.render()的方法
    ReactDOM.render()：React的最基本方法，用于将模板转成Html语言，渲染DOM并插入指定的DOM节点中
    此方法的3个参数：
    第一个：模板的渲染内容(HTML形式)
    第二个：这段模板需要插入的DOM节点(本程序中值得是以id为container的div节点)
    第三个：渲染后的回调，一般不使用
  **/

    // ReactDOM.render(
    //   <h1>Hello React</h1>,
    //   document.getElementById("container")
    // );


    /**
        JSX入门
        JSX不是一门新的语音，是个语法(语法糖)
    **/
    //1、JSX必须借助React环境运行
    //2、JSX标签其实就是HTML标签，只不过我们在JavaScript中书写这些标签的时候，不需要使用（""）括起来，
    //可以像XML一样书写(例如下述例子中的<h1>)
    // ReactDOM.render(
    //   <h1>Hello React</h1>,
    //   document.getElementById("container")
    // );

    //3、转换：JSX语法能够让我们更加直观的看到组件的DOM结构，但是不能直接在浏览器上运行,最终会转化成JavaScript代码在浏览器上运行
    //下述例子是上述例子中JSX转成JavaScript后的样式，其中React.createElement();中三个参数意思分别是：
    //第一个：所用到的标签，  第二个：这个标签的属性，可以将标签的属性作为一个对象放在此处，第三个：标签下的子节点
    // ReactDOM.render(
    //   React.createElement("h1",null,"Hello React"),
    //   document.getElementById("container")
    // );

    //4、如何在JSX中运行JavaScript代码
    //方法：使用{}括起来，{表达式}

    var text="大神打类开发";
    ReactDOM.render(
      <h1>{text}</h1>,
      document.getElementById("container")
    );

    //5、其他语法:例如属性、设置样式、事件绑定
  </script>
</html>