从零开始搭建一个react项目开发

2023-09-16 14:15:06 127

本文介绍了从零开始搭建一个react项目开发，分享给大家，具体如下：

1、npminit生成package.json文件.

2、安装各种需要的依赖:

npminstall
--savereact-安装React.

npminstall
--savereact-dom安装ReactDom,这个包是用来处理virtualDOM。这里提一下用ReactNative的话，这里就是安装react-native。

npminstall
--save-devwebpack-安装Webpack,现在最流行的模块打包工具.

npminstall
--save-devwebpack-dev-server-webpack官网出的一个小型express服务器，主要特性是支持热加载.

npminstall
--save-devbabel-core-安装Babel,可以把ES6转换为ES5，注意Babel最新的V6版本分为babel-cli和babel-core两个模块，这里只需要用babel-cor即可。

安装其他的babel依赖（babel真心是一个全家桶，具体的介绍去官网看吧..我后面再总结，这里反正全装上就是了）:
npminstall
--savebabel-polyfill-Babelincludesapolyfillthatincludesacustomregeneratorruntimeandcore.js.ThiswillemulateafullES6environment

npminstall
--save-devbabel-loader-webpack中需要用到的loader.

npminstall
--savebabel-runtime-Babeltransformruntime插件的依赖.

npminstall
--save-devbabel-plugin-transform-runtime-Externalisereferencestohelpersandbuiltins,automaticallypolyfillingyourcodewithoutpollutingglobals.

npminstall
--save-devbabel-preset-es2015-Babelpresetforalles2015plugins.

npminstall
--save-devbabel-preset-react-StripflowtypesandtransformJSXintocreateElementcalls.

npminstall
--save-devbabel-preset-stage-2-Allyouneedtousestage2(andgreater)plugins(experimentaljavascript).

3、打开package.json然后添加下面的scripts:

"scripts":{
"start":"webpack-dev-server--hot--inline--colors--content-base./build",
"build":"webpack--progress--colors"
}

命令行输入npmstart将要启动webpackdevserver.

命令行输入npmbuild将会进行生产环境打包.

4、启动webpack

Webpack是我们的打包工具，在我们的开发环境中具体很重要的作用，具有很多非常便捷的特性，尤其是热加载hotreloading.webpack.config.js是如下所示的webpack的配置文件.随着app的不断变化，配置文件也会不断的更新，这里我们就用默认的webpack.config.js来命名这个配置文件，假如你用别的名字比如webpack.config.prod.js那么上面的脚本build就需要相应的改变指定相应的配置文件名字："build": "webpackwebpack.config.prod.js--progress--colors"

varwebpack=require('webpack');
module.exports={
entry:'./src/app.js',
output:{
path:__dirname+'/build',
filename:"bundle.js"
},
module:{
rules:[{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
plugins:['transform-runtime'],
presets:['es2015','react','stage-2']
}
},{
test:/\.css$/,
loader:"style-loader!css-loader"
}]
}
};

OK,我们项目的基本配置终于完成了，是时候开始写Reac代码了.

React基础-建立你的第一个Component

在上面的项目的基本配置基础上，我们开始书写React的第一个组件来熟悉React的写法与组件思想。

首先我们在项目根目录中新建一个index.html文件。在这个基础工程中,我们使用bootstrap的样式，直接引入一个cdn即可.然后添加一个html标签

，我们的app就会注入到这个div中。最后再引入，这是最后打包生成的js代码。

以下是完整的代码:





Document

建立一个新的文件夹src.我们app的大部分代码都将放在这个文件夹里面。在src中建立app.js，作为ReactApp的根组件，其他所有的组件都会注入到这个跟组件中。

首先我们需要导入react，现在都已经用ES6的语法，importReactfrom'react';，然后我们要引入react-dom.这里面有react中最重要的一个虚拟dom的概念.引入代码：importReactDOM

from'react-dom';

现在需要引入的依赖都已经完毕我们可以写第一个组件了：

classAppextendsReact.Component{
render(){//Everyreactcomponenthasarendermethod.
return(//Everyrendermethodreturnsjsx.JsxlookslikeHTML,butit'sactuallyjavascriptandfunctionsalotlikexml,withselfclosingtagsrequiringthe`/`withinthetaginordertoworkpropperly

HelloWorld

);
}
}

注意这里"HelloWorld"写在div中.所有的jsx代码都需要写在一个父div中.

最后我们需要把我们写好的组件render给Dom，这里就需要用到ReactDOM.render方法.

在App.js的下面添加:ReactDOM.render(,document.getElementById('app'));

第一个参数就是我们App的根组件,写作的形式.第二个参数就是我们的APP将要主要的DOM元素.在这个项目中，就是我们在index中写的id为app的div标签。

