https://github.com/meteor/meteor
curl https://install.meteor.com/ | sh
meteor create try-meteor
cd try-meteor
meteor
rm -rf ~/.meteor/
sudo rm /usr/local/bin/meteor
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import App from '../imports/ui/App.js';
Meteor.startup(() => {
render(<App />, document.getElementById('render-target'));
});
import React, { Component } from 'react';
import Task from './Task.js';
export default class App extends Component {
getTasks(){
return [
{ _id: 1, text: 'This is task 1' },
{ _id: 2, text: 'This is task 2' },
{ _id: 3, text: 'This is task3' },
];
}
}
renderTasks(){
return this.getTasks().map((task) => {
<Task key={task._id} task={task} />
});
}
render(){
return (
<div className="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{this.renderTasks()}
</ul>
</div>
);
}
import React, { Component } from 'react';
export default class Task extends Component {
render(){
return {
<li>{this.props.task.text}</li>
};
}
}body {
font-family: sans-serif;
background-color: #315481;
background-image: linear-gradient(to bottom, #315481, #918e82 100%);
background-attachment: fixed;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
paddging: 0;
margin: 0;
font-size: 14px;
}
.container{
max-width: 600px;
margin: 0 auto;
min-height: 100%;
background: white;
}
header{
background: #d2ef4;
background-image: linear-gradient(to bottom, #d0edf5, #ele5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}
#login-buttons{
display: block;
}
h1{
font-size: 1.5em;
margin: 0;
margin-bottom: 10px;
display: inline-block;
margin-right: 1em;
}
form{
margin-top: 10px;
margin-bottom: -10px;
position: relative;
}
.new-task input {
box-sizing: border-box;
padding: 10px 0;
background: transparent;
border: none;
width: 100%;
padding-right: 80px;
font-size: 1em;
}
.new-task input:focus{
outline: 0;
}
ul {
margin: 0;
padding: 0;
background: white;
}
.delete {
float: right;
font-weight: bold;
background: none;
font-size: 1em;
border: none;
position: relative;
}
li {
position: relative;
list-style: none;
padding: 15px;
border-bottom: #eee solid 1px;
}
li .text{
margin-left: 10px;
}
li.checked{
color: #888;
}
li.private{
background: #eee;
border-color: #ddd;
}
header .hide-completed{
float: right;
}
.toggle-private{
margin-left: 5px;
}
@media(max-width: 600px){
li {
padding: 12px 15px;
}
.search{
width: 150px;
clear: both;
}
.new-task input {
padding-bottom: 5px;
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent