Skip to content

Instantly share code, notes, and snippets.

Avatar

Claudia Maciel-Contreras clc80

View GitHub Profile
View Finished Clock Component
import React, { Component } from 'react';
class Clock extends React.Component {
constructor(props) {
super(props);
const currentTime = new Date()
this.state = {
hours: currentTime.getHours(),
minutes: currentTime.getMinutes(),
View title.js
import React, { Component } from 'react';
class Title extends React.Component {
render() {
return (
<div className="header">
<h2 className="title">
{this.props.title}
</h2>
</div>
@clc80
clc80 / app.css
Created May 31, 2018
basic styling for react app
View app.css
.header {
background: #0e4db2;
}
h2 {
font-family: cursive;
font-size: 24px;
}
View inline styling example1
<div style={{backgroundColor: 'blue'}}>
This text will have a blue background
</div>
View inline styling example2
render() {
const color1 = {backgroundColor: 'blue'};
return (
<div style={color1}>
This text will have a blue background
</div>
);
}
View Title Component Styled.js
import React, { Component } from 'react';
class Title extends React.Component {
render() {
return (
<div style={{backgroundColor: '#0e4db2'}}>
<h2 style={{fontFamily: 'cursive', fontSize: '24px'}}>
{this.props.title}
</h2>
</div>
View Form Component
import React, { Component } from 'react';
class Form extends Component {
render() {
return(
<div className="Form">
<h1>Form goes here</h1>
</div>
);
}
View app.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
</div>
);
View form.js
import React, { Component } from 'react';
class Form extends Component {
render() {
return(
<div className="Form">
<h1>Form goes here</h1>
</div>
);
}
View App.js
import React, { Component } from 'react';
import Form from './components/Form'
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
formItems: ['one', 'two', 'three']