Today, we are going to build a Wikipedia viewer using React and Webpack in tandem. If you are not familiar with React at all, I recommend that you go through the introductory material first, it’ll save you a headache!
Additionally, we are going to be using ES6 class syntax for creating components, as this is the way React is heading towards. The previous tutorial in this series goes into more detail, so go ahead and take a look if you’d like. Let’s get our hands dirty then…
As certain sections of this guide are now obsolete, here’s an updated solution proposed by avid reader Goungaf Saâd.
You can take a look at this version in this GitHub repo. Note that he is using create-react-app on this project, so the overall set-up might be slightly different.
Goungaf is a passionate individual in love with JavaScript and cutting edge technology. He works as a freelance web and mobile developer specializing in the MEAN/MERN stacks and Ionic/React Native mobile development.
This time around, we are going to build our lovely local weather app using React, Webpack and Babel. These 3 tools in conjunction give as enormous power and awesome syntactic sugar for our code.
We’ll make use of ECMAScript 6 classes, promises and arrow functions among others, but first, we need to get a proper environment set up. Navigate to your project folder and run the following command:
npm init
Note: If you don’t have Node and NPM installed, take a quick look at this post, that will get you going.
You’ll be asked for a few things, such as app name, author, description etc. Feel free to take your time and fill them in properly, or anxiously press enter to skip everything. Once done, you’ll have a package.json file in your project directory.
Today, we are going to be building a calculator app using vanilla JavaScript . No jQuery or other third party libraries/frameworks involved. I’m even going to make it more complicated by using objects and prototypical inheritance, so do not expect a quick and dirty job. Here’s a demo of what we’ll be building.
We’ll build a Calculator “class”, which will take care of the application logic. This Calculator, will have methods that we can access to pass it numbers, operations and all sorts of cool stuff that’s it.
FreeCodeCamp has recently added a few more challenges to the site. One of them is Caesars Cipher. This bonfire will have us write a function that mimics the ages old encryption method allegedly used by Romans back in the day.
It’s one of the simplest and oldest encryption methods, and works by replacing each character in a word or sentence with another one down the alphabet (based on a shift amount). For this exercise, we are told to use a shift of 13. Let me show you an example using the word dog and a shift of three.
This time, we are going to build our own Pomodoro Clock. No, this is not a Pomodoro, it’s actually a Commodore:
The Pomodoro clock has it’s own history, which is somewhat irrelevant to us at this point, but bear with me while I take you in a journey through time and space, a time of… Nevermind, it’s really just a clock. Actually, not even a clock, but a timer that allows us to set a few parameters. Namely: Pomodoro cycle time (25 min default) and break time (5 min default).
As a note, I will mention that we are not going to be using jQuery or any other library in this process. At the end of this post, you can find links to a live version of this exercise, along with an AngularJS and React version.
StartJS 