如何使用react开发项目

如何使用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开发项目的大致流程及方法了。

Image placeholder
前端答疑
未设置
  45人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何使用react做安卓app

如何使用react做安卓app一、首先,我们先创建一个react项目作为演示。1.全局安装create-react-app#全局安装 npminstall-gcreate-react-app2.构建一

如何使用react native

如何使用reactnative一、首先安装react-native-cli脚手架工具npminstall-greact-native-cli二、使用react-native-cli创建一个初始化的工程

使用Certbot开启HTTPS访问(最新)

知乎地址友情链接 v-easy-components-基于Vue2.x的组件命令库 逸宿-一款预定民宿的webapp(毕设) 在线网易云API-基于NeteaseCloudMusicApi在线A

如何下载使用react.js

如何下载使用react.js一、下载react.js、react-dom.js和babel.js在浏览器中输入这三个地址,将得到的页面全选后复制粘贴到本地的文件中,分别对应react.js、react

如何用react做增删

如何用react做增删1、使用react做一个输入框,点击提交在下面列表展示,点击对应的列表项,删除该项,如下:2、项目的数据结构,首先分析需求,一个input框,一个button,一个列表。可以把i

如何用react做一个表格

如何用react做一个表格1、首先使用React.createClass方法创建一个组件;2、在render中通过React.DOM创建table、tr、tbody标签;3、在tr标签中使用map方法

如何用react写页面跳转

如何用react写页面跳转1、使用react-router-dom中的Link实现页面跳转一般适用于,点击按钮或其他组件进行页面跳转,具体使用方式如下:import{Link}from'react-r

如何用react写轮播?

前提:安装好Node.js安装。【推荐阅读:nodejs怎么下载安装?】步骤:1、安装swiper使用node包管理器npm来安装swipernpminstallswiper--save2、在轮播组件

如何引用react-dom

如何引用react-dom引用react-dom很简单,首先你需要创建一个react项目,这里我们介绍两种方式,第一种是使用npm来创建,另一种是采用script标签引入react的方式创建项目。●使

如何用react构建单页面

如何用react构建单页面react构建单页面需要使用react-router-dom库,所以我们需要先安装npminstallreact-router-dom-S下面以一个例子讲解,react构建单

怎么用react写界面

怎么用react写界面用react写页面,官方的做法是采用jsx语法,JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内

怎么用react写登陆框

怎么用react写登陆框1、创建一个Login组件,添加userName和userPassword状态;2、为输入框绑定onChange事件到changeUsername和changePassword

用react怎么做移动端

用react怎么做移动端1、首先使用create-react-app脚手架创建react项目;2、然后打开index.html文件,在头部添加meta元数据,设置用户网页的可视区域宽度为设备的宽度,初

用react怎么插图片

用react怎么插图片1、img标签引入图片因为react其实是通过js的reader函数渲染的页面,所以直接写src=“路径”是无法引入图片需要用下面的方式引入2、背景图片引入1第一种就是常规的新建

如何利用Reworld做一个一键吸空投箱的效果

功能效果展示运行环境Win7,Win8,Win10Reworld版本体验版vc_redist.x64运行环境针对零基础读者的补充下载安装Reworld对应版本Reworld官网链接:http://ww

深入浅出百亿请求高可用Redis(codis)分布式集群揭秘

摘要:作为noSql中的kv数据库的王者,redis以其高性能,低时延,丰富的数据结构备受开发者青睐,但是由于redis在水平伸缩性上受限,如何做到能够水平扩容,同时对业务无侵入性是很多使用redis

react中如何使用组件

react中如何使用组件前文我们介绍过了《如何写react组件》(感兴趣的同学可以过去学习),下面我们来说一下如何使用react组件。1、无状态组件的使用方法组件:constApp=(props)=>

react如何使用css?

react如何使用css?在react中使用css有以下几种方法一、全局使用app.jsimportReactfrom'react'; importRouterfrom"./router" impor

如何使用 Python 和 BeautifulSoup 爬取网站

互联网上的信息如此之多,任何人穷其一生也无法全部消化吸收。你需要的不是访问这些信息,而是一种可伸缩的方式,可以用来收集、组织和分析这些信息。你需要的是Web爬取。Web爬取可以自动提取数据,并以一种

如何使用Supervisor管理Laravel 队列进程?

1.在linux系统下安装supervisor Python的pip工具安装:sudopipinstallsupervisor Ubuntu系统安装:sudoapt-getinstallsupervi

GoWeb教程_06.2. Go 如何使用 session

通过上一小节的介绍,我们知道session是在服务器端实现的一种用户和服务器之间认证的解决方案,目前Go标准包没有为session提供任何支持,这小节我们将会自己动手来实现go版本的session管理

广域网优化:企业如何使用SD-WAN

最近,NetworkComputing与EMA共同发起了一项题为“广域网优化:企业如何使用SD-WAN”的调查,以检研究企业广域网的变化,以及SD-WAN技术在其中所起的作用。调查参与者包括305名企

如何使用TensorFlow机器学习对图像进行分类?

本文将介绍如何使用迁移学习使用TensorFlow机器学习平台对图像进行分类。在机器学习环境中,迁移学习是一种技术,使我们能够重用已经训练的模型并将其用于另一个任务。图像分类是将图像作为输入并为其分配

dw如何使用css设置字体

dw如何使用css设置字体设置页面中的字体可以使用“页面属性”对话框,页面属性可以设置网页的字体、背景颜色和背景图像等样式。具体操作方法如下:1、选择“文件”>“页面属性”,或单击文本的属性检查器中的

如何使用css取消字体下划线?

在给文字加上超链接锚文本(htmla)后,字体就被默认自动加上下划线样式,但可以通过CSS实现取消去掉全网页超链接的文字字体被加下划线样式。我们可以使用text-decoration:none来取消默