最近在上React课程的时候,发现好多同学不会看文档,所以在这里写一篇文章,希望能给同学们一点点启发。
  我们首先打开React官方网站——https://react.docschina.org/docs/getting-started.html,我建议各位从头开始看,首先看到最右边的导航栏里第一条是安装,这肯定就是我们React学习的起步了:
  安装里面点击开始,这里面有好多选择,可以供我们体验React、在网站中添加React等,可以花一点时间在这里看看,看得懂作为了解,看不懂也无所谓,这里涉及到的概念比较多,没必要刚开始就全消化掉,一口吃不成胖子,步子迈大了,咔嚓,容易扯着蛋。
    接下来我们在右边导航栏安装=>在网站中添加React,这些是在其中做了一个小demo让你熟悉React。对照方案自己敲一下,接下来是我们要讲的重点了。
    点击核心概念,找到Hello,World,到这一步的时候好多同学就开始蒙了,我到底要引入几个js文件,其实是需要我们引入三个,
 
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    要注意,顺序不能错,引入顺序不对,也会导致错误另外上述引用的适用于生产环境(也就是被压缩过)的代码,然后我们将代码写成下述即可在页面中的div#root中插入”Hello,World“的h1标签
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello,World</title>
</head>
<body>
    <div id="root"></div>
    <!--注意这里有个div#root-->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        // 注意这里改成type="text/babel"
        ReactDOM.render(
            <h1>Hello,World</h1>,
            document.getElementById("root")
        )
    </script>
</body>
</html>
如果上述代码成功,那么我们的React入门就算完成了。接下来,如果不希望用云端的script,也可以保存到本地,比较快的办法是,用浏览器打开上述页面,然后页面右键打开源代码,在源代码中找到我们引入的js,全选然后在本地新建三个对应名字的js文件分别粘贴进去即可。
 
 想继续学习,请继续查看下一篇文章
 
 
 
 
 
 

小白学习React官方文档看不懂怎么办?的更多相关文章

  1. 小白学习React官方文档看不懂怎么办?3.元素渲染

    直接上代码 const element = <h1>Hello, world</h1>; ReactDOM.render(     element,      document ...

  2. 小白学习React官方文档看不懂怎么办?2.JSX语法

      接下来我们就要讲到JSX语法了,在我们讲它之前,我们先引入一个概念叫语法糖.     听到这个名字首先我们可能会想到一个词叫”糖衣炮弹“,那么什么叫糖衣炮弹呢,就是给你说各种好听的话,来迷惑你,但 ...

  3. React官方文档笔记之快速入门

    快速开始 JSFiddle 我们建议在 React 中使用 CommonJS 模块系统,比如 browserify 或 webpack. 要用 webpack 安装 React DOM 和构建你的包: ...

  4. 学习android 官方文档

    9.29 1. 今天,FQ,看到android studio中文网上有一个FQ工具openVPN,我就使用了. 之前用过一个FQ工具开眼,但由于网速慢,我就弃用了. 2. 现在,我就可以FQ去andr ...

  5. requests库的学习——跟随官方文档

    发送GET请求: import requests r=requests.get("http://www.kekenet.com/") 如果需要传递参数可以有以下几种方法: impo ...

  6. 照着官方文档学习react

    笨人学习法 10000个小时策略来学习,因为笨.先照着官方文档敲一遍,写一遍. 准备 先要准备环境.搭建一个基于webpack的react环境:Hello ReactJS. demo: https:/ ...

  7. 看官方文档学习springcloud搭建

    很多java的朋友学习新知识时候去百度,看了之后一知半解,不知道怎么操作,不知道到底什么什么东西,那么作为java码农到底该怎么学习额 一  百度是对还是错呢? 百度是一个万能的工具,当然是对也是错的 ...

  8. 学习h264 的语法规则,如何才能看懂H264 的官方文档

    1. 今天想查h264 的帧率,查找资料如下: 首先要解析sps,得到两个关键的数值: num_units_in_tick, time_scale fps=time_scale/num_units_i ...

  9. webpack新手名词解释……妈妈再也不担心我看不懂webpack官方文档了

    __dirname : 在任何模块文件内部,可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径. path.resolve(): 方法将一系列路径或路径段解析为绝对路径. 语法: p ...

随机推荐

  1. Arduino学习笔记⑧ 红外通信

    1.前言     红外通信是一种利用红外光编码进行数据传输的无线通信方式,在目前来说是使用非常广泛的.生活中常见电视遥控器,空调遥控器,DVD遥控器(现在估计是老古董了),均使用红外线遥控.使用红外线 ...

  2. Spring Boot 2.X(十二):定时任务

    简介 定时任务是后端开发中常见的需求,主要应用场景有定期数据报表.定时消息通知.异步的后台业务逻辑处理.日志分析处理.垃圾数据清理.定时更新缓存等等. Spring Boot 集成了一整套的定时任务工 ...

  3. vue 2.0 点击添加class,同时删除同级class

    <template> <div class="n-header"> <ul class="title-wrapper"> & ...

  4. Linux进程组和会话

    Linux的进程相互之间有一定的关系.比如说,在Linux进程基础中,我们看到,每个进程都有父进程,而所有的进程以init进程为根,形成一个树状结构.我们在这里讲解进程组和会话,以便以更加丰富的方式了 ...

  5. redis操作总结

    一.redis 终端操作命令: 1.redis-server.exe redis.windows.conf #指定配置文件启动 2.redis-cli #链接redis数据库 3.select 1 # ...

  6. 深入理解大数据架构之——Lambda架构

    目录 传统系统的问题 Lambda架构简介 Lambda架构关键特性 数据系统的本质 Lambda的三层架构 Lambda架构组件选型 总结 原文链接:https://jiang-hao.com/ar ...

  7. Java 向数组中添加一个元素

    方法 一般数组是不能添加元素的,因为他们在初始化时就已定好长度了,不能改变长度. 向数组中添加元素思路: 第一步:把 数组 转化为 集合 list = Arrays.asList(array); 第二 ...

  8. 拼多多后台开发面试真题:如何用Redis统计独立用户访问量

    众所周至,拼多多的待遇也是高的可怕,在挖人方面也是不遗余力,对于一些工作3年的开发,稍微优秀一点的,都给到30K的Offer,当然,拼多多加班也是出名的,一周上6天班是常态,每天工作时间基本都是超过1 ...

  9. python中函数名后面带()和不带()的区别。

    今天天气不冷,微热.9.18警钟长鸣,国人当自强不息. python中有时候会遇到一个函数名称后面没有带()被调用,这是为什么呢?看下面这个例子. def target(): #定义一个函数 prin ...

  10. map和set的使用及top K问题

    1.map和set的应用和比较 map和set都是关联式容器,底层容器都是红黑树. map以键值对的形式进行存储,方便进行查找,关键词起到索引的作用,值则表示与索引相关联的数据,以红黑树的结构实现,插 ...