Ok，我们的APP结构已经出来了，经典的helloworld已经实现。马上我们就在这个基础上再实现经典的todoapp。大致的原型就有一个输入框用来输入代办事项然后添加到事件列表中。事件列表中每一个代办事项被点击就会标注一条删除线表示完成，点击后面的删除按钮则会将其从列表中删除。通过完成这个APP的过程你将学会一个完整的reactapp的所有的基本构建块。

生命周期方法和两种形式的组件构建

我们从一些小的模块开始起步.一个组件component就是一个reactapp的构件块.有两种形式的组件：类组件（Class）和函数型组件（Functional）.在这个项目中,这两种形式的组件我们都会使用,并且使用生命周期的钩子，同时也会使用state和props两个react中重要的属性。

首先在src文件夹中新建components文件夹，你的文件结构就是这样~/src/components。

然后在components中新建文件ToDoApp.js。对于所有的react组件我们都需要在头部引入reactimportReactfrom'react';。

下面我们写一个类组件.所有的class组件有一个render方法用来返回jsx。

ToDoApp的class就如下所示:

classToDoAppextendsReact.Component{
render(){
return(
ToDoApp
);
}
}

为了将这个组件注入到我们的APP中,首先我们需要输出它。在这个组件代码底部添加exportdefaultToDoApp;。

然后在app.js顶部我们添加importToDoAppfrom'.components/ToDoApp';导入组件用来代替HelloWorld。render中替换为新的jsx代码半闭合类型的标签即可。

然后在浏览器中你就可以看到"ToDoApp"代替了原来的"HelloWorld"!这样我们就完成了将第一个子组件嵌入到根组件之中了，这就是构建reactapp的常规模式。下面继续完善我们的组件。

返回到ToDoApp中来构建我们的第一个代办事项列表。首先我们使用bootstrap来构建比较方便且美观。用下面的jsx替换当前render方法中return中的jsx：





MyToDoApp

Listgoeshere.

constlist=props.listItems.map((el,i)=>( //AllwheredoinghereisgettingtheitemslistItemsprop //(whichisstoredinthestateoftheparentcomponent) //whichisanarray,andwe'rerunningthe.mapmethod //whichreturnsanewarrayoflistitems.Thekeyattributeis //required,andmustbeunique.

el

));

onListItemClick=(i)=>{//takestheindexoftheelementtobeupdated this.setState((previousState)=>({ list:[ ...previousState.list.slice(0,i),//slicereturnsanewarraywithoutmodifyingtheexistingarray.Takeseverythingupto,butnotincluding,theindexpassedin. Object.assign({},previousState.list[i],{done:!previousState.list[i].done}),//Object.assignisanewES6featurethatcreatesanewobjectbasedonthefirstparam(inthiscaseanemptyobject).Otherobjectscanbepassedinandwillbeaddedtothefirstobjectwithoutbeingmodified. ...previousState.list.slice(i+1)//takeseverythingaftertheindexpassedinandaddsittothearray. ] })) };

deleteListItem=(i)=>{ this.setState((previousState)=>({//usingpreviousstateagain list:[ ...previousState.list.slice(0,i),//againwiththeslicemethod ...previousState.list.slice(i+1)//theonlydiffencehereiswe'releavingouttheclickedelement ] })) };

constinitialState={};//Theinitialstateofthisreducer(willbecombinedwiththestatesofotherreducersasyourappgrows) exportdefaultfunctionreducer(state=initialState,action){//afunctionthathastwoparameters,state(whichisinitializedasourinitialStateobj),andaction,whichwe'llcoversoon. switch(action.type){ default: returnstate; } }

functionmapStateToProps(state){ return{ toDoApp:state.toDoApp//givesourcomponentaccesstostatethroughprops.toDoApp } } functionmapDispatchToProps(dispatch){ return{};//herewe'llsoonbemappingactionstoprops }

constinitialState={ list:[] }; exportdefaultfunctionreducer(state=initialState,action){ switch(action.type){ caseADD_ITEM: returnObject.assign( {}, state, {list:[...state.list,action.item]}//hereweseeobject.assignagain,andwe'rereturninganewstatebuiltfromtheoldstatewithoutdirectlymanipulatingit ) default: returnstate; } }

constinitialState={ list:[{item:'test',done:false}]//justaddedthistotestthatstateisbeingpasseddownpropperly, newToDo:'' }; exportdefaultfunctionreducer(state=initialState,action){ switch(action.type){ default: returnstate; } }

import{connect}from'react-redux'; importToDoAppfrom'../components/ToDoApp.js' import{ inputChange }from'../redux/modules/toDoApp';//weaddedthis functionmapStateToProps(state){ return{ toDoApp:state.toDoApp//givesourcomponentaccesstostatethroughprops.toDoApp } } functionmapDispatchToProps(dispatch){ return{ inputChange:(value)=>dispatch(inputChange(value))//weaddedthis }; } exportdefaultconnect( mapStateToProps, mapDispatchToProps )(ToDoApp);

从零开始搭建一个react项目开发

MyToDoApp

el

el

热门推荐

随机推荐