https://github.com/jabrena/reactlab
A Lab about ReactJS
https://github.com/jabrena/reactlab
Last synced: 24 days ago
JSON representation
A Lab about ReactJS
- Host: GitHub
- URL: https://github.com/jabrena/reactlab
- Owner: jabrena
- License: mit
- Created: 2016-08-04T18:15:19.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-10-18T22:21:12.000Z (over 8 years ago)
- Last Synced: 2025-02-13T10:48:03.610Z (3 months ago)
- Language: HTML
- Homepage: https://jabrena.github.io/ReactLab/www/
- Size: 11.8 MB
- Stars: 2
- Watchers: 9
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Lab
A Lab to learn ReactJS in a creative way.
## 1. Getting started (Week 1)
- https://facebook.github.io/react/docs/tutorial.html
### 1.1 Why React?
- https://facebook.github.io/react/docs/why-react.html
- https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
- https://en.wikipedia.org/wiki/Single_responsibility_principle
- https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51#.c9sj6lt8s
### 1.2 JSX
- https://facebook.github.io/react/docs/jsx-in-depth.html
- https://facebook.github.io/jsx/
- https://babeljs.io/repl/
- https://ponyfoo.com/articles/react-jsx-and-es6-the-weird-parts
- http://blog.zigomir.com/react.js/jquery/2015/01/11/jquery-versus-react-thinking.html
- https://ponyfoo.com/articles/react-jsx-and-es6-the-weird-parts
### 1.3 Hello World in React (Game 1)
Create a Web project and try to use React.js in a Web document.
- https://facebook.github.io/react/docs/top-level-api.html#react.render
*Dependencies*
- https://cdnjs.com/libraries/react/
- https://code.jquery.com/
*Deployment notes*
To launch in localhost your example exist several alternatives. With Node.js you can use the following module.
``` bash
npm install http-server -g
http-server ./YOUR_PATH -p 3000
```
Using Python, you can use the following command:
``` bash
python -m SimpleHTTPServer
```
If you like to share your project in localhost to worldwide, you have 2 alternatives:
https://ngrok.com/
``` bash
./ngrok authtoken YOUR_TOKEN
./ngrok http 3000
```
https://localtunnel.github.io/www/
``` bash
npm install -g localtunnel
lt --port 3000 --subdomain myproject1
```
## 2. Using React in a Document (Week 2)
### 2.1 React Component Lifecycle
- https://facebook.github.io/react/docs/component-specs.html
- https://facebook.github.io/react/docs/multiple-components.html
- https://facebook.github.io/react/docs/tutorial.html
### 2.2 States (render, getInitialState, getDefaultProps, change, click, submit, componentWillMount, componentDidMount)
- https://facebook.github.io/react/docs/forms.html
### 2.2 Adding logic in your components
- https://facebook.github.io/react/tips/if-else-in-JSX.html
- https://facebook.github.io/react/tips/expose-component-functions.html
### 2.3 Properties
- https://facebook.github.io/react/docs/reusable-components.html
### 2.4 Create a contact form with React (Game 2)
## 3. Interacting with the server (Week 3)
### 3.1 React + JQuery
- https://facebook.github.io/react/docs/tutorial.html
- http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/
- https://jquery.com/
- http://blog.jquery.com/
### 3.2 Fetching from the server
### 3.3 Send data to the server
### 3.4 Load data from a REST API or Mock in a Document (Game 3)
## 4. SPA with React (Week 4)
### 4.1 What is SPA?
https://medium.com/@sapegin/react-and-redux-single-page-applications-resources-22cd859b0c1d#.lsjjkq1fo
### 4.2 Redux
- http://redux.js.org/
- https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree?course=getting-started-with-redux
### 4.3 React Router
- https://github.com/reactjs/react-router
- http://strml.github.io/react-router-component-transition/#/
### 4.4 Reflux.js
- https://github.com/reflux/refluxjs
### 4.5 Inmutable.js
- https://facebook.github.io/immutable-js/
### 4.6 Create a simple SPA about your favourite hobbie (Game 4)
*Dependencies*
- https://cdnjs.com/libraries/react/
- https://code.jquery.com/
- http://www.jsdelivr.com/projects/refluxjs
## 5. TDD with React (Week 5)
- https://github.com/zpratt/react-tdd-guide
## Requirements to participate in the "React Games"
To participate in the "React Games" it is necessary to manage:
### Minimum
- Git/Github
- SublimeText 3
- Experience in Web development (5 years of experience)
- JQuery + Ajax
- HTML5
- Bootstrap
### Standard
- Gitflow
- Chrome DevTools
- Node.js programming
- Grunt programming
### Premium
- MVC programming (Backbone.js, Angular.js)
- Material Design / Web Components
- ES2015
- Gulp programming
## Links
- https://github.com/facebook/react/wiki/Examples
- https://github.com/facebook/react-native
- https://github.com/winterbe/spring-react-example
- https://github.com/winterbe/spring-react-example/blob/master/src/main/java/com/winterbe/react/React.java
- https://github.com/reflux/refluxjs
- https://github.com/DavidWells/isomorphic-react-example
- https://react-bootstrap.github.io/
- http://www.material-ui.com/#/
- https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html
- https://github.com/gaearon/react-hot-boilerplate
- http://ghv.artzub.com/#repo=react&climit=10000&user=AgtLucas
- http://ghv.artzub.com/#repo=jquery&climit=2000&user=timmywil
-