最近在上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. 20.discuz论坛-实现伪静态

    部署discuz论坛 1.直接上配置文件--->>> [root@web01 conf.d]# vim discuz.cheng.com.conf server { listen 8 ...

  2. 14.Linux压缩/打包

    今天来讲解一下压缩和打包的相关命令,首先得先明确两个概念,即:压缩和打包 压缩:将文件或目录进行压强,使文件或目录大小变小 打包:表示将目录中的所有内容,捆绑在一起,方便传输,打包后的文件会变大,不一 ...

  3. springboot security+redis+jwt+验证码 登录验证

    概述 基于jwt的token认证方案 验证码 框架的搭建,可以自己根据网上搭建,或者看我博客springboot相关的博客,这边就不做介绍了.验证码生成可以利用Java第三方组件,引入 <dep ...

  4. 百万年薪python之路 -- 推导式

    2.1列表推导式 首先我们先看一下这样的代码,给出一个列表,通过循环,想列表中添加1~10: li = [] for i in range(1,11): li.append(i) print(li) ...

  5. Fiddler抓包和工作原理

    一.概述 Fiddler是一款免费且功能强大的数据包抓取软件.它通过代理的方式获取程序http通讯的数据, 可以用其检测网页和服务器的交互情况,能够记录所有客户端和服务器间的http请求, 支持监视. ...

  6. Vue 的准备

    ## .es6的基本语法 ​ let---是局部作用于,不会存在变量提升,变量不能重复声明 ​ const--局部作用域,不会存在变量提升 不能重复声明,只声明常亮,不可变的量 ​ ```javasc ...

  7. Android9.0 如何区分SDK接口和非 SDK接口

    刚刚有同学问我,不太了解 "非SDK接口" 是什么意思?android9.0有什么限制 ?apache的http也有限制 ? 而且现在的大部分系统都升级上来了,黑名单.灰名单和白名 ...

  8. Spring MVC（3）Spring MVC 高级应用

    一.Spring MVC 的数据转换和格式化 前面的应用,都只是用HandlerAdapter去执行处理器. 处理器和控制器不是一个概念,处理器是在控制器功能的基础上加上了一层包装,有了这层包装,在H ...

  9. Type of the default value for 'songs' prop must be a function

    eslint常会出现这样的错误提示,控制台打印:Type of the default value for 'songs' prop must be a function 解决办法有两种如下: 1:写 ...

  10. SpringCloud之Zuul高并发情况下接口限流(十二)

    高并发下接口限流技术gauva(谷歌的框架) MySql最大连接数3000: 原理:框架每秒向桶里放100个令牌,接口请求来了先去拿令牌,拿到令牌后才能继续向后走,否则不允许向后执行:当接口请求太频繁 ...