React case--News mobile Client--(REACT+REDUX+ES6+WEBPACK+ES6 's spa app)

To share a react application today, you should say in the first piece that you want to do a react+redux+xxx application. Have done part of it and share it. GitHub address is: dot I can

Here is the realization of a news mobile station of the spa. Originally wanted to write PC-side, but lazy, and because the main project is react, about the CSS and layout details are fooling people. T.T, this is just about the JS part of the project.

The function here is very simple, there are a few points:

1, Sort by "heart"

When it is more than the previous, it will be in the front line.

2. Comment section

Comments on the news section similar to QQ space comments

Of course, you can also click on the news reply Oh.

=============================================

We see, the function is relatively simple, we clone project down, directly can use, inside has passed I use Webpack packing good file.

=============================================

Bundle.js has 3m+, this is because I added a lot of libraries, such as the swiper of the carousel diagram, and so on, and these things are not compressed. After you compress, you will feel that react do the mobile side is also possible.

Don't ask me why I don't need RN to do this. Because I'm not t.t.

=============================================

To understand this article also needs a certain foundation, such as ES6 Foundation, react and Redux Foundation.

=============================================

The last bit of crap, this thing hasn't been finished yet, just part of it, then use Redux's router as a complete spa and refine its test section. We look forward to it ~

============================================= (main text dividing line)

OK, next introduce our protagonist Redux, will not be able to go to my other post: click here

Redux, yesterday spent a morning, unexpectedly read it all the source code. I tell you, it's uncompressed redux.js only 600 lines. Angular has already 1w+ the line ...

The main is very simple, the source of a look to understand, and Redux is completely FP, that is, functional programming, it has built up some examples of functional programming. The FP library also has Lodas and underscore. I'm going to write another post about FP and redux.

Before parsing the code, give the file directory:

This directory is the official example directory, I have to use it directly. Webpack finishing files in public, bootstrap not packaged in Webpack, the project is generally not used, and other CSS and JS files are packaged in.

Among them, fonts is the font, Dist storage webpack after the packaging of JS and CSS files, public inside is the carousel map JS files and image files. Test is a testing file and it's not written yet. Because it's not TDD.

The remaining actions are stored in the Redux action file. Components are stored in the react component, containers is the configuration file redux how to encapsulate the component. Reducers is the reducer file for Redux, and the store is the configuration file for creating the store.

Webpack Main portal is index.js it is a file that has been added to the application, such as the import Swiper from "./public/js/swiper-3.3.1.min.js" and

Import React from ' React 'react-dom' react-redux'./containers/app './store/ Configurestore '"./dist/main.css""./public/js/swiper-3.3.1.min.js""./public/js/ Swiper.min.css "' react-bootstrap '= configurestore (); render (  <provider store={ store}>    <app/>  </provider>,  document.getElementById (' root '))

You will see this project with a redux entry in the project structure, even the code is similar, because it is from the previous code on the basis of the change, do not understand that you can see an article.

The homepage is not much to say, start the page layout and introduce CSS files and after packaging the JS file.

The main features mentioned above.

The first is the sort. What is the principle of sorting? According to the heart sort, the heart of how much.

Box is the three news, here will be based on children to iterate through, what is the children? Is the data sorted after the counter data of the Redux store.

As you can see, I've written a sort of data myself, sorted by the Val attribute of the data, and then traversed, which is the completion of the heart's characteristics.

state={  counter:{    one:{id:1,counter:0,title: "xxxx", Time:1},    two:{id:2,counter:0, Title: "xxxx", Time:1},    three:{id:3,counter:0,title: "xxxx", Time:1}   }

Here's the counter data, counter is the number of hearts. Do not say the sort, look at the code.

Comment function, there are three difficulties. 1 is the click Reply Pop-up input box , 2 is how to reply to the current comment . For example, the comment I reply to must be the comment, not the next one. 3 is how to show the content of the comments .

The hardest part is 2. This will also design the data structure of the store. I used a small method to avoid adding IDs. I'll talk about this later.

1. Click the pop-up input box.

Writing react or NG applications can not be written in jquery's mind. Click to eject the DOM cannot be manipulated with the Click event. Transformed into react thoughts, props and state. So, to write this.

This is rendered according to state Dom A, then click Operation State. By the way, react has a method of manipulating state and initializing state. Called Getinitialstate.

There is a hidden pit, the ES6 can not be used getinitialstate. So I wrote it like above. Es6 how to write state. So I wrote this in the following component:

This state becomes a property of this component, but it does not work with getinitialstate. However, you can use This.setstate ({display:false}). Write like this. To operate the state

2, this is more troublesome, first look at my design reviews of the store:

var data=[      [         {            text:"Here is comment 1",            huifu:["huifuxxxxxxxxxxxxx", ' 2xxxxxxxxxxxxxxxxxxxx ', ' 3xxxxxxxxxxxxxxxxx '          },         {            text:"Here is comment 1.2",            huifu:[ "Huifuxxxxxxxxxxxxx"]          }      ],[          {            text:"Here is comment 2",            huifu:[" Huifuxxxxxxxxxxxxx ", ' 2xxxxxxxxxxxxxxxxxxxx ', ' 3xxxxxxxxxxxxxxxxx ']          }      ],[          {            text: "Here is comment 3",            huifu:["huifuxxxxxxxxxxxxx", ' 2xxxxxxxxxxxxxxxxxxxx ', ' 3xxxxxxxxxxxxxxxxx ']          }        ]      ]

This is part of the entire comment, including the reply. If you want to add a comment on the data[article Id].push (like the structure of the comment data), the reply is also added directly to the data.

The question is, how do we guarantee that this reply is the comment, such as I reply to 123, How do you know is the comment 1 or comment 1.2 (the code of the comment 1.2)?

Here's a little method. My comment box is independent of traversal, that is, you can't send him an article ID. So what?

It takes the state of this component. Then comment on Operation state. That's it. Comment When you open a reply to input, pass in the ID of this comment, change the state of this component, and then ignore it.

The small method here avoids adding an id attribute to each comment, but a comment array, using the keys--of the array map method

Keys, which is the key to the array, is 0,1,2,3 use this as the article ID. OK!

Note that here you loop out the sub-component, you must give him a key props, due to the react diff algorithm, must ensure that the location and rendering of the sub-component is correct, pass a key, that happens, no ID I use here the keys to pass:

That's fine.

3. The problem shown is that the above traversal problem, the input box display is the component itself state problem.

See how the components are displayed:

{Data[newid].map (function(Items,keys) {return (              <div Key={keys} classname= "Body-text" > {Items.huifu.map (function(Item,keyss) {return(<div key={keyss}> 
                      )                  })                   }                                 </div>            )          })
}  

The data array is ours, which gives the format. Loop traversal.

The main is the display of the reply box, Operation State, here gives him a display property, but he is not true and false, but false and keys, this keys is the ID of the current comment, this ID becomes the Traverse the Keys property.

When I was 1, the picture was based on display, which is not much to say.

Advantages of react :

In fact, so many folders, so many JS files, with JS write, logic and clear and fast, and with react write also with learning costs. Why write with react. Put aside the front-end trend. The advantage of react is that it is very cool to maintain.

JS write these logic just began to write is very clear, I think after a period of time, want to maintain it is very difficult. Also, I want to change the data directly when the state, want to add a news to reuse my component, according to the React Virtual DOM algorithm, is not slow.

With Redux advantage is waiting for this news project bigger, a bunch of JS code, if there is redux maintenance that is much simpler. Because of the relationship of pure function, the test of Redux is very well written. Redux compression of the first 600 lines of code, plus react is also a lightweight framework, this is also very popular.

These frameworks are all similar and are data streams that let you control pages with data. The same is true of Ng, which simply modifies the data without frequently manipulating the DOM. This is the advantage of the framework. React on this basis to achieve the low-coupling, single data stream. Often hear the react maintain relatively cool voice. -。 -Good maintenance, low coupling, lightweight. Just in line with the current front-end requirements for the framework. So many people chose the react. And Jsx's writing is also relatively cool 0.0react behind and Facebook backing. Well, it will fire ...

questions about this news tip :

The problem is here: three news, each treated as an event, so--

Export Const Love_counter_one = ' Love_counter_one '= ' love_counter_two' = ' love_counter_three ' = ' Txst_counter_one '= ' txst_counter_two' = ' txst_counter_three '= ' Hf_counter_one '  = ' hf_counter_two '= ' Hf_counter_three '

Some people will say, if 100 news, is not write n more action?

At the time of writing, thinking is as the news of the homepage, I only put 3 news, followed by a more, click to open the News list page. Of course, if you take this as a news list page that does have to write n more xxx.

What about when the news is changed to a news list page?

Start by building a store that writes news IDs and news content. Of course you can also combine its comments and replies, not combined, by ID association is also possible. (How does it feel like a database 0.0)

The action here is changed to Txst_counter_news, of course, this action needs to pass the article ID. This is no trouble.

Reducer here is based on the article ID operation store, if not combined comments and replies, then, the news store only need to cut the news content. Note that the news has been deleted, and the corresponding comments and replies will be removed.

Combination of comments and replies, so is the same, comments and replies to the content left to visitors to add.

Component, because the news combination, then the above need to pass a news ID, intelligent components based on the ID method and data to the sluggish component. The principle is this. You can try to modify a bit, you can learn a lot of things.

There is so much to be aware of, and the next step is to add a routing feature that will make him truly a spa app. Of course, one of the symbols of the great god---will be filled with the test. Please look forward to ~

React case--News mobile Client--(REACT+REDUX+ES6+WEBPACK+ES6 's spa app)