React Tutorial #3 - React Components

Yo gang, in this React tutorial we'll be taking a first look at components and how we create them. A component in React represents a certain part of your application, and requires only 1 method - the render method. In this method we write our JSX / HTML which will be rendered to the DOM when the component is inserted into it.

----- 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 ==================

[jasonwitt]

If you're getting an Error stating that React.creatClass is an undefined function it's because the newer versions of react don't support that. Tt's want you to use es2015 classes instead. Which haven't been covered yet.

If you want to follow along you can do this.

Install the NPM create-react-class package:
npm install create-react-class --save-dev

Then create a new variable under the ReactDom variable:
var createReactClass =

Now instead of using React.createClass() for the components use the var createReactClass()

example:
var TodoComponent = createReactClass({
// Stuff
});

[emranhasan]

Though the videos are old, it is still helpful for learning the basics. Your care for explaining each word is rare. I was desperate for such clarity. So Thank you much.
Hope you would not bother if I ask -
1. Why not the "/app/bundle.js" value in src attribute in script tag in index.html file means src/app/bundle.js instead of dist/app/bundle.js ?
2. As a very beginner, I want to understand the whole process in bird's eye view. Correct me if I'm wrong. So far all I understood is that : NodeJs calles Babel to transpile versions of js to a certain version > NodeJs calles Webpack to bundle the js files to one js file > NodeJs calles index.html> index.html is processed on browser along with bundle.js, bundle.cs
If so, why do I need to import React and ReactDOM to index.js and make the code complex ?

[rnvdrs]

for the html not showing at first onindex.js , what I noticed is that the file is configured to be JavaScript (right bottom menu) so the only thing that you really need to do is to change it to JavaScript(JSX) and it will work, awesome series so far! keep it up

[nicholasmaestrelloagiz]

I copy this code, but the browser dont show the text.

[allain]

can't wait for your next upload of videos..you're making it short and informative..

[chapreljohnvillegas]

If you're just starting this tutorial, his implementation will give you an error like React.createClass is not a method, this is because the newer versions of React doesn't support it and instead moved it into a separate package.
This works for me.
*npm install create-react-class --save*
and then in the index.js file just change the
*var TodoComponent = React.createClass({})*
with
*var CreateReactClass =
*var TodoComponent = CreateReactClass({})*

[Pravasith]

for those who are using Visual Studio code, click on the 'select language mode' button on the bottom right corner and type javascript react and select it.

[KamilNajax]

it's very hard to distinguish { from (, where you use this font :(

[TomLeg]

Change it to

Class TodoComponent extends React.Component {
render() { <h1>Hello</h1> };
}

[DonHaul]

This works (if it says React.createclassi s not a function on chromes console)

import ReactDOM from 'react-dom';
import React from 'react';

export default class TodoComponent extends React.Component {
render(){
return(
<h1>hello</h1>
)}
}

/>,

You could make video about your atom configuration i really like how it looks or at least list out the plugins, fonts or other stuff you use :)

[souravkumar]

tutorial😉😁😂👍😂anyone watching this tutorial in 2020....😂😜

[donk]

What about the ES6 way of creating the component? You said that you will show it at the end.

[oyown]

Guys, as Rony Vidaur says, you have to change the file configuration from JS to JSX for the HTML to show on index.js. Thing is, you won't find the JSX configuration if you do not have the react package installed FOR ATOM.
Just open up a terminal and do this - apm install react

[iqbalibrahim]

Is it necessary to install webpack? He said in the previous tutorial that there is a way to do without webpack

[oinSquares]

I wonder if I can require JQuery and use $('todo-wrapper') instead?

[jesgillespie]

I am trying to do this in c9.io

OK, many are the quirks in c9.io and many many are the quirks in configuring webpacket.



At this point I just want to improve how react itself works and not get bogged down in figgerin out webpacket (I will do that later, however).






The flavors of react are a little different bu I believe that will save me a lot of time.



First I got the create-react-app up and running just fine in the browser.



So going forward I am just tacking the Net Ninja components onto the existing app.



So for example the react app gives you



import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import registerServiceWorker from './registerServiceWorker';



ReactDOM.render(<App />,

registerServiceWorker();



and





import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';



class App extends Component {

render() {

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<h1 className="App-title">Welcome to React</h1>

</header>

<p className="App-intro">

To get started, KLJHKJLHKJ dit <code>src/App.js</code> and save to reload.

</p>

);

}

}



export default App;



So, for the very first component Net Ninja has us build, I just changed App to



import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';



class App extends Component {

render() {

return (

<div className="App">



</div>

);

}



}



export default App;





Now, if I wanted to in turn add a child component to App I can just do this:







import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import Howdy from './Howdy';



class App extends Component {

render() {

return (

<div className="App">



<Howdy />

</div>

);

}



}



export default App;





and here is the 'Howdy' component:



import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';



class Howdy extends Component {

render() {

return (

<div className="App">

<h1>howdy howdy howdy howdy howdy!</h1>

</div>

);

}

}



export default Howdy;



NOTICE THE FOLLOWING:



The App component can use the Howdy component because the App component contains



import Howdy from './Howdy';



And the Index component can use the App component because the Index component contains



import App from './App';

[gauravrathore]

React.createclass() is deprecated.
so install create-react-class first.

npm install create-react-class --save

var React=require('react');
var
var createReactClass =

var TodoComponent= createReactClass({
render:function(){
return(
<h1>Helloo this is component</h1>
);
}
});

/>, document.getElementById('todo-wrapper'));

[HCPantOfficial]

I am unable to purchase your Full Modern React Tutorial from your site as it is stucking at payment, now how to do

[WorstDeveloper]

React comes with JSX built into it? Because I don't remember that we specifically installed JSX.