loading reading lists ...
');
function adjustReadingListIcon(isInReadingList){
$readingListToggle.toggleClass("fa-plus", !isInReadingList);
$readingListToggle.toggleClass("fa-check", isInReadingList);
var tooltipMessage = isInReadingList ? "edit in reading lists" : "add to reading list";
$readingListToggle.attr("title", tooltipMessage);
$readingListToggle.attr("data-original-title", tooltipMessage);
}
$.ajax({
url: "/readingList/isInReadingList",
data: {
productId: 2945
}
}).done(function (data) {
adjustReadingListIcon(data && data.hasProductInReadingList);
}).catch(function(e){
console.log(e);
adjustReadingListIcon(false);
});
$readingListToggle.on("click", function(){
if(codePromise == null){ showToast() }
loadCode().then(function(store){
store.requestReadingListSpecificationForProduct({
id: window.readingListsServerVars.externalId,
manningId: window.readingListsServerVars.productId,
title: window.readingListsServerVars.title
});
ReadingLists.ReactDOM.render(
ReadingLists.React.createElement(ReadingLists.ManningOnlineReadingListModal, {
store: store,
}),
document.getElementById("reading-lists-modal")
);
}).catch(function(e){
console.log("Error loading code reading list code");
});
});
var codePromise
var readingListStore
function loadCode(){
if(codePromise) { return codePromise }
return codePromise = new Promise(function (resolve, reject){
$.getScript(window.readingListsServerVars.libraryLocation).done(function(){
hideToast()
readingListStore = new ReadingLists.ReadingListStore(
new ReadingLists.ReadingListProvider(
new ReadingLists.ReadingListWebProvider(
ReadingLists.SourceApp.marketplace,
getDeploymentType()
)
)
);
readingListStore.onReadingListChange(handleChange);
readingListStore.onReadingListModalChange(handleChange);
resolve(readingListStore);
}).catch(function(){
hideToast();
console.log("Error downloading reading lists source");
$readingListToggle.css("display", "none");
reject();
});
});
}
function handleChange(){
if(readingListStore != null) {
adjustReadingListIcon(readingListStore.isInAtLeastOneReadingList({
id: window.readingListsServerVars.externalId,
manningId: window.readingListsServerVars.productId
}));
}
}
var $readingListToast = $("#reading-list-toast");
function showToast(){
$readingListToast.css("display", "flex");
setTimeout(function(){
$readingListToast.addClass("shown");
}, 16);
}
function hideToast(){
$readingListToast.removeClass("shown");
setTimeout(function(){
$readingListToast.css("display", "none");
}, 150);
}
function getDeploymentType(){
switch(window.readingListsServerVars.deploymentType){
case "development":
case "test":
return ReadingLists.DeploymentType.dev;
case "qa":
return ReadingLists.DeploymentType.qa;
case "production":
return ReadingLists.DeploymentType.prod;
case "docker":
return ReadingLists.DeploymentType.docker;
default:
console.error("Unknown deployment environment, defaulting to production");
return ReadingLists.DeploymentType.prod;
}
}
});
}
});
Create web apps that are robust, quick, user-friendly, and responsive
pro $24.99 per month
- access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
- choose one free eBook per month to keep
- exclusive 50% discount on all purchases
lite $19.99 per month
- access to all Manning books, including MEAPs!
team
5, 10 or 20 seats+ for your team - learn more
Look inside
React JS has taken center stage in easing the creation of dynamic user interfaces for websites and apps. Because JavaScript is one of the most widely used languages for websites and apps, it's no wonder that many people are working on libraries and frameworks to help it grow. And one of the most popular is React, which allows you to create unique HTML components and create sophisticated apps in a short amount of time.
However, these frameworks and libraries are not always simple to understand. And that's where this course comes in: it breaks down challenging ideas, making them easy to comprehend even for newcomers to the development field.
The course is enjoyable, engaging, and interactive. It takes a hands-on approach to React JS, and includes fun projects, such as building a calculator app, to put your new skills into practice. Lessons are are backed up with essential learning tools, such as quizzes and assignments, to reinforce what you learn and help it stick.
Distributed by Manning Publications
This course was created independently by Meta Brains and is distributed by Manning through our exclusive liveVideo platform.
prerequisites
- Basic understanding of HTML, CSS, JavaScript, and ES6+
- No need of experience with React or any other JS framework
about the instructor
Meta Brains is a professional training brand developed by a team of software developers and finance professionals who have a passion for coding, finance & Excel.
They bring together both professional and educational experiences to create world-class training programs accessible to everyone.
Currently, they're focused on the next great revolution in computing: The Metaverse. Their ultimate objective is to train the next generation of talent so we can code & build the metaverse together!
what's a liveVideo?
- Quality lessons from expert programmers.
- Rich, interactive transcripts for navigation.
- Exercise driven learning.
what's a liveVideo?
React.JS: The Complete Course for Beginners liveVideo for free
