小白学习React官方文档看不懂怎么办?1.起步

  最近在上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文件分别粘贴进去即可。
 
 想继续学习,请继续查看下一篇文章
 
 
 
 
 
 
posted @ 2019-11-25 15:28  clearYang  阅读(1160)  评论(0编辑  收藏  举报