The React.js Venture
I 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.
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.
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.
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.