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

Leave a Reply

Your email address will not be published. Required fields are marked *