Getting Started Guide to Converting Vue to React

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

//Native event <form v-on:submit.prevent="onSubmit"></form>
//Custom event <my-component @my-event="handleThis(123, $event)"></my-component>

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += 'menu-active';
  }
  return <span className={className}>Menu</span>
}

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

 
<div :class="[{ active: isActive }, errorClass]"></div>

<div style={{color: 'red', fontWeight: 'bold'}} />

<div :style="[baseStyles, overridingStyles]"></div>

<ul>
  {props.posts.map((post) =>
    <li key={post.id}>
      {post.title}
    </li>
  )}
</ul>

<li v-for="item in items" :key="item.message">
  {{ item.message }}
</li>

<div className={'FancyBorder FancyBorder-' + props.color}>
  {props.children}
</div>

<div className="SplitPane">
  <div className="SplitPane-left">
    {props.left}
  </div>
  <div className="SplitPane-right">
    {props.right}
  </div>
</div>

<SplitPane left={<Contacts />} right={<Chat />} />

<main>
  <slot></slot>
</main>

<header>
  <slot name="header"></slot>
</header>

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

<div ref="div">hello</div>

this.$refs.p.offsetHeight

├── config # umi configuration, including routing, building and other configurations│ ├── config.ts # Project configuration.umirc.ts has a higher priority, and this method requires deleting .umirc.ts
│ ├── routes.ts # Routing configuration│ ├── defaultSettings.ts # System configuration│ └── proxy.ts # Proxy configuration├── mock # All js and ts files in this directory will be parsed as mock files├── public # All files in this directory will be copied to the output path. Even if hash is configured, it will not be added├── src
│ ├── assets # Local static resources│ ├── components # Business common components│ ├── e2e # Integration test cases│ ├── layouts # Global layout file for conventional routing│ ├── models # Global dva model
│ ├── pages # All routing components are stored here│ │ └── document.ejs # It is agreed that if this file exists, it will be used as the default template│ ├── services # Backend interface services│ ├── utils # Tool library│ ├── locales # International resources│ ├── global.less # Global style│ ├── global.ts # Global JS
│ └── app.ts # Runtime configuration file, such as modifying routes, modifying render methods, etc. ├── README.md
└── package.json

├── mock # Project mock simulation data├── public # Static resources│ └── index.html # HTML template├── src # Source code│ ├── api # All requests│ ├── assets # Theme fonts and other static resources│ ├── components # Global public components│ ├── directive # Global directive│ ├── filters # Global filter
│ ├── layout # Global layout
│ ├── router # Routing│ ├── store # Global store management│ ├── utils # Global public methods│ ├── views # views of all pages│ ├── App.vue # Entry page│ └── main.js # Entry file loading component initialization, etc.├── tests # Tests├── vue.config.js # vue-cli configuration such as proxy, compressed images└── package.json # package.json

{
  path: '/',
  component: '@/layouts/index',
  routes: [
    { path: '/list', component: 'list' },
    { path: '/admin', component: 'admin' },
  ],
}

<div style={{ padding: 20 }}>{ props.children }</div>

{
  path: '/user/:id',
  component: User,
  children: [
    {
      path: 'profile',
      component: UserProfile
    },
    {
      path: 'posts',
      component: UserPosts
    }
  ]
}

<div id="app">
  <router-view></router-view>
</div>

<NavLink exact to="/profile" activeClassName="selected">Profile</NavLink>
history.push(`/list?id=${id}`)

<router-link to="/about">About</router-link>
this.$router.push({path: '/list', query: {id}})

 const router = new VueRouter({ ... })
 router.beforeEach((to, from, next) => {
   // ...
 })

 router.afterEach((to, from) => {
   // ...
 })

// new model: models/products.js
export default {
  namespace: 'products',
  state: [],
  reducers: {
    'delete'(state, { payload: id }) {
      return state.filter(item => item.id !== id);
    },
  },
};
//connect model
export default connect(({ products }) => ({
  products,
}))(Products);

//dispatch model reduce
dispatch model reduce({
  type: 'products/delete',
  payload: id,
})

// new module
const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations:
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  }
})
//bind UI
<input v-model="$store.state[modelesName].name"/>
//commit module mutation 
store.commit('increment')

store.dispatch({
  type: 'incrementAsync',
  amount: 10
})