https://github.com/yining1023/socialgenius
This is a social genius game written in React
https://github.com/yining1023/socialgenius
Last synced: 4 months ago
JSON representation
This is a social genius game written in React
- Host: GitHub
- URL: https://github.com/yining1023/socialgenius
- Owner: yining1023
- Created: 2017-06-19T06:11:57.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-22T02:33:18.000Z (over 8 years ago)
- Last Synced: 2025-03-14T10:11:52.934Z (8 months ago)
- Language: JavaScript
- Size: 101 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### A Social Genius Game Written in React
### [Demo](https://codepen.io/yining1023/pen/YQQZPE?editors=0010)
### Turtorial
### Before We Start
### What We're Building
### To run this
- $`git clone` / download this repo
- $`npm install`
- $`npm start`
- then you should be able to a game interface
### What is Social Genius Game?
### Prerequisites
we're also using some features from ES6, a recent version of JavaScript. In this tutorial, we're using arrow functions, Spread syntax, classes, let, and const statements. You can use [Babel REPL](http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact&targets=&browsers=&builtIns=false&debug=false&experimental=false&loose=false&spec=false&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUAcjogQUcwEpeAJTjDgUACIB5ALLK6aRklTRBQ0KCohMQk6Bx4gA) to check what ES6 code compiles to.
### What is [React](https://facebook.github.io/react/)?
- React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
- Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
- A Simple Component
React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props.
- A Stateful Component
In addition to taking input data (accessed via this.props), a component can maintain internal state data (accessed via this.state). When a component's state data changes, the rendered markup will be updated by re-invoking render().
### Components
- game
- board
- sqaure
### Method
- this.props
- this.state
- this.setState
### Getting Started
- Developer Tools
The React Devtools extension for Chrome and Firefox lets you inspect a React component tree in your browser devtools.