Learn SCSS features with simple create-react-app

1. In terminal:

create-react-app scss-demo
cd scss-demo
npm i node-sass
npm start

2. Rename App.css to App.scss

3. In App.js, on line 3 change import './App.css'; to import 'App.scss';

4. Take a look at App.scss, then replace the code in App.scss with this:

Notice in the following scss code that we can:
a) Make variables with the $ symbol
b) Have nested element tags that reflect our HTML hierarchy

This should look exactly like the create-react-app default page like what we’re used to seeing.

5. Let’s say we want to make the “Edit src/App.js…

A really quick tutorial

Prerequisites: Knowledge of React.js will be required for this tutorial.

Let’s say you want to pull data from the frontend of a website because there’s no API available. You inspect the page and see that the data is available in the HTML, so how do you gather that information to be used in your app? It’s rather simple, we’re going to install two libraries and write less than 50 lines of code to demonstrate the scraping of a website. To keep this tutorial simple, we’ll use https://pokedex.org/ as our example.

1. In terminal:

create-react-app scraping-demo cd scraping-demo…

Prerequisites: Knowledge of React.js will be required for this tutorial.

We’re going to use google-translate library to help connect your app with Google Translate API, the library also provides methods to initiate the translating. We’ll also use react-cookies library to store a user’s chosen language in the browser for the user’s convenience and we’ll store some translated text in a cookie so that the same sentence doesn’t have to be re-translated every time the user loads the app (you have to pay per translation, try to avoid redundant translating).

1. Let’s get started, in terminal:

create-react-app google-translate-demo cd google-translate-demo npm i…

In part two, How to Connect Blockstack to your Backend API, I show you how to create a user object in your API after logging in with Blockstack. In this tutorial, we’ll build a form that sends public information to that API and a separate form that sends secret/sensitive information to Gaia Storage.

By using Gaia Storage, the decentralized way of storing information:

• Your data is more secure than traditional storage systems, which have one or a few central points of vulnerability.
• Millions of encrypted copies of your data are spread across the world, constantly verifying each other for changes…

In part one, How To Build Your First Blockchain App on Blockstack, I show you how to set up Blockstack login/signup. In this tutorial, we’ll connect the unique username that visitors create on Blockstack to your back end.

Prerequisites: Knowledge of setting up your own API will be required. We’ll also be using React.js for this tutorial.

While you would want to send private information such as phone numbers and addresses to Gaia Storage (a decentralized storage system), what I’m about to show you is useful for storing public information like comments or posts where you might want that information…

Prerequisites: Knowledge of React.js will be required for this tutorial.

Blockchain tech can be complicated, but getting started doesn’t have to be. Blockstack’s 3rd party sign in/sign up/authentication makes it easy to get started developing apps and publishing it to a decentralized App store like App.co

I’ve been learning React.js for the past three weeks and I wanted to share some of the funny/interesting moments and pieces of code that I had to write or helped write to make things work. There are definitely better ways to achieve what we needed to do, but these were some pretty fun solutions that we came up with and wanted to share.

We’ll start off light with some css manipulation, here’s some simple css:

.gryffindor {background-color: #7f0909;color: #ffc500;}.slytherin {background-color: #0d6217;color: #aaaaaa;}.hufflepuff {background-color: #eee117;color: #000000;}.ravenclaw {background-color: #000a90;…

This will be strictly instructional, follow this step by step guide to quickly build your backend.

1. In your terminal: rails new APP-NAME --api
- Or add this flag if you have Postgres installed and would like to use it: rails new APP-NAME --database=postgresql —-api
- If you choose to use Postgres, remember to turn Postgres on when you launch your server.
2. In your terminal: cd APP-NAME && open Gemfile, then find and uncomment gem 'rack-cors', then add this line of code on the next line: gem 'active_model_serializers'

3. In your terminal:bundle && open config/initializers/cors.rb, …