React入门

React 开发环境搭建

需要什么文件?

只需要引入以下3个js文件即可:

  • react.js : 核心文件,基础文件
  • react-dom.js : 渲染页面中的DOM,依赖于react.js文件,引用时必须在react.js的后面引用
  • babel.js : ES6语法代码转为ES5,将JSX语法(浏览器不认识)转化为JavaScript语法(浏览器认识)

如何获取这三个文件?

使用npm的方式获取

注意:使用npm需要先安装npm,也就是安装node.js,安装node.js时会顺带安装npm

查看node.js版本 : node -v

查看npm版本 : npm -v

  • react.js

    npm i react --save

  • react-dom.js

    npm i react-dom --save

  • bable

    npm i babel-standalone --save

具体操作流程:

(1)新建项目文件夹:

(2)win+R 打开控制台,cd进入项目文件夹

(3)输入如下命令行,创建package.json文件

npm init -y

(3)下载react.js

在项目文件目录下,使用命令行 npm install react --savenpm i react --save

使用npm 比较慢,也可使用 cnpm进行下载,下载镜像不同而已

cnpm install react --save

(4)下载react-dom.js

同上 cnpm install react-dom --save
(5)下载babel.js

新建html文件,引入三大文件

(1)新建hello.html文件

(2)引入核心文件react.js

在 react -> umd -> react.development.js

(3)引入react-dom.js和babel.js文件

注意:实际上是引入的文件是react-dom.development.js文件

创建根节点

创建dom根节点:一个页面下需要有一个根节点,这个节点下的内容就会被react所管理,后续内容都在根节点下,一个页面只有一个根节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules\react\umd\react.development.js"></script>
    <script src="node_modules\react-dom\umd\react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.js"></script>
</head>
<body>
        <!--
    创建dom根节点,一个页面下需要有一个根节点,这个节点下的内容就会被react所管理
    后续内容都在根节点下,一个页面只有一个根节点
    -->
    <div id="root-dom-react">

    </div>
</body>
</html>

JSX

示例:

let myDom = <h1>你好啊,React!</h1>;

//JSX格式 : JavaScript和xml结合的一种格式

优点:

JSX格式 : JavaScript和xml结合的一种格式

  • 1.执行的效率更快

  • 2.是类型安全的,编译的过程中就能及时的发现错误

  • 3.在使用jsx的时候编写模板会更加简单和快速

简单示例和结果展示

代码:

<body>
        <!--
    创建dom根节点,一个页面下需要有一个根节点,这个节点下的内容就会被react所管理
    后续内容都在根节点下,一个页面只有一个根节点
    -->
    <div id="root-dom-react">

    </div>
</body>
</html>
<script type="text/babel">
    let myDom = <h1>你好啊,React!</h1>; //JSX格式 : JavaScript和xml结合的一种格式
    /*
    JSX格式 : JavaScript和xml结合的一种格式
    优点:
    1.执行的效率更快
    2.是类型安全的,编译的过程中就能及时的发现错误
    3.在使用jsx的时候编写模板会更加简单和快速
    */ 
    ReactDOM.render(myDom,document.getElementById("root-dom-react"));
</script>

说明:

ReactDOM.render(参数1,参数2);

参数1:所定义的jsx格式的变量

参数2:目标div

作用:将参数1渲染到参数2所在div

运行结果:

本文章仅作测试使用,从其他编辑器复制过来的,图片无法显示。

posted @ 2020-07-10 15:46  CherishTheYouth  阅读(122)  评论(1编辑  收藏