最近在上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. 百万年薪python之路 -- 基础数据类型的补充练习

    1.看代码写结果 v1 = [1,2,3,4,5] v2 = [v1,v1,v1] v1.append(6) print(v1) print(v2) [1,2,3,4,5,6] [[1,2,3,4,5 ...

  2. ExtJs 扩展类CheckColumn修改源码，支持按条件禁用启用下拉框功能

    长话短说,具体的请看图 需求如图: 修改CheckColumn.js源码,添加鼠标点击改变事件 完整JS脚本 Ext.ns('Ext.ux.grid'); Ext.ux.grid.CheckColum ...

  3. human_pose_estimation_demo的进一步研究

    一.demo能力 OpenVINO提供了范例(human_pose_estimation_demo),能够在CPU上以较快速度识别出多人 -iE:/OpenVINO_modelZoo/head-pos ...

  4. (day31) Event+协程+进程/线程池

    目录 昨日回顾 GIL全局解释器锁 计算密集型和IO密集型 死锁现象 递归锁 信号量 线程队列 FOFI队列 LIFO队列 优先级队列 今日内容 Event事件 线程池与进程池 异步提交和回调函数 协 ...

  5. JVM(3) 垃圾收集器与内存分配策略

    一.垃圾收集的概念 在Java虚拟机运行时数据区中程序计数器.虚拟机栈和本地方法栈3个区域随线程而生,随线程而灭:栈中的栈帧随着方法的进入和退出而有条不紊地执行着出栈和入栈操作,每一个栈帧中分配多少内 ...

  6. fenby C语言 P30

    int a[5],*p=a; int a[5],*p=&a[0]; #include <stdio.h> int main(void){ int a[5],*p=a,i; for( ...

  7. Xbim.GLTF源码解析（一）：简介

    原创作者:flowell,转载请标明出处:https://www.cnblogs.com/flowell/p/10838972.html 简介 Xbim.GLTF是将IFC文件转换成GLTF文件的一个 ...

  8. 设计模式C++描述----14.外观(Facade)模式

    一. 举例说明 还以我以前做的文件系统(FileSys)为例: 文件系统是一个独立的系统,它提供一套核心的文件操作. 除了文件系统,还有四个子系统,分别是杀毒子系统(KillVirus),压缩子系统( ...

  9. spring cloud 2.x版本 Feign服务发现教程(内含集成Hystrix熔断机制)

    前言 本文采用Spring cloud本文为2.1.8RELEASE,version=Greenwich.SR3 本文基于前两篇文章eureka-server和eureka-client的实现. 参考 ...

  10. 学习笔记03http协议

    1.浏览器就是一个sokect客户端,使用http协议与服务器进行交流.http请求:请求头:(请求方法)sp(url)sp http/1.x <cr><lf>(通用头类型名) ...