react笔记一 安装/开发环境搭建

react安装主要有两种方式

1.下载react库或者直接使用cdn库

    使用的库说明及案例代码:

  • react.min.js - React 的核心库

  • react-dom.min.js - 提供与 DOM 相关的功能

  • babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>react example</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
    <div id="example"></div>
    <script type="text/babel">
        ReactDOM.render(
        <h1>Hello, world!</h1>, document.getElementById('example') );
    </script>
</body>

</html>

右键浏览

    注意:

    在浏览器中使用 Babel 来编译 JSX 效率是非常低的,生产环境中不建议使用

    如果我们需要使用 JSX,则 <script> 标签的 type 属性需要设置为 text/babel。

2.通过npm使用react

    win+r打开终端,按下面命令依次执行

    安装react库 --npm install -g create-react-app 此处笔者以及安装过,就不再执行该命令。如果安装过慢可以换成淘宝的资源安装

    创建项目--create-react-app [name]

    启动 --npm start

猜你喜欢

转载自blog.csdn.net/zYjmor/article/details/82588831
今日推荐