React 101

Learning React.js

by Kriti

HTML

<div id="app"></div>

CSS

table td,th {
	border: 1px solid;
	padding: 5px;
}
p{
	font-size:14px;
	color: red;
}
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class TodoApp extends React.Component {
  constructor(props){
	super(props);
	this.state = {
//	header: "Header from state...",
	content: "Content from State...",
	data:[
		{
			"id":1,
			"name":"A",
			"age": "2",
			"school": "Gargi"
		},
		{
			"id":2,
			"name":"B",
			"age": "3",
			"school": "GTB"
		},
		{
			"id":3,
			"name":"C",
			"age": "1",
			"school": "MPS"
		}
	]
	}
	}
  render() {		
    return (
      <div>
       <h1>{this.props.headerProp}</h1> 
			 <h2>{this.state.content}</h2> 
			 <h3>{this.props.contentProp}</h3>
			 <Content/>
			 <table>
			 	<tbody>
				<tr>
					<th>ID</th>
					<th>NAME</th>
					<th>AGE</th>
					<th>SCHOOL</th>
				</tr>
			 		{this.state.data.map((person,i) => <TableRow key = {i} data = {person} />)}
			 	</tbody>
			 </table>
      </div>
    )
  }
}

class TableRow extends React.Component{
render(){
return(
	<tr>
		<td>{this.props.data.id}</td>
		<td>{this.props.data.name}</td>
		<td>{this.props.data.age}</td>
		<td>{this.props.data.school}</td>
	</tr>
);
}
}

/*class Header extends React.Component{
render(){
var headStyle = {
fontWeight: 'bold',
fontSize: 25
}
return(
	<div>
       <h1 style={headStyle}>Header!!</h1>
      </div>
);
}
}*/


class Content extends React.Component{
render(){
var i = 1;
var myStyle = {
			fontSize: 14,
			color: 'blue'
		}
	return(
		<div><h1>Javascript Expressions!!</h1>
		<p style = {myStyle} data-custom="customAttribute">
			 Javascript Expressions = {3+4} !!!</p><p>
			 Ternary Conditionals = { i == 1 ? 'True!' : 'False'} !!!
			 </p></div>
	);
}
}
TodoApp.defaultProps = {
	contentProp: "Content from props...."
}
ReactDOM.render(<TodoApp headerProp = "Header from props...."/>, document.querySelector("#app"))