Preface

Getting Started in React.js, or any other javascript library or framework usually takes me a few hours or days of configuring my environment (downloading/updating node,npm,webpack,etc,etc) , while it is eventually necessary to build apps for deployment , I usually get a better feel and experience through writing code and seeing what happens, consulting the documentation and the occasional youtube tutorial along the way.

Thanks to CodePen, you can start right away learning in small bites and at least postpone setting up your environment while you figure out if this is something you want to get into, here are a few pens I made with a bit of commentary that helped me get my noodle wrapped around React.js

CodePen Setup:

Setting up React was a breeze, from the JS Settings:

Babel as the Script Preprocessor (JSX to JS)

Quick add React & ReactDom

I also added a Scss (Sass) preprocessor, but that's just in case I need to write some variables or what not in CSS.

Hello World:

So the idea behind React is firstly to mix JS and HTML and chuck them into a JS file ( or files) , all the Html you will need will be injected into a lonely HTML element, through the ReactDOM.render method which basically says this goes here.

Hello World From A component:

All right, lets move hello world to a component, the building blocks of the React world :

Now let's nest another component and style them both:

Hello World from a styled Component

Props are the next concept that is important to learn, a prop is basically an attribute of a component:

Props

You can has default props:

Default Props

PropTypes

Props can be defined within a component both for readability and validation, notice we are also using inline styles.

Passing props

Props can be passed from parent to child, this can come in handy when making complex components.

Handling Events

Before diggin into State, let's figure out user interaction, a humble button and a click Handler that logs to the console for now.( also added Bootstrap to refine the presentation )

Almighty State

What better way to demonstrate state than with a toggle button, notice that the state has no properties, it is just a bit of private logic within the component.

User Input

A slightly more complex use of state with user input, in this case state does contain the input values.

And that's it for now, hope this helps you get started.

-K

Like this ?, well check out the second part :

More React pens