Create React App

Create React app faster than you think. Bundle with development aid features and production optimizing features. All you need to know will be covered here. In a hurry go to step 1.

Every time when you start a new ReactJs project you have to clone Reactjs boilerplate from GitHub or any other repository. What if that boilerplate is not up to date. And the other thing is you have to save that boilerplate URL in order to clone it when it is necessary. What if we have an NPM library that does for us. After trying several such libraries I encounter with an awesome library that is easy to deal with.

It carries lots of useful features. Simple to use. So I thought of writing this article because if you are in hurry to learn ReactJs or create simple application with ReactJs, best option is this. Because there are lots of reasons. It comes with necessary features not with lots of unnecessary features that make final application more complex. If you do want more features you can add them too. Later I will cover those things. Lets create simple ReactJs application in few easiest steps.

Follow below mention create react app steps to start tutorial

Step 1: Prerequisities

1. You should have NodeJs installed on your computer. If not click here to install.

2. Install “create-react-app” npm package globally

npm install -g create-react-app

Step 2: Create Reactjs Starter Kit.

Before you start to create reactjs application we need to install reactjs and other required libraries. Starter kit is something like Framework that bundles all the required libraries and functions. All we have to do, start coding. Open your terminal or command prompt and go to directory where you want to place your Reactjs codes and run below command.

create-react-app my-app

Above command will create Reactjs Starter Kit inside the “my-app” folder. If you listed out the directories or folder where you run the code you can see that folder. If you want to change the folder name change last word of the command. Remember no spaces.

Step 3: Create Reactjs Application

Here we are creating a sample ReactJs application in development mode. Development mode carries lots of features that help you to code. like auto reloading web browser when change occur, Showing coding errors and etc.

Go to created folder “my-app” and run below code to run the application for the first time.

npm start

Open http://localhost:3000 to view it in the browser. Your react code relies in src/index.js. The page will reload if you make edits on index.js. You will see the build errors and lint warnings in the console.

public/index.html is the page template;
src/index.js is the JavaScript entry point.

Open src/app.js and paste below code.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      input:""
    }
    this.handleInput = this.handleInput.bind(this)
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          <h3>Printing input text </h3>
          <input type="text" onChange= {this.handleInput}/> <br/>
          <p>input text:</p>
          <p>{this.state.input}</p>
        </p>
      </div>
    );
  }
  handleInput(e){
    this.setState({input: e.target.value})
  }
}
export default App;

Step 4: Create react app for production release.

npm run build

Enjoy Reactjs coding. Don’t forget to leave a comment.

Create React App

Step 1: Prerequisities

Step 2: Create Reactjs Starter Kit.

Step 3: Create Reactjs Application

Step 4: Create react app for production release.

Leave a Comment