Learn React - Day 01

001 Hello World

To render/create a react app you need to add these files into your index.html file

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

React Methods:

ReactDOM.render(What to print, Where to print);

React.createElement('html element', Attributes, child);

                                                              

Example (001 Hello World)

var h1 = React.createElement('h1', null, 'Hello World');

var content = document.getElementById("content");

ReactDOM.render(h1, content);

See the Pen 001 Hello World by Mustafa Khan (@MKs-Notebook) on CodePen.

002 HTML Attributes

Example (002 HTML Attributes)

var a = React.createElement('a', {href: 'https://www.google.com/', target: '_blank', title: 'Google Link'}, 'Google');

var content = document.getElementById("content");

ReactDOM.render(a, content);

See the Pen 002 HTML Attributes by Mustafa Khan (@MKs-Notebook) on CodePen.

003 Printing Multiple HTML Elements

Example (003 Printing Multiple HTML Elements)

var h1 = React.createElement('h1', null, 'Hello World');

var p = React.createElement('p', {class: 'text'}, 'A quick brown fox jumps over the lazy dog.');

var content = document.getElementById("content");

ReactDOM.render(

               React.createElement('div', null, h1, p)

               ,

               content

);

See the Pen 003 Printing Multiple HTML Elements by Mustafa Khan (@MKs-Notebook) on CodePen.

004 Creating First Component

To create your component you need to create a class first which will extends React.Component and inside that class adds a render method. You can also use class as the first property(HTML Element) of React.createElement.

Remember that first letter of your class should be Capital.

Example (004 First Component)

class CustomeComponent extends React.Component {

               render(){

                              return React.createElement('h1', null, 'First Component');

               }

}

var firstComponent = React.createElement(CustomeComponent, null);

var content = document.getElementById("content");

ReactDOM.render(firstComponent, content);

See the Pen 004 First Component by Mustafa Khan (@MKs-Notebook) on CodePen.