This is the material needed for the React Workshop that will take place at Buenos Aires Facebook Developer Circles 2017.

First of all, start to install Git & npm (and optionally yarn):

• git https://git-scm.com/downloads
• node https://nodejs.org/en/
• yarn https://yarnpkg.com/en/docs/install

Also it will be useful to install dev-tools and react-perf for Chrome:

• https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
• https://chrome.google.com/webstore/detail/react-perf/hacmcodfllhbnekmghgdlplbdnahmhmm

• Focused mainly on the user interface
• Component based (composition model)
• Virtual DOM
• <JSX></JSX>
• /routing/solution
• React Native
• Facebook stands behind this project

React components and their life cycle:

First met with react and hot reload Understand Virtual DOM and under the hood of JSX Play around with JSX and non JSX syntax Task: create the same component with non JSX and then, as pure component (js function) What is better in terms of performance?

First met with props and components composition Play with defaults values and required props Task: add your profile image to the message

First met with react-router-dom, and another way of receiving props Play with routes, paths, and "match" object Task: Look at history changes in react devtools Task: print current url and add a button to go back and forward in history with match.history.goBack/goForward

First met with interval and componentDidMount & componentWillUnmount methods Clean resources Use of moment library Understand Render method calls Task: print ticks and see what happen with render method Task: implement state to become a stateful component

First met with react-perf-tool and react-addons-perf Task: uncomment perf line in App and run react performance tools, check instance and render count with inclusive option selected Task: increase chat bubbles to 10k and implement react-infinite

First met with react-motion Task: implement message fade-in and fade-out with a button

Just create your first app and start your project with reactjs. For your first app, use create-react-app tool, it will make your life easier getting all default configurations:

yarn global add create-react-app create-react-app react-workshop

Also you can fork this project ;)

Remember to pull request your results of the workshop, it may help others in the future

MIT

Feel free to use this if it can help you in any way, and contribute to it too :)