React Tutorial #4 - Props

Hey gang, in this React tutorial I'll be introducing you to props and state. Props are a way we can pass external data into a component, which can then render the prop onto the web page.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== PSD to WordPress Playlist ==========

============== The Net Ninja =====================

================== Social Links ==================

[dreamvallyhasan]

You are the best tutor in entire youtube....thanks from the bottom of my ♥

[peteplevnjak]

You have awesome videos don't stop doing what you love never !

[sanjayshr]

Thanx for another awesome series :) Looking more videos on reactJS

[zdent]

So much easier to follow than the official tutorial...some of the syntax/methods are outdated though so make sure to refer to the official docs when things aren't working as shown in the video.

[swapnilshrivastava]

Still the best among other React tutorials

[SoreraRU]

Best explanation i've ever seen! I mean all of your videos. I will become a js-ninja so fast with that videos! Thx you, bro.

[stinfamous]

Thanks mate for your good explanations and you did indeed spelled Camembert well :)

[yusufsuererdem]

If it doesn't work use this please;


var React = require('react');
var ReactDOM = require('react-dom');


function TodoComponent(props) {

return <div>

<h1> Move Name : {props.name}</h1>
<h2> Genre : {props.genre}</h2>

<p>Cheese nameis: {myCheese.nameis}</p>
<p>Cheese smellFactor: {myCheese.smellFactor}</p>
<p>Cheese price: {myCheese.price}</p>

</div>;
}

var myCheese={nameis:'Camembert', smellFactor:'Extreme pong', price:'3.50'};

ReactDOM.render(

<div>
<TodoComponent name="Gladiator" genre="Action" />
<TodoComponent name="Goodfellas" genre="Drama, Gangsters" />
<TodoComponent nameis={myCheese.nameis}/>
<TodoComponent
<TodoComponent price={myCheese.price}/>
</div>,


);

[maxiequa]

how does this work for nested components? this assumes you are working from the root component so the logic and the property name are in the same file. what if you have an AppComponent which has several nested components within it? Cool vids!

[guitar]

Im so used to using double curly brackets in angular, that when the I got the error, I noticed the single curlies, took me couple o minutes lol

[superincognito]

my React dev tool sees the component as <Constructor/> and is not working on bbc

[WorstDeveloper]

How much is the cheese?
'Bout tree fiddy.

[yusufsuererdem]

These are my codes. I can not get data from var = myCheese variable. Could you help me?

var React = require('react');
var ReactDOM = require('react-dom');


function TodoComponent(props) {

return <div>

<h1> Move Name : {props.name}</h1>
<h2> Genre : {props.genre}</h2>

<p>Cheese nameis: {props.nameis}</p>
<p>Cheese smellFactor: {props.smellFactor}</p>
<p>Cheese price: {props.price}</p>

</div>;
}

var myCheese={nameis:'Camembert', smellFactor:'Extreme pong', price:'3.50'};

ReactDOM.render(

<div>
<TodoComponent name="Gladiator" genre="Action" />
<TodoComponent name="Goodfellas" genre="Drama, Gangsters" />
<TodoComponent cheese={myCheese}/>
</div>,


);

[mirza_irtiza]

which version u use in this video, because its not working in latest