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.
Setting up React was a breeze, from the JS Settings:
I also added a Scss (Sass) preprocessor, but that’s just in case I need to write some variables or what not in CSS.
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.
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:
Props are the next concept that is important to learn, a prop is basically an attribute of a component:
You can has default props:
Props can be defined within a component both for readability and validation, notice we are also using inline styles.
Props can be passed from parent to child, this can come in handy when making complex components.
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 )
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.
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.