About 30-45 minutes Lesson: 10 min Guided Practice:15 min Check for Understanding:20 min
There is not touch prerequisites for learning JavaScript. Here are some of the prerequisite for learning JavaScript:
Basic programming knowledge. Knowledge of core Java sufficient.
You should have knowledge of HTML. Check HTML tutorials here.
Why it is worth learning JavaScript?
React is a JavaScript library (not a framework) that creates user interfaces (UIs) in a predictable and efficient way using declarative code. You can use it to help build single page applications and mobile apps, or to build complex apps if you utilise it with other libraries. React works in declarative code. For more reference
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Faisal Arkan" />;
ReactDOM.render(
element,
document.getElementById('root')
);name="Faisal Arkan"will give value into {props.name} from function Welcome(props) and returning a component that has given value by name="Faisal Arkan". After that React will render the element into html.
class Cat extends React.Component {
constructor(props) {
super(props);
this.state = {
humor: 'happy'
}
}
render() {
return(
<div>
<h1>{this.props.name}</h1>
<p>
{this.props.color}
</p>
</div>
);
}
}const Cat = props => {
return (
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;
);
};var theThing = null;
var replaceThing = function () {
var priorThing = theThing; // hold on to the prior thing
var unused = function () {
// 'unused' is the only place where 'priorThing' is referenced,
// but 'unused' never gets invoked
if (priorThing) {
console.log("hi");
}
};
theThing = {
longStr: new Array(1000000).join('*'), // create a 1MB object
someMethod: function () {
console.log(someMessage);
}
};
};
setInterval(replaceThing, 1000); // invoke `replaceThing' once every secondIf you run the above code and monitor memory usage, you’ll find that you’ve got a massive memory leak, leaking a full megabyte per second! And even a manual GC doesn’t help. So it looks like we are leaking longStr every time replaceThing is called. But why?
Let’s examine things in more detail:
Each theThing object contains its own 1MB longStr object. Every second, when we call replaceThing, it holds on to a reference to the prior theThing object in priorThing. But we still wouldn’t think this would be a problem, since each time through, the previously referenced priorThing would be dereferenced (when priorThing is reset via priorThing = theThing;). And moreover, is only referenced in the main body of replaceThing and in the function unused which is, in fact, never used.
So again we’re left wondering why there is a memory leak here!?
To understand what’s going on, we need to better understand how things are working in JavaScript under the hood. The typical way that closures are implemented is that every function object has a link to a dictionary-style object representing its lexical scope. If both functions defined inside replaceThing actually used priorThing, it would be important that they both get the same object, even if priorThing gets assigned to over and over, so both functions share the same lexical environment. But as soon as a variable is used by any closure, it ends up in the lexical environment shared by all closures in that scope. And that little nuance is what leads to this gnarly memory leak.
class IconButton extends React.Component {
[...]
render() {
return (
<button onClick={this.props.onClick()}>
<i class={this.props.iconClass}></i>
</button>
);
}
}
const buttons = ['facebook', 'twitter', 'youtube'];
return (
<div>
{
buttons.map( (button) => {
return (
<IconButton
onClick={doStuff( button )}
iconClass={button}
/>
);
} )
}
</div>
);import RenderTable from './RenderTable';
class Table extends Component {
state = { loading: true };
render() {
const { loading, tableData } = this.state;
return loading ? <Loading/> : <RenderTable data={tableData}/>;
}
componentDidMount() {
fetchTableData().then( tableData => {
this.setState( { loading: false, tableData } );
} );
}
}For more reference ### Independent Practice