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.
CodeKrypt 
新冠快点结束吧!
LikeLike
新冠肆虐，注意安全！
LikeLike
Wish You All The Best In 2021!
LikeLike
不知道说什么好,还是祝疫情早点结束吧!
LikeLike