The React.js Venture

Greetings!

ReactLogoI am just now starting my adventure into React.js.  There is one project I have been on that is Angularjs but there are some others in the enterprise that are React.js.

So far I have done the quick Tutorial: Intro to React at the React site.  I am also in the middle of the PluralSight course React.js Getting Started by Samer Buna.  Obviously I have not looked at any serious production source code yet.

First Impressions

So far my first impressions with React is mostly positive.  It really does not feel that alien to me.  Sure there are some things I need to get use to like prop and state; I’m sure there are others but those are the two I’ve encountered.

I do like the use of the fat arrows.  Surprisingly the JSX is not that big of a hurdle to me.  Well, so far it is not a impediment.

Gear Up

For the first tutorial I used Visual Studio Code and Cmder.  In Samer’s first tutorial I used his REPL.  I personally like the Visual Studio Code experience.  So I converted what I had done in the REPL into a working folder that I edited in Visual Studio Code.

In Samer’s next tutorial I started off in Visual Studio Code.  This is when I hit my first challenge.  Samer’s REPL has all of the extras you need to do his tutorials and he does not go through setup, he wants to teach you REACT.  That is great, and I admit I brought this on myself.

Using FontAwesome in React.js

My sticking point was how to get FontAwesome to work in my React tutorial.  I did some searching and did some trial and errors before I found what seems like an easy path.  This might not work as a production deploy, but hey, I’m just learning and it is my playground.

I did not use any NPM packages.  In fact, since I had done so at first I deleted them all, cleaned up my package.json and then did a npm install.  I wanted to make sure this was going to work.

I downloaded FontAwesome.

Next I added the fonts folder to my source, along with font-awesome.css and font-awesome.min.css.  I know you don’t need both of those css files.

playnineSRCfolder

I added an import statement to my App.js to pull in the font-awesome.css.  import ‘./font-awesome.css’;

I had to go in and adjust the paths to the fonts folder inside the css files but eventually I was able to display the star like Samer does in his video.

Now I am going to finish that PluralSight course.  Unless I hit more hurdles that I want to write about.

Advertisements

About SheldonS

Web developer for over 15 years mainly with Microsoft technologies from classic ASP to .NET 4. Husband, father, and aspiring amateur photographer.

Posted on June 12, 2017, in JavaScript, React. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: