Creating a basic search in React

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.

Getting started with react

Setting up your first react application

1) Go to console and create your project folder

mkdir react-app

2) Got to react-app folder and type

npn init.

This step will ask for few information just keep on pressing enter and make edits if you want.

3) Now install the react libraries using npm.

npm install react-dom --save

This will install the two important react libraries which are required to run the application, -- save option add this dependencies to package.json

4) Now install the rest of libraries required.

npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react

This will install the babel transpiler which is needed to compile the ECMAScript 6 to ECMAScript 5 which is supported by most of the browsers.

Read more about it here-
https://www.quora.com/What-exactly-is-BabelJs-Why-does-it-understand-JSX-React-components

5) Now install the webpack server which will help in serving the application in development.

sudo npm install webpack webpack-dev-server -g

Read more about it here - https://www.quora.com/What-is-webpack

6) Create the basic files needed to run a basic hello world program

touch index.html App.js main.js webpack.config.js

7) Add this to your webpack.config.js

Read more about server configuration here-
https://github.com/webpack/docs/wiki/configuration

9) Now lets update the Add this to your index.html
10) Now lets update our main.js file with the following content.
11) Now lets add our first component. Add this to your app.js
12) Update your package.json file to add the script for starting the webpack server

13) Go to console and type

npm start

This will start the server in port 8085.