美文网首页
React教程(-一 ) -- 快速构建React开发环境

React教程(-一 ) -- 快速构建React开发环境

作者: miner敏儿 | 来源:发表于2018-08-20 14:02 被阅读0次

    React 初接触

    一. react的安装

    1). 使用方法
    可以直接下载使用 <a href="http://facebook.github.io/react/ ">http://facebook.github.io/react/ </a>下载最新
    2). 直接使用BootCDN的React CDN库.

    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
    

    在.html 文件中直接引用

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

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

        <script type="text/babel">
            ReactDOM.render(
                <h1>Hello, world!</h1>,
                document.getElementById('example')//将一个 h1 标题,插入 id="example" 节点中
            );
        </script>
    

    二. 使用npm来安装React

    系统要支持node.js和npm
    先验证有没有安装
    node -v
    npm -v

    国内使用npm速度很慢,可以使用淘宝镜像cnpm命令代替npm

     npm install -g cnpm --registry=https://registry.npm.taobao.org
    

    这样就可以使用cnpm来安装模块了

     cnpm install [name]
    

    使用create-react-app快速构建React 开发环境
    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

    create-react-app 自动创建的项目是基于 Webpack + ES6 。

    执行以下命令创建项目:
    
    $ cnpm install -g create-react-app
    $ create-react-app my-app
    $ cd my-app/
    $ npm start
    

    你可以在 <code>src/App.js</code> 文件中修改。

    如果我在文件中需要使用react-routes-dom
    使用yarn add react-router-dom添加依赖 会在package.json 的dependencies 显示 在node_module中也会有此文件夹

    这些东西官网上面都有 , 但是不要只是看,要动手写 ,自己算是刚接触react 做个笔记吧

    相关文章

      网友评论

          本文标题:React教程(-一 ) -- 快速构建React开发环境

          本文链接:https://www.haomeiwen.com/subject/wnxliftx.html