Written by Arjun SK

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”

  4. 增大壮阳、丰乳缩阴、泡妞把妹，价值十万资料无限下。

    逆向推荐，上线替下线赚钱，什么不用干，坐收二百万。

    增大网：

    111.zhuan.in

    Like

    Reply

  14. 股票配资是一种放大的股票投资工具，将用户的自有资金按照一定配资倍数放大给投资者使用；投资者只需支付相应的保证金及资金管理费。
    股票配资能有效的放大投资收益。在系统性或确定性机会出现时，投资者运用配资方案，可以获得自有资金基础上1—10倍的资金，能够将收益水平放大到几倍。投资者需要注意，配资工具在放大收益也会放大亏损风险，投资者应在投资机会比较确定并管理好风险的前提下使用，投资一些相对稳健的股票。
    对股票配资稍微了解一点的人都应该认识到进行股票配资，放大了交易的比例，扩大收益。首先股票配资使一部分缺少资金的人能抓住有利的进场时间迅速获利；其二，股票配资可以使那些正做其他生意的人不至于因为把资金投入期货市场股票市场而耽误生意的运营；其三，股票配资，需要由出资方监督，这样对股票配资者来说就是一种提醒，使股票配资者能及时止损，使他们不至于把全部资金全部投入以至于亏完，通过阶梯式的资金投入也一定程度上限制了投资者的赌博心理，为调整操作思路赢得了时间。
    股票等电子化的金融投资方式本身对于大部分中国投资者来说就是一个比较新型的东西。在中国发展起来的时间不是很长，但由于其突出的优势，这几年发展速度惊人，可以说股票基本上已经达到全民皆股的规模。
    尚盈股票配资模式只要运作合理，是有一定好处的，同时也提高了资金的使用效率，对合作双方来说都是比较有利的。
    多数投资者具有良好的盈利能力和风险控制能力，但受制于自身资金量较小，其操盘能力和盈利能力无法得到充分发挥。而解决这一问题最直接的方法就是扩大操作资金。利用资金杠杆，在大行情中，只要把握一次机会即能实现利益最大化。股票配资就是为具备丰富操盘经验及良好风险控制能力的投资者提供的放大其操作资金的业务。
    配资炒股合作中的双方称为操盘方和出资方，操盘方是指需要扩大操作资金的投资者，出资方是指为操盘方提供资金的个人。合作过程如下：
    首先，操盘方与出资方签署合作协议，约定股票配资费用及风险控制原则；
    其次，操盘方作为承担交易风险的一方，向出资方交纳风险保证金（此为操盘方自有资金），以获得出资方提供的 1-10倍于其自有资金的交易账户；
    之后，由操盘方独立操作该账户，同时，出资方按合同约定对该账户进行风险监控，以确保其出资安全。

    Like

    Reply

  18. 增大壮阳！丰乳缩阴！泡妞把妹！房中秘术！

    够硬！男人的把柄才能堵住女人的漏洞！

    什么不用干，不用拉下线，坐收二百万！

    注册网址：

    earn.948.ooo

    吊炸天！

    Like

    Reply

  23. 增大网：

    增大壮阳，丰乳缩阴，泡妞把妹，房中秘术！

    够硬，男人的把柄才能堵住女人的漏洞！

    什么不用干，不用拉下线，坐收二百万！

    网址： daxie.521982.CoM

    吊炸天！

    Like

    Reply

  26. 送你一片大海，让你一帆风顺；送你一个太阳，让你热情奔放；送你一份真诚，祝你开心快乐；送你一份祝福，让你快乐天天！

    Like

    Reply

  28. 增大壮阳、丰乳缩阴、泡妞把妹、房中秘术！

    够硬！男人的把柄才能堵住女人的漏洞！

    什么不用干，不用拉下线，坐收九百万！

    网址：

    longya.184.ooo

    增大网，吊炸天！

    Like

    Reply

  47. Let me send comments for you.
    10,000 comments cost $1, 100,000 comments cost $5
    You can receive this comment, it means that I sent it successfully.
    If you want to buy, pay 1 or 5 dollars through PayPal, after that,
    Send the following information to my Email:
    Name, email, Url, content.
    I will send the send Log to you by email within three days
    My PayPal & Email: sdzfd@hotmail.com

    Like

    Reply

Leave a Reply

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

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com 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 )

Cancel

Connecting to %s