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
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
● ● ● ● ●
● 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)
● ● ● ● ● ● ●
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