Getting Started with React.js

June 06, 2016

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.

See the Pen React Hello World No Component by Eugenio - Keno - Leon (@k3no) on CodePen.

Hello World From a component:

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

See the Pen React Hello World Component by Eugenio - Keno - Leon (@k3no) on CodePen.

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

Hello World from a styled Component

See the Pen React HW Nested Component by Eugenio - Keno - Leon (@k3no) on CodePen.

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

Props:

See the Pen React HW Props by Eugenio - Keno - Leon (@k3no) on CodePen.

You can has default props:

Default Props:

See the Pen React HW Default Props by Eugenio - Keno - Leon (@k3no) on CodePen.

Prop Types:

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

See the Pen React HW PropTypes by Eugenio - Keno - Leon (@k3no) on CodePen.

Passing Props:

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

See the Pen React HW Transfer Props by Eugenio - Keno - Leon (@k3no) on CodePen.

Handling Events:

Before digging 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 )

See the Pen React User Interaction by Eugenio - Keno - Leon (@k3no) on CodePen.

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.

See the Pen React State by Eugenio - Keno - Leon (@k3no) on CodePen.

User Input:

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

See the Pen React Input by Eugenio - Keno - Leon (@k3no) on CodePen.

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

Best,

Keno