最近在上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. BeetleX服务网关之服务发现与泛域名路由

    在新版本的服务网关中提供了服务发现和泛域名路由解决功能,服务发现可以在无须配置的情况下实现服务自动注册到网关中解脱对服务配置的繁琐工作:而泛域名路由则可以针对不同的域名制定不同的负载规则. 使用con ...

  2. Spring Boot从零入门1_详述

    本文属于原创,转载注明出处,欢迎关注微信小程序`小白AI博客` 微信公众号`小白AI`或者网站 [https://xiaobaiai.net](https://xiaobaiai.net) ![](h ...

  3. 巨杉Tech | SequoiaDB数据域及存储规划

    1 背景近年来,企业的各项业务发展迅猛,客户数目不断增加,后台服务系统压力也越来越大,系统的各项硬件资源也变得非常紧张.因此,在技术风险可控的基础上,希望引入大数据技术,利用大数据技术优化现有IT系统 ...

  4. 函数基础(一)(day10整理)

    目录 昨日内容 文件的基本应用 什么是文件 操作文件的流程 打开文件的三种模式 文件打开的两种方式 绝对路径和相对路径 绝对路径 相对路径 with管理文件上下文 文件的高级应用 新的打开文件的模式 ...

  5. 设计模式（七）Builder模式

    Builder模式,从这个名字我们可以看出来,这种设计模式就是用于组装具有复杂结构的实例的. 下面还是以一个实例程序来解释这种设计模式,先看实例程序的类图. 这里为了调试方便,只实现其中一个功能Tex ...

  6. Django配置实现数据库读写分离

    django在进行数据库操作的时候,读取数据与写数据(增.删.改)可以分别从不同的数据库进行操作. 1. 在配置文件中增加slave数据库的配置 2. 创建数据库操作的路由分发类 在meiduo_ma ...

  7. 【Linux】【自学笔记】Linux下面docker安装mysql

    写在前面: 捣腾继续,之前把一个SpringBoot的程序安装在docker上面,参考链接:https://www.cnblogs.com/aki-stones/p/2019-11-01-note.h ...

  8. Kruskal算法求最小生成树 笔记与思路整理

    整理一下前一段时间的最小生成树的算法.(其实是刚弄明白 Kruskal其实算是一种贪心算法.先将边按权值排序,每次选一条没选过的权值最小边加入树,若加入后成环就跳过. 先贴张图做个示例. (可视化均来 ...

  9. 学习笔记62_python文件操作

    #使用 str = raw_input("输入密码:") 来获取键盘的输入 #创建或打开一个文件 fp = open("hellow.txt","w& ...

  10. java架构之路-（NoSql专题）MongoDB快速上手

    NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL".在现代的计算系统上每天网络上都会产生庞大的数据量.这些数据有很大一部分是由关系数据库管理系统(RD ...