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.

npm install http-server -g
http-server ./YOUR_PATH -p 3000

Using Python, you can use the following command:

python -m SimpleHTTPServer

If you like to share your project in localhost to worldwide, you have 2 alternatives:

https://ngrok.com/

./ngrok authtoken YOUR_TOKEN
./ngrok http 3000

https://localtunnel.github.io/www/

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