react项目结构_react 目录 结构 项目 - CSDN
精华内容
参与话题
  • 每次都是要写一个项目的时候就去网上找找,官网翻翻。官网描述得很详细,可能写了多种方案,但是对于我们来说,取舍一种就可以了,所以每次去翻一遍都要看到一大堆东西。现在想养成自己总结的习惯。一方面,如果实在...

    刚开始工作的时候,没有自己总结的习惯;每次都是要写一个项目的时候就去网上找找,官网翻翻。官网描述得很详细,可能写了多种方案,但是对于我们来说,取舍一种就可以了,所以每次去翻一遍都要看到一大堆东西。现在想养成自己总结的习惯。一方面,如果实在不记得就可以翻翻自己的博客,按照上面写的过程来就可以了,因为是自己一贯使用的,不会有多余的东西;另一方面,如果能通过自己总结,印象更深刻记得牢固了,以后就不用过来翻博客了那就再好不过了。

    创建react项目

    1.环境安装

    node,npm安装啥的不想多说了,这个一般安装一次就可以永久使用了。除非偶尔需要升升级,也不碍事。

    2.初始化项目

    //以下两种方式创建的项目一样
    npx create-react-app my-app
    或
    npm init react-app my-app
    

    是不是觉得这两个东西长得很像?对于我这种记性差的人来说是真的分不清楚,尤其是还学了vue-cli的初始化以后;所以我们就得靠理解来记忆了。

    npx create-react-app my-app

    用npx创造(create)一个react应用(react-app),然后后面是你的项目名称

    npm init react-app my-app

    用npm初始化(init)一个react应用(react-app),然后后面是你的项目名称


    咦?一开始运行就给我报了个错?
    在这里插入图片描述
    name can no longer contain capital letters,翻译过来就是名称不能包含大写字母,为什么呢?可以参考一下阮一峰老师的为什么文件名要小写


    3.项目运行

    这个时候不做任何改动,也可以运行项目;打开出现的是react初始化界面,一个很大的log图片。说明项目的创建已经成功了。

    npm start 
    或
    yarn start
    

    4.修改文件

    src的初始目录是这样的,删掉多余的文件和导入;
    在这里插入图片描述
    index.js
    在这里插入图片描述
    App.js
    在这里插入图片描述
    然后自己创建需要的文件夹,不需要用的省略掉。

    在这里插入图片描述

    目录详解

    assets:放置原始资源文件。

    components:存放全局组件。

    contants:常量文件夹,存放常量。

    i18n:i18n国际化,各种语言的翻译。

    pages:页面文件夹。

    router:路由文件夹。

    utils:存放一些常用函数的封装。

    5.项目打包

    运行下面的命令,然后把打包生成的dist文件夹里的内容放到线上就OK啦。中间省略掉的一些配置过程就涉及到webpack的内容啦,这里不多讲。

    npm run build 
    或
    yarn build
    

    npm init和npx

    1.npm init

    npm init会根据你要创建的项目,生成一个pakeage.json文件;这个文件用来记录项目最基本的依赖包,npm会读取package.json中列出来的依赖包,然后自动安装这些依赖包。如果后续要增加依赖就使用命令npm install或yarn add手动安装。npm还可以通过配置pakeage.json简化操作命令

    2.npx

    安装npm@5.2.0及以上版本,会自动安装npx;你可能目前只想进行一次create-react-app操作,使用npx避免了全局安装create-react-app。关于npx的理解和使用,可以参考npx 使用教程

    npx create-react-app my-app
    

    其实相当于做了如下操作,是其简化版,但是又避免了全局安装;

    //初始化npm
    npm init
    
    //安装create-react-app
    npm install -g create-react-app
    
    //使用create-react-app
    create-react-app my-app
    
    展开全文
  • 有关于React+redux的项目架构一直存在多种声音,目前主流的主要有三种:按照类型,按照页面功能,Ducks。一,按照类型 这里的类型指的是文件在项目中充当的角色类型,比如这个文件是一个component(展示组件),...

    有关于React+redux的项目架构一直存在多种声音,目前主流的主要有三种:按照类型,按照页面功能,Ducks。

    一,按照类型

         这里的类型指的是文件在项目中充当的角色类型,比如这个文件是一个component(展示组件),container(容器组件),在redux状态管理当中有,action,reducer等,这些不同角色的文件都放在一个单独的文件夹里,这种样式的结构也是react官方所推荐的结构。这种结构如下

        
    使用这种结构组织项目,每当增加一个新功能的时候,需要再containers,components文件夹下增加这个功能需要的组件,还需要再actions,reducers文件夹下分别添加Redux管理这个功能使用到的action,reducer,此时如果actionType放在另外一个文件夹,还需要在这个文件夹下增加新的actionType,所以开发一个新的功能,需要再这些文件夹下频繁的切换已修改不同的文件。如果项目比较小,问题不大,如果对于一个规模比较大的项目使用这种项目结构非常的麻烦。

    二,按照页面功能

        既一个页面功能对应一个文件夹,这个页面功能所用到的container,component,action,reducer等文件都放在这个文件夹下。如下为按照页面功能划分的项目结构示列

      


    这种结构好处很明显,一个页面功能使用到的组件,状态和行为都在同一个文件夹下,方便开发和维护,同时易于扩展,github上很多的脚手架也选择了这种目录结构,不足之处是依然同按角色划分面临同样的问题,改变一个功能需要频繁的在reducer,action,actionType等不同文件夹间切换。另外redux将整个的应用状态放在一个store中来管理,不同功能模块之间可以共享store中的部分状态(项目越复杂,这种场景会越多),共享的状态应该放到哪一个页面文件夹下也是一个问题,这些问题归根结底是因为redux中状态管理逻辑并不是根据页面功能划分的,它是页面功能之上的一种抽象。

      3,Ducks

         ducks指的是一种新的redux项目目录结构,,它提倡将相关的reducer,action,actionType和action creaters写在一个文件里面,本质上是以应用状态作为划分模块的依据,而不是以页面的功能作为划分模块的依据,这样,管理相同状态的依赖都在同一个文件中,无论哪个容器组件需要这部分状态,只需要引入管理这个状态的模块文件即可,这样的一个文件(模块)代码如下:

        //module actions

    const LOAD='widget/LOAD';
    const CREATE='widget/CREATE';
    const UPDATE='widget/UPDATE';
    const REMOVE='widget/REMOVE';

    const initialState={
    widget:null,
    isLoading:false
    }

    //Reducer

    export default function reducers(state=initialState,action={}){
    switch (action.stype){
    LOAD:
    //...
    CREATE:
    //....
    UPDATE:
    //....
    REMOVE:
    //...
    default:
    return state;
    }
    }

    //Action Creators
    export function loadWidget(){
    return {type:LOAD};
    }
    export function createWidget(widget){
    return {type:CREATE,widget};
    }
    export function updateWidget(widget){
    return {type:UPDATE,widget};
    }
    export function removeWidget(widget){
    return {type:REMOVE,widget};
    }

    整体的目录结构如下:


    在前两种结构中,当container需要使用actions时,可以通过import * as actions from 'path/to/actions.js'的方式一次性的把一个action的文件中中所有的action creates都引入进来。但在使用Ducks结构时,action creater和reducer定义在同一个文件中,import*的导入方式会把reducer也导入进来(如果action types也被export ,那么还会导入action type)。为了解决这个问题。我们可以把action creators和action types定义到一个命名空间中:

     //widget.js

    //Actions定义到types命名空间下
    export const types={
    LOAD:'widget/LOAD',
    CREATE:'widget/CREATE',
    UPDATE:'widget/UPDATE',
    REMOVE:'widget/REMOVE'
    }

    const initialState={
    widget:null,
    isLoading:false
    }

    //Reducer

    export default function reducers(state=initialState,action={}){
    switch (action.stype){
    types.LOAD:
    //...
    types.CREATE:
    //....
    types.UPDATE:
    //....
    types.REMOVE:
    //...
    default:
    return state;
    }
    }

    //Action Creators
    export const actions={
    loadWidget:function(){
    return {type:types.LOAD};
    },
    createWidget:function(widget){
    return {type:types.CREATE,widget};
    },
    updateWidget:function(widget){
    return {types:type.UPDATE,widget};
    },
    removeWidget:function(widget){
    return {type:types.REMOVE,widget};
    }

    }

    这样在container里面使用它的时候就可以通过import {actions} from 'path/to/modeuls.js'引入需要的对象,避免了不必要的引入,也避免了逐个引入action creaters的繁琐

    注:首先感谢你对本文的阅读,不当之处欢迎拍正......

    展开全文
  • React项目文件结构解析

    千次阅读 2018-07-30 19:30:48
    https://my.oschina.net/korabear/blog/1815170
    展开全文
  • react脚手架 ...react提供了一个专门用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: react + webpack + es6 + babel + eslint 使用脚手架开发的项目的特点: 模块化(js是一...

    react脚手架

    用来帮助程序员快速创建一个基于xxx库的模板项目,包含了所有需要的配置,指定好了所有的依赖,可以直接安装/编译/运行一个简单效果

    react提供了一个专门用于创建react项目的脚手架库: create-react-app

    项目的整体技术架构为: react + webpack + es6  + babel + eslint

    使用脚手架开发的项目的特点: 模块化(js是一个一个模块编写的), 组件化(界面是由多个组件组合编写实现的), 工程化(实现了自动构建/运行/打包的项目)

     

     

    使用react脚手架创建项目并启动

    下载脚手架:npm install -g create-react-app

    创建项目:create-react-app react-app

    进入项目目录:cd react-app

    启动项目:npm start

     

     

    react脚手架创建项目目录结构

    node_modules-------第三方依赖模块文件夹

    public

      | -- index.html------------------------主页面

    src:

    .gitignore-------git版本管制忽略的配置

    package.josn-------应用包配置文件

    README.md-------应用描述说明的readme文件

     

     

     

    基于脚手架项目编写应用案例

    实现如下的效果

    使用脚手架创建项目

    拆分组件

    • 应用组件: App------state: comments/array
    • 添加评论组件: comment-add-------state: username/string, content/string        props: add/func
    • 评论列表组件: comment-list-------- props: comment/object, delete/func, index/number
    • 评论项组件: comment-item-------- props: comments/array, delete/func

    上面是拆分的每个组件,并且将页面组件在App.js中引入

    实现静态组件并且实现动态组件(组件动态化,也就是添加数据交互)

    App.js中引入comment组件

    import React, { Component } from 'react';
    import './App.css';
    
    import Comment from './views/comment/comment'
    class App extends Component {
      render() {
        return (
          <div className="App">
            <Comment/>
          </div>
        );
      }
    }
    
    export default App;

    comment组件

    组件中引入comment-add和comment-list组件

    import React, { Component } from 'react';
    import './comment.css';
    
    import CommentAdd from './comment-add/comment-add'
    import CommentList from './comment-list/comment-list'
    class Comment extends Component {
      // 给组建对象指定state属性,可以不用constructor
      state = {
        comments: [
          {username: 'Tom', content: '一个虚拟DOM(元素)是一个一般的js对象, 准确的说是一个对象树(倒立的)'},
          {username: 'Jack', content: '虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应'},
          {username: 'Jack', content: '用JS对象树表示DOM树的结构;然后用这个树构建一个真正的DOM树插到文档当中'},
          {username: 'Jack', content: '这里render不断在执行更新date数据,但是input是不会更新的'},
          {username: 'Jack', content: '拆分组件: 拆分界面,抽取组件,实现静态组件: 使用组件实现静态页面效果'},
          {username: 'Jack', content: '数据保存在哪个组件,如果是这个数据只是某个组件需要用到,那么就放在该组件,如果有两个组件需要用到'},
          {username: 'Jack', content: '子组件改变父组件的状态(状态在哪个组件,更新状态的行为就应该定义在哪个组件,父组件定义函数,传给子组件调用)'}
        ]
      }
    
      // 给comment-add组件调用的添加评论的方法
      addComment = (comment) => {
        const {comments} = this.state
        comments.unshift(comment)
        this.setState({comments}) // 更新状态
      }
    
      // 给comment-item组件调用的删除评论的方法(这里先把这个方法传个comment-list组件,再由comment-list传给comment-item)
      deleteComment = (index) => {
        const {comments} = this.state
        comments.splice(index, 1)
        this.setState({comments}) // 更新状态
      }
    
      render() {
        const {comments} = this.state
        return (
          <div className="comment">
            <h1 className='comment-title'>请发表对React的评论</h1>
            <div className='comment-main'>
              <div className='comment-content-left'>
                <CommentAdd addComment={this.addComment}/>
              </div>
              <div className='comment-content-right'>
                {/*<CommentList comments={comments}/>*/}
                <CommentList comments={comments} deleteComment={this.deleteComment}/>
              </div>
            </div>
          </div>
        );
      }
    }
    
    export default Comment;
    .comment-list-title{
      font-size: 30px;
      height: 59px;
      border-bottom: 1px solid #cccccc;
    }
    .comment-list-content{
      min-height: 20px;
      max-height: 419px;
      overflow-y: auto;
      padding: 10px 0;
      box-sizing: border-box;
    }
    .no-comment-list{
      color: #FF4A16;
    }

    comment-add组件

    import React, { Component } from 'react';
    import './comment-add.css';
    import propTypes from 'prop-types'
    
    class CommentAdd extends Component {
      static propTypes = {
        addComment: propTypes.func.isRequired
      }
      state = {
        username: '',
        content: ''
      }
    
      // 一个事件需要使用bind绑定this,太麻烦,而已使用箭头函数(里面没有this,使用外围的this)
      handleSubmit = () => {
        // 收集表单数据
        const comment = this.state
        // 更新状态
        this.props.addComment(comment)
    
        // 清除输入框的数据
        this.setState({
          username: '',
          content: ''
        })
      }
    
      handleNameChange = (event) => {
        const username = event.target.value
        this.setState({username: username})
      }
    
      handleContentChange = (event) => {
        const content = event.target.value
        this.setState({content: content})
      }
    
      render() {
        const {username, content} = this.state
        return (
          <div className="comment-add">
            <div className='user-name-content'>
              <h5 className='user-name-title'>用户名</h5>
              <input className='user-name-input' type='text' value={username} onChange={this.handleNameChange}/>
            </div>
            <div className='comment-content'>
              <h5 className='comment-content-title'>评论内容</h5>
              <textarea className='comment-content-input' type='text' value={content} onChange={this.handleContentChange}/>
            </div>
            <div className='submit-btn' onClick={this.handleSubmit}>提交</div>
          </div>
        );
      }
    }
    
    export default CommentAdd;
    .comment-add{
      width: 100%;
    }
    .user-name-content,.comment-content{
      width: 100%;
      margin-bottom: 20px;
    }
    .user-name-title,.comment-content-title{
      margin-bottom: 5px;
      font-size: 20px;
      color: #000000;
    }
    .user-name-input{
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 0 6px;
      box-sizing: border-box;
      border-radius: 4px;
      outline: none;
      border: 1px solid #cccccc;
    }
    .comment-content-input{
      width: 100%;
      height: 240px;
      padding: 4px;
      box-sizing: border-box;
      border-radius: 4px;
      outline: none;
      border: 1px solid #cccccc;
    }
    .submit-btn{
      width: 70px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 16px;
      color: black;
      border: 1px solid #cccccc;
      border-radius: 4px;
      cursor: pointer;
      margin: 0 auto;
    }

    comment-list组件

    组件中引入comment-item组件

    import React, { Component } from 'react';
    import PropTypes from 'prop-types'
    import './comment-list.css';
    
    import CommentItem from '../comment-item/comment-item'
    class CommentList extends Component {
      // 子组件类指定接收数据的属性
      static propTypes = {
        comments: PropTypes.array.isRequired,
        deleteComment: PropTypes.func.isRequired
      }
    
      render() {
        const {comments, deleteComment} = this.props
        const display = comments.length === 0? 'block' : 'none'
    
        return (
          <div className="comment-list">
            <h2 className='comment-list-title'>评论回复</h2>
            <div className='comment-list-content'>
              {comments.map((comment, index) => <CommentItem comment={comment} index={index} key={index} deleteComment={deleteComment} />)}
            </div>
            <div className='no-comment-list' style={{display}}>暂无评论,在左侧添加您对React的评价!!!</div>
          </div>
        );
      }
    }
    
    export default CommentList;
    .comment-list-title{
      font-size: 30px;
      height: 59px;
      border-bottom: 1px solid #cccccc;
    }
    .comment-list-content{
      min-height: 20px;
      max-height: 419px;
      overflow-y: auto;
      padding: 10px 0;
      box-sizing: border-box;
    }
    .no-comment-list{
      color: #FF4A16;
    }

    comment-item组件

    import React, { Component } from 'react';
    import './comment-item.css';
    import PropTypes from "prop-types";
    
    class CommentItem extends Component {
      // 子组件类指定接收数据的属性
      static propTypes = {
        comment: PropTypes.object.isRequired,
        index: PropTypes.number.isRequired,
        deleteComment: PropTypes.func.isRequired
      }
    
      handleDelete = () => {
        const {comment, index, deleteComment} = this.props
        // 提示
        if (window.confirm(`确定删除${comment.username}的评论吗`)) { // confirm方法不是全局的,需要用window来调用
          // 确定后删除
          deleteComment(index)
        }
      }
    
      render() {
        const {comment} = this.props
    
        return (
          <div className="comment-item">
            <div className='comment-item-top'>
              <h3 className='comment-item-user'>{comment.username}说:</h3>
              <div className='comment-item-delete'><p onClick={this.handleDelete}>删除</p></div>
            </div>
            <div className='comment-item-content'>{comment.content}</div>
          </div>
        );
      }
    }
    
    export default CommentItem;
    .comment-item{
      width: 100%;
      border: 1px solid #cccccc;
      border-radius: 4px;
      min-height: 20px;
      padding: 0 10px;
      box-sizing: border-box;
      margin-bottom: 20px;
    }
    .comment-item-top{
      height: 40px;
      width: 100%;
      display: flex;
    }
    .comment-item-user{
      flex: 1;
      height: 40px;
      line-height: 40px;
    }
    .comment-item-delete{
      width: 80px;
      height: 40px;
    }
    .comment-item-delete p{
      width: 50px;
      height: 20px;
      border: 1px solid #cccccc;
      text-align: center;
      line-height: 20px;
      border-radius: 4px;
      cursor: pointer;
      margin: 10px auto 0;
      font-size: 12px;
      color: #0a25ff;
    }
    .comment-item-content{
      width: 100%;
      min-height: 20px;
      padding: 10px 0;
      box-sizing: border-box;
    }

     

    展开全文
  • 基于react的前端项目结构

    千次阅读 2018-08-12 07:28:51
    build // 编译目录 config // webpack配置 public // 公共文件 可以放一些第三方字体 样式库等 scripts // 启动脚本 src |-- asset // 静态资源 |-- componen...
  • 一个完整react项目的目录结构

    万次阅读 2018-12-26 23:57:51
    目录说明 │ .babelrc #babel配置文件 │ package-lock.json │ package.json │ README.MD │ webpack.config.js #webpack生产配置文件 │ webpack.dev.config.js #webpack...
  • React 项目搭建及目录结构

    万次阅读 2018-06-14 16:39:10
    )上面就是前端项目的目录结构。static是静态资源目录。component是经过react编写的组件。css是整体布局的样式。util是写模块化的函数或工具函数。下面这张图是component的组成。每一个文件夹都是内部具体的组件。...
  • react 项目 结构

    2019-04-04 11:52:46
    转载地址:https://blog.csdn.net/cinderella___/article/details/81603129 build // 编译目录 config // webpack配置 public // 公共文件 可以放一些第三方字体 样式库等 scripts ...
  • 在上一篇中使用 npx create-react-app demo1命令创建了一个react项目,并且用npm start命令将react项目启动起来。 一、项目的目录结构 demo1 |--node_modules #npm 包的安装目录 |--public |--index....
  • ReactNative项目结构目录详解

    千次阅读 2018-08-26 06:17:38
    React Native 结构目录 React Native结构目录  名称  描述 android目录 Android项目目录,包含了使用AndroidStudio开发项目的环境配置文件; ios目录 iOS项目目录,包含了XCode的环境 node_...
  • react.js从入门到精通(一)

    千次阅读 2018-08-11 10:00:21
    web端三大框架react、vue和angular,下面是对react.js的一些总结。 一、环境搭建 1、npm搭建项目 推荐使用npm搭建项目环境,如果网速过慢,可是使用cnpm进行项目的搭建(cnpm是淘宝的npm镜像,与npm有些差异,...
  • react项目的常用插件简介

    万次阅读 2020-06-19 10:39:57
    今天主要介绍react项目中有可能用到的插件
  • 基于React+antd的后台管理模板(可预览)

    万次阅读 多人点赞 2019-10-16 19:45:23
    自己利用业余时间,基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React,页面主要还是展示页面,不涉及后台交互。 特点: 我用
  • React项目的打包与部署

    万次阅读 2019-03-15 16:12:13
    执行完上述命令,打开本地浏览器,输入localhost:3000,就能看到项目的运行效果。此时是开发模式。 若使用npm run build,代码会被编译到build目录。将整个应用打包发布,自动试用webpack进行压缩与优化。 在项目...
  • React脚手架搭建及创建React项目

    万次阅读 2018-10-26 10:22:05
    1.安装node.js和npm:  可自行到node官网下载,下载node完成后,npm也会自行下载完成。 2.通过cmd执行 node -v 和 npm -v 查看是否下载成功和下载成功后的版本号。   3.安装好的npm的源默认是国外的源,会因为...
  • react-native之项目结构分析

    千次阅读 2017-12-01 11:29:45
    熟悉项目的结构,是开发的基本也是技术提升的一个重要途径,现总结下自己对react-native项目结构的分析与理解。正文项目结构init 的一个项目结构如图: tests:测试文件夹,执行命令 “npm test”会调用此文件夹,在...
  • 做一个react项目,构建其开发环境对初学者来说是很困难的!所以,facebook专门出了create-react-app命令,用于react项目开发环境的构建! create-react-app是基于webpack+ES6创建的。 2、如何使用。 依次在命令行...
  • react中将html字符串渲染到页面

    万次阅读 2019-02-23 21:32:24
    在做react项目时,有时候需要将后台传过来的html的字符串变成真正的结构渲染到页面,如果直接插入的话页面显示的就是这段字符串,而不会进行转义,可以用以下方法插入,便可以html的形式展现: &lt;div ...
  • visual studio code + react 开发环境搭建

    万次阅读 2019-12-27 14:35:02
    开发环境 windows 开发工具 visual studio code node 安装和 npm windows 安装node 可以直接在 node官网 直接下载直接当作普通软件安装即可。 安装完成可以在控制台中运行node测试是否安装成功 win + r 输入 ...
  • React Native第三方组件库汇总

    万次阅读 2018-08-19 10:07:43
    移动跨平台框架React Native经过4年的发展,其生态已经变得异常丰富,在使用React Native开发项目的过程中,为了提高开发效率,我们经常会借鉴一些使用使用率比较高的开源库,根据大众的需求,对这些使用较高的 ...
1 2 3 4 5 ... 20
收藏数 35,704
精华内容 14,281
关键字:

react项目结构