Objectives & CodePen Setup
Table of Contents
Objectives
Upon completion of this module, you should be able to:
- Explain the purpose of a JS component library.
- Describe what a component is within the context of React.
- Write and render valid JSX markup.
- Build simple React components with configuration properties.
- Make use of loops and conditional within your components.
- Develop React components in your browser using CodePen. (See below 👇)
Local vs Cloud Development
Developing React applications locally on your laptop means installing and configuring the Node.js package manager npm.
We’re going to skip local development, for now, in favour of building cloud-based React apps with CodePen.io.
“CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.”
📢 Note: Sign-up for a CodePen account so that you can save your work.
CodePen - Live Code Examples
Some of code examples in these notes are embedded CodePens.
By the end of these notes you’ll be able to build components like the Country component shown here:
See the Pen Simple React Component with Props by Kyle Geske (@stungeye) on CodePen.
📢 Note: Click “edit on codepen” (top right corner) to mess around with the code. Try styling the component in the CSS tab.
CodePen Template
You can create your own React componets in the browser using CodePen with this starter template: