Build a React Portfolio On CodePen

Meetups are for Meeting People ● ● ● ● ● ●

Introduce yourself Learn together Share experiences Offer support after the meetup (slack, meetup discussion board) Network Share your knowledge

New Slack Channel

● latinodevs.slack.com/

Technology Events June 2018 ● ● ● ● ●

DeveloperWeek, June 19-20 Amazon Loft SoHo - Ongoing events Smashing Magazine Conference, Toronto 26-27 Priceline.com Hackathon for Social Good, June 23 Web Performance Group, June 27

Technology Events July 2018 ● ●

The AWS Summit, July 16-17 Immigrant Hackathon June 29 -July 1

Have an event to announce?

JOBS ● ● ●

Web Developer. AECOM. Government Projects UI Developer. TD Ameritrade. Product Frontend Developer. Dash. Online Media

Is your company hiring? Do you have an open source project?

When do you need to use ReactJS? React is a JS library for building maintainable and fast user interfaces. React architecture is based in components. React uses a virtual DOM that helps rendering changes in your UI faster. React dev environment has grown immensely. It has become and essential skill for all front-end developers You don't… Make a website with react. Use react or any other technology because is cool. Use a technology without first understanding what you project needs.

Small Intro to the Virtual Dom.

● Understand how a website is built by the browser. (DOM tree) ● Understand the difference between a website, UI and a web app ● Framework VS Library

● ● ● ● ●

React is Javascript It uses syntax ES6 It uses babel to compile the ES6 It uses JSX to render HTML and JS NPM or YARN to install packages

● DEMO TIME Regular DOM updates vs React Virtual DOM https://github.com/jscomplete/react-virtual-dom-demo

Props and State ● ●

Props are static data, it does not change State is dynamic data, it changes by using react method setState

Props are used to share data between components parent to child. States are more complex and are the most useful feature of react. Components can be stateful or stateless http://hacktivist.in/articles/React-es6-constructor-super

What is CODEPEN?

● ● ● ● ● ● ● ● ●

Online code editor Emmet and shortcuts Online development environment (console) Host images and assets (PRO feature) Process SASS or ES6 View compiled code Teaching and presentation tool Fork pens Allow for folders and files upload (PROJECTS)

Chris Coyer

● ● ● ● ● ● ●

Prolific coder and contributor CSStricks.com Co-founder of CodePen ShopTalk podcast Extensive work with WordPress Author: Practical SVG Fine Arts Graduate

Benefits of building your React Portfolio on CodePen

● ● ● ● ● ● ● ●

Runs your app without installing anything Easy to share Visual impact Showcase your app Publish articles Track views Export code Save in GitHub

Issues with CodePen

● ● ● ● ● ●

Can't test on mobile Hosted images require a PRO account Issues with external assets using HTTPS No github integration No JS autocomplete Console seems buggy

CODEPEN React Samples

● ● ● ●

https://codepen.io/TylerK/pen/ncJpD https://codepen.io/tbremer/pen/wKpaWe https://codepen.io/GuRuGu/pen/OgOvyL?page=2 https://codepen.io/HunorMarton/pen/wgpKGL?page=3

https://codepen.io/stevewojcik/pen/NMBwzR?page=3 https://codepen.io/waldo/project/full/XogPYm https://codepen.io/Kinrest/pen/bMmKWL?page=2

● DEMO TIME CodePen Emmet and CSS shortcuts App shortcuts https://codepen.io/iiCe89/pen/gMYVYQ

Projects VS Pens

Set up your React Development Environment

● ● ● ● ●

Add React and ReactDOM Select Babbel as preprocessor Use JS with your HTML Can I use template frameworks? Save your own templates

As you build apps, you will find a better way to organize your files and your code. This is called app architecture or app design patterns.

How to use NPM packages on CODEPEN

● ● ● ●

Use UNPKG https://unpkg.com/#/ It's a CDN for NPM packages Maintained by Michael Jackson @mjackson Include in Pen or Projects with