【前端】新手学习React遇到的一些问题

最新推荐文章于 2023-09-19 09:23:07 发布

贱起苍澜

最新推荐文章于 2023-09-19 09:23:07 发布

阅读量553

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/dateline/article/details/48155063

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主要写一些我自己在学习过程中遇到的问题，个人感觉是作为一个新手比较容易崴脚的地方。
我是按照另外一篇博客开始学的，内容比较详细讲的也比较细
可以上某度搜下React，第二个就是，或者直接搜React 入门实例教程

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="js/react.js"></script>
        <script type="text/javascript" src="js/JSXTransformer.js"></script>
    </head>
    <body>
        <div id="a"></div>

        <script type="text/jsx">
            React.render(
                <h5>Hello World</h5>,
                document.getElementById('a')
            )           
        </script>
    </body>
</html>

在直接用的时候会引入一个JSXTransformer的js，说白了就是把jsx翻译成js的，直接这么用的话效率不是很好，之前提到的那片博客也说过，还有就是我要写在外部js的时候，只能用type=”text/jsx”引入，有很多不方便，所以就上网搜了解决方案，就是用npm。
首先下一个nodejs的win版，直接搜就行了。
安完之后，可以先确认安装是否成功，

node-v

然后再安react-tools

npm imstall -g react-tools

可以用

jsx -h

确认react-tools是否安装成功，我在这里遇到了以一个问题
就是我在按完node的时候改了npm的路径，就是

npm config set prefix 'C:....\nodejs\node_globle'
npm config set cache 'C:....\nodejs\node_cache'

然后react-tools安上就用不了了，应该是环境变量问题，后来我又给他改回来了。。
默认的是C:\users\当前用户\AppData\Roaming\下

react-tools安好了之后用命令行进入你项目的根目录，然后用

jsx --watch src/ build/

src:就是编写jsx.js的目录
build:就是翻译后生成新js的目录
*不要关掉命令行，它处于监听状态

翻译前：

React.render(
    <h1>Hello World</h1>,
    document.getElementById('example')
);

翻译后：

React.render(
    React.createElement("h1", null, "Hello World"),
    document.getElementById('example')
);

这样就不用引那个JSXTransformer.js了

还有就是在刚接触react的时候语法不是很熟，经常是写完没有效果，但是根据react在console给出的提示又不足以帮助我找到问题的所在，这时候到命令行看一下就好

这里会告诉你第几行的语法有问题。

如有错误请指正，多谢多谢

贱起苍澜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端】新手学习React遇到的一些问题

主要写一些我自己在学习过程中遇到的问题，个人感觉是作为一个新手比较容易崴脚的地方。我是按照另外一篇博客开始学的，内容比较详细讲的也比较细可以上某度搜下React，第二个就是，或者直接搜React 入门实例教程<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>
复制链接

扫一扫

专栏目录