React

Single Page Application (SPA) with React

Let’s talk about ReactJS today and how we can easily create a Single Page Application (SPA) with React. For routing , I will use a library called react-router . For this post, I will use v3.x . I will write another article based on v4.x.

ReactJS is really popular now a days , and developers are using ReactJS and react-router for creating SPAs .

react spa

I will use 4 Routes for my sample SPA with React. For this , I created 4 Components which represent 4 different routes.
Then we can import 4 Components on index.js file like below-

import App from './App/Components/App.jsx';
import Profile from './App/Components/Profile.jsx';
import Contact from './App/Components/Contact.jsx';
import Error from './App/Components/404.jsx';

Our `404.jsx` is actually for 404 or not found route.

We can use those Components to create out SPA routing with react-router-

<Router history={hashHistory}>
    <Route path="/" component={App}>
        <Route path="/profile" component={Profile}/>
        <Route path="/contact" component={Contact}/>
        <Route path="*" component={Error}/>
    </Route>
  </Router>

The full Code is available here https://github.com/destromas1/react-spa

Cheers!

Standard
JavaScript, React

Play with React for beginners with react-basic-starter

I have been working with React for long time now . But as I was not regular in writing , that’s why I have never written a single post on React.

This would be officially my first ReactJS post , and I know I am late.

react-basic-starter

Its 2017 . There are lot of articles published on Web . Facebook has created a tool for React developers called create-react-app which is awesome for starting any new react based project. But What I feel , if anyone is a fresher in React , then its a bit more than the skill level.Also I feel React Developers should learn a bit of Webpack , thats why I added a simple Webpack Config for building react code.

This post actually tries to help a react fresher to start creating his/her first React sample component and do some fun in his Bedroom playground.

module.exports = {
  entry: './index.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {

        }
      }
    ]
  },
};

The upper code snippet is available inside webpack.config.js file and It will build the React Code and JSX and create a file called `bundle.js`

Inside our `index.html` file we have included this bundle to load as script.

<script src="bundle.js"></script>

Our simple component is available on `App.jsx` file which has only one H1 inside.

export default class App extends React.Component {
  render() {
    return(
      <div>
        <h1>React Basic Starter</h1>
      </div>
    )
  }
};

Full code is available at my Github Repo https://github.com/destromas1/react-basic-starter

Cheers!

Standard