最近在上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文件分别粘贴进去即可。
想继续学习,请继续查看下一篇文章