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.
|
1 2 3 4 5 |
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.
|
1 2 3 4 5 6 7 8 9 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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
|
1 |
<div style={{float: "left"}} className="song-card-bottom-div"> |
They follow the camel case syntax, ie the first character of the word is caps.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
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.
