菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
45
0

如何使用react开发项目

原创
05/13 14:22
阅读数 1433

如何使用react开发项目

1、环境搭建

开发react项目,环境搭建是第一步,react开发需要搭建nodejs环境,因为使用官方的脚手架搭建项目最为简单,而脚手架和webpack依赖于nodejs。

webpack是一个模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

● 安装Nodejs推荐看这篇安装教程【Node.js安装教程

2、创建项目

● 使用create-react-app脚手架创建项目教程可以参考:怎么新建一个react项目

3、修改项目,以及组件的使用

组件的使用有几点需要注意的地方:

● 命名组件的时候必须首字母大写

● 组件中定义的事件要想在函数中正常使用this

changeBarLen(e){
this.props.changePrograssBarLen(this.refs.fatherNode,e)
}
render() {
    return (
     <div className='fatherNode' 
         onClick={this.changeBarLen.bind(this)} 
         ref="fatherNode">     
)

● react引用图片 需要先import再使用

4、打包项目

使用npm命令

npm build

或者yarn

yarn build

若是打包后的项目无法打开,请编辑package.json文件,添加"homepage":".",再次进行打包。

以上就是使用react开发项目的大致流程及方法了。

发表评论

0/200
45 点赞
0 评论
收藏
为你推荐 换一批