React+redux Development Combat Project "American Regiment app", not as difficult as you think

Source: Internet
Author: User

readme.md Preface


 

began to learn react, on the Internet to find some articles, read the official website of some documents, then feel react started or quite simple,  
and then on the Internet to find a react actual combat practicing project, personally learned that this project is suitable for beginners or advanced friends  
Practice, here to share with you

Project Introduction

The project similar to the public comments, the United States and other O2O software, similar functions, but because it is practicing project, the purpose is to React+redux  
application, so in some functions will be simplified, features later comments, let everyone see the effect

Project Demo





GitHub Address
Introduction to the Online demo function



1. Home Development GitHub Address



2. City page GitHub address



3. Search results page GitHub address



4. Details page GitHub address



5. Login page GitHub address



6. Collection and purchase GitHub address



7. Personal Center page GitHub Address



8. Evaluation function GitHub address
System & Technical Analysis


If you do not understand [react] (http://reactjs.cn/) and [redux] (http://redux.js.org/) beginners can go to the Internet to find some information  
and blog to look at, first of all, it is best to go to see the official document.

-REACT

framework react provides specifications for module development, each component, each page as a module component, greatly facilitate the development of the team, and can be very  
convenient for the separation of components

-redux is a data management container , can be very convenient to achieve data sharing between components, because the react data flow is one-way, unlike angular, such as its  
two-way data flow framework, so react will be combined with flux or redux to develop and use. The official concept is obscure, understanding the state, store, Action,reducer, and then   
you can understand the

>redux is a predictable a. Container for JavaScript Apps.

-Less
 a precompiled language for CSS. The styles and layouts in this project are still div+css.

-Management tools GIT&WEBPACK&NPM
 git as a managed tool for code, webpack as a development management tool, NPM package management

 -background analog data KOA

Summary

After learning this project, I believe you will know the application of react+reduce development, and development process, and so on, but also deepen the understanding of react, which is  
the biggest benefit of this project. On the other hand, react brings us a modular development model that is very clear and easy to maintain and extend in the code structure. The  
biggest benefit of exploiting jquery is that the react data-driven view is developed in a way that also has a certain boost in performance.

But the project is always the application of the framework, if you want to achieve the code and framework performance optimization, the project is far from the effect. In this project, we also  
use some of the performance optimizations commonly used in the enterprise, such as using React's official library **react-addons-pure-render-mixin**, but for a  
specific feature, Use this method and can not achieve very good results, if you need a deeper understanding of the framework of react, in addition to the necessary documents, its internal  
organizational structure and implementation of the way to understand, the small series now has not been in-depth study, the ability of students can study more.



Description


The development process is in accordance with the above order development, GitHub above has 9 branches, corresponding to each function of the development, we can download the code in order to learn the  
 convenience of beginners to learn and use, the project from the MOOC Network react actual combat projects, on this basis modified a little problem, The main code is consistent. Reference MOOC net  
 [react imitate the public comment], the above notes special details, we must look at

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.