Learning React JS by Writing Small Example Apps
#Step 1:
We will create a new folder named "ReactApp" and then inside it create folders 'public', 'src'.
Also, create a new file called webpack.config.js and put the following code in the file:
module.exports = {
entry: "./src/app.js",
output: {
path: __dirname + '/public',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
{test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'file-loader'},
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015','react']
}
}
]
},
devServer: {
contentBase: "./public",
colors: true,
historyApiFallback: true,
inline: true
}
};
#Step 2:
Hello World Component in React in a file called app.js inside the src folder:
import React, {Component} from 'react';
import {render} from 'react-dom';
import './app.css';
import 'materialize-css/bin/materialize.js';
import 'materialize-css/bin/materialize.css';
class App extends Component {
render() {
return (
<div>
<h1> Hello React Learners ! </h1>
</div>
)
}
}
Also create an empty app.css file for styling later.
Run the webpack server using the following command:
webpack-dev-server --progress --hot --inline
#Step 3:
We will add a Header Component in a new folder at location /src/components/Header.js now:
import React, {Component} from 'react';
import {render} from 'react-dom';
export default class Header extends Component {
render() {
return (
<nav className="blue-grey darken-3">
<div className="nav-wrapper">
<div className="brand-logo">
<a href="#">
mappmechanic
</a>
</div>
<ul id="nav-mobile" className="right hide-on-med-and-down">
<li><a href="nav1.html">Nav Option 1</a></li>
<li><a href="nav2.html">Nav Option 2</a></li>
<li><a href="nav3.html">Nav Option 3</a></li>
</ul>
</div>
</nav>
)
}
}
#Step4:
Now we will also create a footer for our ReactApp in the same folder with a new file called footer.js:
import React, {Component} from 'react';
import {render} from 'react-dom';
export default class Footer extends Component {
render() {
return (
<footer className="page-footer blue-grey darken-1">
<div className="container">
<div className="row">
<div className="col l6 s12">
<h5 className="white-text">Rahat Khanna</h5>
<p className="grey-text text-lighten-4">
UI Developer working on creating awe-inspiring User Experience using HTML5, CSS3 & Javascript.
</p>
<p className="grey-text text-lighten-4">
Expertise: Angular2, ES6 (ES2015) , ReactJS, Ionic 2, Cordova/Phonegap, Salesforce & NodeJS
</p>
</div>
<div className="col l4 offset-l2 s12">
<h5 className="white-text">Links</h5>
<ul>
<li><a className="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a className="grey-text text-lighten-3" href="#!">Link 2</a></li>
</ul>
</div>
</div>
</div>
<div className="footer-copyright">
<div className="container">
© 2016 Copyright Rahat Khanna a.k.a MAppMechanic
<a className="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
)
}
}
#Step 5: Now in order to show the header and footer created we have to modify our main App component in app.js file:
import React, {Component} from 'react';
import {render} from 'react-dom';
import './app.css';
import 'materialize-css/bin/materialize.js';
import 'materialize-css/bin/materialize.css';
/* Importing Components */
import Header from './components/header';
import Footer from './components/footer';
class App extends Component {
render() {
return (
<div>
<Header />
<h1> Hello React Learners ! </h1>
<Footer />
</div>
)
}
}