How To Organize the Project
Yes, we created little app using the react library. For simplicity i used (already removed in latest babel version) browser module of babel-core which compiles the react in the browser. Thats not ideal way of writing react aps(compiling in the browser is heavy operation that can be done using some task running tool instead).
Using Webpack
There are many tools which can do the react compilation job. One of those tools is a well known webpack which we will use for this post
Installing Webpack
For be able to run webpack you must have nodejs installed on your machine.
Lets run this command in the console for install webpack globally
npm install webpack -g
Now you able to bundle your javascript files into one js file named "bundle.js" with single console command
webpack ./app.js app.bundle.js
Instead of specify parameters in the command line, better attitude is to specify them in
wepack.config.js file:
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js'
}
};
Tha way the command is way more shorter:
webpack //thats it
Dependencies
Since we will create react application we will need to install various dependencies (like babel) which will help us to compile and run our project. It is good practice to store list of dependencies in package.json file, so npm module of nodejs will be able to install them at once using single command npm install.
For creating package.json file run:
npm init
Will promp you with various questions about your project, currently you may answer "yes" (by pressing ENTER) on all of them. finally
package.json file will be created in your root directory.
From now each module we will install - will be listed in the package.json file:
npm i react react-dom --save
package.json :
{
"name": "webpack project",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.3.0",
"react-dom": "^15.3.0"
}
}
babel
Since react contains some features that not supported by some browsers (like jsx) we will use babel library:
npm install --save-dev babel-loader babel-core babel-preset-react
So our
wepack.config.js file will finally look like:
module.exports = {
entry: './src/app.js',
output: {
path: './out',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.js?|\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react']
}
}]
}
}
Now our project configured in the way so when user runs
webpack
command in the console-
it compiles every javascript (.js) file and it puts the results inside
out directory in single file
app.bundle.js, isnt that cool?
Project Structure
After we created the minimalistic configuration, lets take a care about files that are part the project itself:
app.js file where we will place our (need to be compiled) javascript code (lets put it in the "src" directory) and
index.html - the main html file of our single page app which will refer the compiled results of javascript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="example"></div>
<script src="out/app.bundle.js" charset="utf-8"></script>
</body>
</html>
Now lets paste the app code into the app.js file
var React = require('react');
var ReactDOM = require('react-dom');
var $ = require("jquery");
//Search Bar
var SearchBar = React.createClass({
onChange: function(e) {
// console.log(e.target.value)
this.props.onTextChange(e.target.value);
},
render: function() {
return (
<div><input placeholder="type search term" onChange={this.onChange}/></div>
);
}
});
// Results List
var ResultsList = React.createClass({
render: function() {
var createItem = function(item, idx) {
return <li key={idx}>{item.text}</li>;
};
var list;
if(this.props.results && this.props.results.length && !this.props.loading) {
list = this.props.results.map(createItem);
} else if(this.props.results.length==0 && !this.props.loading){
list = 'no items yet';
} else if(this.props.loading) {
list = <div className="loader">Loading...</div>;
}
return <ul className="results">{list}</ul>;
}
});
//Search Page
var SearchPage = React.createClass({
getInitialState: function() {
return {results: [],loading:false};
},
loadResults: function(query){
this.setState({loading:true});
var url = "https://api.github.com/search/repositories?q="+query+"+language:typescript&sort=stars&order=desc";
$.get(url)
.then(function (result) {
if(result.items.length!==0){
var results = result.items.map(item => {
return {text: item.name}
}).slice(0,5);
}
this.setState({loading: false, results:results});
}.bind(this));//<-- important to bind this for use "setState"
},
handleSearchTextChange: function(txt){
this.loadResults(txt)
},
render: function() {
return (
<div>
<SearchBar onTextChange={this.handleSearchTextChange}/>
<ResultsList results={this.state.results} loading={this.state.loading}/>
</div>
);
}
});
ReactDOM.render(
<SearchPage />,
document.getElementById('example')
);
module.exports = SearchPage;
jquery
the last thing left is to add jquery library to the project
npm install --save jquery
After jquery is included and project compiled you can run it with
webpack-dev-server
The
developer server of webpack.
Here is
link to repo with the code.
Hope you have fun reading
