搭建React项目环境【1】

知青先生

于 2019-09-01 15:49:00 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

文章标签： react vue java js javascript

浩明

本文链接：https://blog.youkuaiyun.com/YHM_MM/article/details/109734137

本文详细介绍如何使用NodeJS及npm安装React依赖，通过Webstrom2019.2创建React项目，并展示首个Helloworld组件的编写过程。涵盖Node版本检查、npm全局安装react-app、项目启动与依赖设置，以及ReactJS开发环境下的HTML页面渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装NodeJS6.0以上自带npm依赖包管理工具

2、webstrom 2019.2 工具

1、在cmd输入node -v就可以看到node的当前版本

2、在输入node进入node环境

3、查看npm版本号：npm -v

4、再次输入npm可以看到下面有哪些包

5、下一个全局安装react -app ：install create-react-app yarn -g

6、下面在webstrom工具中创建React项目引用React所需要的依赖

7、项目构架：

启动项目进行访问：npm run status

在设置中下载这些可以提供自动提示的功能

若react语法不支持

第一个组件：编写Hello word组件，引入节点，渲染页面

html页面引入ReactJS开发

<!DOCTYPE html><html><head> 　　<title>html引用React技术</title></head><body> 　　<div id="like_button_container"></div> <script src="ReatJS/react.development.js"></script><script src="ReatJS/babel.min.js"></script><script src="ReatJS/react-dom.development.js"></script><script src="js/index.js"></script><script type="text/babel"> 　　　　　　ReactDOM.render( 　　　　　　　　<h1>Hello, world!</h1>, 　　　　　　　　document.getElementById('like_button_container') 　　　　　　);</script></body></html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

知青先生 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。