1) Setup the basic structure of your application as mentioned in the earlier tutorial.
2) In your app.js lets first setup a master list against which we will perform the search.
We are using constructor for setting up the initial state. In the above example we are setting up two initial states. 'color' state consist of all the initial master data and 'searchedResult' consist of the items which match the search text.
There is a difference in how you initialize states in es6 and es5. Read about more here
For reading more about the es6 syntax in react, go through this link
3) Lets add a textbox, and add an onChange event to it. We are also adding a function to update the list as per search result.
You will observe we have used bind to attach the update event. This is because when we call a function in without binding this will not be a class itself, it’s undefined.
Read more about it here -> http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
4) Lets add one more component so as to update the master list.
2) In your app.js lets first setup a master list against which we will perform the search.
We are using constructor for setting up the initial state. In the above example we are setting up two initial states. 'color' state consist of all the initial master data and 'searchedResult' consist of the items which match the search text.
There is a difference in how you initialize states in es6 and es5. Read about more here
For reading more about the es6 syntax in react, go through this link
3) Lets add a textbox, and add an onChange event to it. We are also adding a function to update the list as per search result.
You will observe we have used bind to attach the update event. This is because when we call a function in without binding this will not be a class itself, it’s undefined.
Read more about it here -> http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
4) Lets add one more component so as to update the master list.
No comments:
Post a Comment