Get some direction of your content…

An article in my series about React.js

The Journey

1. Creepy code

Will this code give you the creeps?

import React from ‘react’;export default() => {
return (
<div style={{display: ‘flex’, flexDirection: ‘column’}}>
<div style={{display: ‘flex’, flexDirection: ‘row’}}>
<div style={{display: ‘flex’, flexDirection: ‘column’}}>
<div style={{display: ‘flex’, flexDirection: ‘row’}}>
Child content
</div>
<div style={{display: ‘flex’, flexDirection: ‘row’}}>
Child content
</div>
</div>
<div style={{display: ‘flex’, flexDirection: ‘column’}}>
<div style={{display: ‘flex’, flexDirection: ‘row’}}>
Child content
</div>
<div style={{display: ‘flex’, flexDirection: ‘row’}}>
Child content
</div>
</div>
</div>
</div>
);
}

To much style-code for so little…


Article #2 in my serie about React.js

At some point in your development, you need to do some API-request. The problem is that when you are in localhost-environment, the HTTP is considered Non Secure. Therefore, you need to use HTTPS instead.

The Journey

1. Make the SSL-files

Open up your root-folder and create a new folder called certification (or some other name of your choice).

Open up the certification and run this bit of code:

openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365

Now you have to print a password…


Article #1 in my serie about React.js

What would be better to start a serie of articles than beginning with the installation? So, here it is. Article #1.

Journey

1. Preparation

Before React can be installed, you need Node.js. Just follow this Node installation guide and you’ll be good to go.

2. Installation

Open your Terminal and print this line:

npx create-react-app my-application

Now it would take a little while for the installation to finnish.

3. Run application

Move into your folder:

cd my-application

And start the application with npm or Yarn, if you have had installed.

npm start
or
yarn start

The default…


1. Download

Just go to nodejs.org and make your choice.
The LTS is recommended, because it contains the latest stable version.

The Installer will install both npm and Node.js.

Big buttons makes it super-easy!

2. Install

You now have a node package. Double click on the .pkg file and start the installation. Just click on every “Agree”-, “Install”- and “Continue”-button you’ll see.


1. Install Homebrew

Open you Terminal and install Homebrew. Homebrew is a package manager.

/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

2. Install Yarn

Time to install Yarn. This will also install Node.js.

brew install yarn

Done.


Every journey starts with a step…

Article #1 in my series about React.js

It is dead easy to install Node.js and start up your first project.

The Journey

Hey! That’s easy!

1. Preparation

To make it easy for you later on. You need to install:

2. Download Node.js

Just go to nodejs.org and make your choice.
The LTS is recommended, because it contains the latest stable version.

Big buttons makes it super-easy!

3. Install Node.js

You now have a node package. Double click on the .pkg…


This journey began when I needed to hook up Node.js and React.js. One big issue was that I wanted to fetch data in React when in localhost, but the browser complained about unsecured connection.

And I really really really wanted to develop on a local machine…

The journey

1. The main problem

The main problem is that Chrome (because I’m using Chrome) consider localhost to be “Not Secure”. In my case, my first setup was an HTTP-server and this didn’t, of course, pass the security check.

No, sir!

Using HTTPS instead of…

Steffo Dimfelt

Twenty years of graphic design. Three years of development. A lifetime of curiosity.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store