最近在上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. 主流 CSS 布局(水平居中、垂直居中、居中 )

    什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...

  2. redis入门(二)

    目录 redis入门(二) 前言 持久化 RDB AOF 持久化文件加载 高可用 哨兵 流程 安装部署 配置技巧 集群 原理 集群搭建 参考文档 redis入门(二) 前言 在redis入门(一)简单 ...

  3. 数据结构（三十二）图的遍历（DFS、BFS）

    图的遍历和树的遍历类似.图的遍历是指从图中的某个顶点出发,对图中的所有顶点访问且仅访问一次的过程.通常有两种遍历次序方案:深度优先遍历和广度优先遍历. 一.深度优先遍历 深度优先遍历(Depth_Fi ...

  4. 【C#多线程】1.Thread类的使用及注意要点

    Thread随便讲讲 因为在C#中,Thread类在我们的新业务上并不常用了(因为创建一个新线程要比直接从线程池拿线程更加耗费资源),并且在.NET4.0后新增了Task类即Async与await关键 ...

  5. OpenSSL aes加解密实例+base64编解码

    OpenSSL aes加解密简单实例+base64编解码 #include <stdio.h> #include <string.h> #include <memory. ...

  6. C++学习笔记14_C#调用dll

    1. 首先C++创建dll项目,各种调第三方库,把这些东西都弄好后,整一个导出接口,例如: extern "C" __declspec(dllexport) int Add(int ...

  7. bzoj1004 card

    明知是burnside然而根本不会然后无耻地颓了题解后一脸傻气的我: 直接套公式???为啥方案数==等价类数量啊??? skyh:显然啊(狂笑)(hey wxy!他问为啥方案书等于等价类数量!) wx ...

  8. Java自动化测试框架-10 - TestNG之测试结果篇

    1.-测试结果 1.1-成功,失败和断言 测试被认为是成功的,如果它不引发任何异常完成,还是它扔的预期异常(请参阅文档expectedExceptions属性上找到的@Test注释). 您的测试方法通 ...

  9. 近期学习es6后对变量提升及let和const的一点思考

    1.变量提升:(创建->初始化)-->赋值-->修改 就是说,以var声明的变量,它的声明会被提升到当前作用域的顶端(注意是变量声明提升,变量的赋值没有提升) //在if语句中也会提 ...

  10. python学习之【第五篇】：Python中的元组及其所具有的方法

    1.前言 Python的元组(tuple)与列表很相似,不同之处在于元组不能被修改,即元组一旦创建,就不能向元组中的增加新元素,不能删除元素中的元素,更不能修改元组中元素.但是元组可以访问任意元素,可 ...