最近在上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. ESP8266开发之旅 基础篇④ ESP8266与EEPROM

    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...

  2. config.xml

    ASP.NET应用程序的配置信息都存放于Web.config配置文件中,Web.config配置文件是基于XML格式的文件类型,由于XML文件的可伸缩性,使得ASP.NET应用配置变得灵活.高效.容易 ...

  3. Spring Cloud ---- 服务注册与发现（Eureka 找到了！找到了！ 嘻嘻）

    记录一下吧,为什么接触分布式.因为裸辞之后没有找到工作,好的公司都要求有分布式经验,但是我完全没有.在一次面试的时候,面试官说如果你会分布式架构的话,我可以把工资给你开高2.5,我就考虑着给我点时间, ...

  4. The usage of Markdown---链接的使用

    目录 1. 序言 2. 网页链接 3. 图片链接 4. 页内跳转 更新时间:2019.09.14 1. 序言   在编辑文章的时候,我们常常需要插入各种链接,比如说网页链接,图片链接等等.当文章篇幅过 ...

  5. React-Native转小程序调研报告：Taro & Alita

    一. 我们的要求 期望的要求 基于React语法,将RN项目转化为小程序项目 该小程序能同时在 微信小程序 和 支付宝小程序这两个平台运行 底线要求 底线是能转成微信小程序,因为目前来说,因为微信先发 ...

  6. Ubuntu 14.04风扇不停转，风扇狂转 的解决办法，亲测有效。

    Ubuntu 14.04风扇不停转,风扇狂转 的解决办法,亲测有效. 原文  http://ubuntuforums.org/showthread.php?t=2218367 楼主说:ubuntu 1 ...

  7. OTA升级详解（一）

    不积跬步,无以至千里: 不积小流,无以成江海. 出自荀子<劝学篇> 1.概念解释 OTA是何物? 英文解释为 Over The Air,既空中下载的意思,具体指远程无线方式,OTA 技术可 ...

  8. MySQL开发篇（5）索引、视图、触发器、SQL中的安全问题、SQL Mode、

    一.索引 所有MySQL列类型都可以被索引,对相关列使用索引是提高SELECT操作性能的最佳途径.每种存储引擎(MyISAM.InnoDB.BDB.MEMORY等)对每个表至少支持16个索引,总索引长 ...

  9. （三）Kinect姿势识别

    Kinect给我们内置了许多姿势如举手等,具体可参考枚举KinectGestures.Gestures,也可以通过Kinect姿势管理器,自定义姿势导入(坑较多,内置的基本够用了)也可以根据关节坐标自 ...

  10. 列表[‘hello’ , ‘python’ ,’!’ ] 用多种方法拼接,并输出’hello python !’ 以及join()在python中的用法简介

    列表[‘hello’ , ‘python’ ,’!’ ] 用多种方法拼接,并输出’hello python !’ 使用字符串链接的四种方法都可以创建 字符串拼接一共有四种方法,也可以应用到列表的拼接中 ...