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.
This time, we are going to be building a Random Quote Machine. We must code a page that replicates the functionalities present here. The user stories that we must fulfil are the following:
I’m going to take this chance to let you take a peek into React. If you just want the walk-through for the vanilla JavaScript version, take a look at this other post.
You may, or may not have heard about React before, but it’s getting quite popular as of late. It’s a library made by the guys at Facebook, who describe it as the following:
React: A JavaScript library for building user interfaces.
It’s a front-end framework similar to Angular, Ember or Backbone (someone reading this is probably orchestrating my assassination right now, bear with me please) but not quite so. In a MVC (Model View Controller) architecture, we could say that react is our V (View).
Hopefully, this exercise will grant you some insight into what React is and how it operates at a basic level; and help you decide whether to give it a shot or not. I’m also putting up an AngularJS and vanilla JavaScript version of this same exercise, in case you’re more interested in those.
2018 Update Still alive and kicking. Currently working with Angular 6 and loving it. TypeScript has become my go-to language for all front and Node.js back-end projects, it’s amazing how far we’ve come in a […]
StartJS 