Getting started with React

React is a javascript framework for building user interface. It is very common to see React used along with Redux, for complex web application. In the next session I will talk about redux.

Installation

Read complete instruction here.

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

if you are using Webstorm, make sure to change the settings.

Lets understand the basics.

index.js

This is the main root component that renders the App component.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // create a object of App class
import './index.css';

ReactDOM.render(
<App />,
    document.getElementById('root')
);

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <!-- Root Component will be rendered here -->
    <div id="root"></div>
  </body>
</html>

App.js

We might observe some changes in the html syntax when it is rendered using react. Note the below example

 <div style={{float: "left"}} className="song-card-bottom-div">

They follow the camel case syntax, ie the first character of the word is caps.

import React, { Component } from 'react'; // this is how we import 1 function from a class
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App; // this is how we export the entire class

Terms

state : State is best described as how a component’s data looks at a given point in time.

props : Props are best explained as “a way of passing data from parent to child.”

Our study example

Folder structure:

index.js

import React, { Component } from 'react';
import './App.css';

import FormElement from './FormElement' //no .js required

class App extends Component {
  render() {
    return (
      <div className="App">
        <p>This is App.js</p>
        <FormElement/>
      </div>
    );
  }
}

export default App;

FormElement.js

import React, { Component } from 'react';
import './FormElement.css';


var html_dom_obj;

/* ~~~~~~~Notes ~~~~~~~~
 1. We make sure that, we are only returning one parent div
 2. We always close the tags inside render() ie <input/>
 3. onClick={this.onItemClick}
 4. style={{display:(this.state.showLabel)?'block': 'none'}}
*/

class FormElement extends Component {

    constructor(props) {
        super(props);
        this.state = {showLabel: false , button_name:"Click Me"};
        this.onItemClick= this.onItemClick.bind(this);
    }

    componentWillMount() {

    }
    componentDidMount() {
        html_dom_obj = document.getElementById("name");
    }
    componentWillUnmount() {

    }


    onItemClick(event) {
        console.log("clicked",event.target.id);

        console.log("Obj",html_dom_obj);

        this.setState({ showLabel:true });

        this.setState({ button_name:html_dom_obj.value });

        event.preventDefault(); // prevents going to form submission

    };

    render() {
        return (
            <div >
                <form>
                    <label>Name:</label>
                    <textarea id="name" />

                    <button id="button_id" onClick={this.onItemClick}>{this.state.button_name}</button>

                    <p style={{display:(this.state.showLabel)?'block': 'none'}} > This is shown by state change! </p>

                </form>
            </div>
        );
    }
}

export default FormElement;

 

We covered almost all the basics of React in this tutorial. Next tutorial will mainly discuss about my webapp Musio, which is build using react and redux.

 

54 thoughts on “Getting started with React

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s