August 18, 2018

Starting with npm and React JS

I have been going along to Wellington JS meetups. The last one was Konstantin Raev “Using Open Source responsibly: why Yarn was created“. His talk was focused on React Native and Yarn as a download of packages versus npm. He gave some interesting statistics of how popular npm was compared to other package managers and issues with open source. “npm is the package manager for JavaScript and the world’s largest software registry“.

I had come across npm before but didn’t know much about it apart from it being a download process.I have done a little bit of linux where you upload packages but was a bit unsure where they came from. I am used to windows download zip, msi or exe and installing in windows. I only became a bit more confident with downloading packages with python and the pip install process (although I have had a reasonable amount of packages get a bit miffy and not load). So I thought I’d give the npm process a go. I also had heard of React but didn’t know too much about that either. So I thought I’d try setting it up to see what it is and how it works.

So, as far as I can tell, there is ReactJS and ReactNative. React Native is more focused on Mobile and React JS is more general. Also there are packages such as Angular & Vue that are in the same space as well. Apparently Angular is a whole Framework whereas React JS is a view library, so smaller. Also React JS only focuses on the user interface.

So, on trying to understand what ReactJS is I found this video and started to follow it:

In the video he is working on a mac. Initially he sets up using Visual Studio Code. So I decided to try this out. I had used it previously but uninstalled it. This time, I found accessing files in a specific directory and editing them quite easy, so I may use it some more in the future.

About 9 minutes in he goes to terminal and starts typing in npm commands. Also the browser popped up and ended with a url of localhost:3000. There was a presumption that you knew all this stuff. So I stopped the video there and tried different sources.

I then had to search around for how to make ” the Mac Terminal” equivalent work in windows. After looking around on the interwongle it suggested downloading node.js which I did. The install adds node.js to your path automatically, so you can type it from anywhere.

I also looked at a number of sites, including www.tutorialspoint.com on setting up the react environment, with no success. I finally came across these videos that I could follow:

I find his steps are smaller but easier to follow. The loading of react to get it up and running was easier and far fewer packages were loaded. On earlier steps I got a lot of errors from the package load process (maybe they were older versions of the packages that had since been superseded and were not compatible with the environment I was trying to set-up).

Process

After downloading and installing node.js you then need to open a command prompt window. Best if its in the directory where you are going to be creating a react APP. So I created a react directory in Downloads (my junk space for working) and opened a command window in there.

C:\Users\drake\Downloads\react>npm install -g create-react-app

The: npm install -g create-react-app downloads all the packages required to make a react-app

After this has loaded these packages once to this directory, you then need to only use:

C:\Users\drake\Downloads\react>create-react-app test-app

The: test-app is a directory and name of the app that I want , so it created the sub-directory C:\Users\drake\Downloads\react\test-app and installs all the packages and files there.

Then it asks you to change directory into the sub-directory you have created (item 9) then to run :

C:\Users\drake\Downloads\react\test-app>npm start (item 10)

This opens your browser in http://localhost:3000/

And displays the screen below:

If we just go and look at the file structure, in the new sub-directory that has been created:

C:\Users\drake\Downloads\react\test-app>

3 sub-directories have been created under this and populated with files:

react\test-app\node_modules
react\test-app\public
react\test-app\src

In react\test-app\public you will see the index.html and within that file there is a <div> tag:

<div id=”root”></div> This id=”root” is the name of your app , you can change the name, but make sure you change it in the react\test-app\src\index.js file too

So in the index.js it calls the document.getElementById(‘root‘) where the root is the id in the intex.html file.

It then assigns this to <App/> tag in the Apps.js which is where the browser tells you to go to to alter what is displayed on the web page.

Both index.js & Apps.js both, at the top of the page, have import commands like Python, where they are calling certain code in from specific files.

In index.js it is calling, note the last 2 files, they use the ./ to indicate they are in the same directory as the ndex.js, and also note that for the .css file it has to explicitly tell you the file type, but for a javascript file you do not need the file extension ‘./App’ :

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;

In Apps.js it imports { Component } from ‘react’, a logo (that spins on the web page, and App.css’:

import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;

In the App.css’ there is: .App-logo {animation: App-logo-spin infinite 20s linear; for the animation of the logo.

In Apps.js , all the elements in Red/Bold can be removed to leave a boilerplate for starting your own app:

import React, { Component } from ‘react’;

import logo from ‘./logo.svg’;

import ‘./App.css’;

class App extends Component {

render() {

return (

<divclassName=”App”>

<headerclassName=”App-header”>

<imgsrc={logo}className=”App-logo”alt=”logo”/>

<h1className=”App-title”>Welcome to React</h1>

</header>

<pclassName=”App-intro”>

To get started, edit <code>src/App.js</code> and save to reload.

</p>

</div>

);

}

export default App;

In the App.js there is:

class App extends Component {

render() {

return (

This says, that for this class App Component, render this thing and return…… something

and at the bottom you have to : export default App;

So this pushes it out, to display, I presume. So you create something, render it and export it.

JSX (Jaxva Script XML – where XML=extensible Markup Language)

Now, the code is a mixture of stuff, it has bits of HTML tags in the JavaScript type code. Its JSX. The first place I found some JSX syntax was TutorialPoint ReactJS – JSX.

If you go to:

https://babeljs.io/repl

So you are writing in a different script and Babel compiles your code into JavaScript. So React seems to be a compiled code (I haven’t come across one of those for a while). I was wondering how that was compiled but I just noticed at the end on the first screenshot , where we used npm in the command window, item 16 says :

Note that the development build is not optimized.
To create a production build, use npm run build.

Build & Execute

I decided to try it , based on what is in the test-app folder at the moment

C:\Users\drake\Downloads\react\test-app>npm run build

sometimes you run an npm command and it executes but the command prompt does not come back (presumably as its running the server and showing in the browser. You ne3ed to quit out of this if you need to run anothert command by using Ctrl+C. Then the command prompt comes back. [It may be obvious but not explained anywhere, I shut a few command windows down and started them again because i didn’t know what to do initially]

Anyway, a new sub-directory is created (Just above item 5 on screenshot above) called build and if you go into that folder there is an index.html file you can run. I ran it from the directory using the browser (not from a server) and got this error in the console:

It couldn’t find the js file. When I looked at the file index.html the code had been minified, butt all the links eg<link href=”/static/css/main.c17080f1.css” rel=”stylesheet”> did not have a “.” before the leading / so it Console error was not using a relative path to find the file. Once I added these

But it still wasn’t finding the logo. But the page came up.

When I ran Items 5 & 6 in the screenshot below, then cut/pasted the url (item 7) in a browser

Then the page showed correctly.See below:

To test it on a server I loaded the build directory to my hosted server and tried again. Initially there was no “.” in the relative paths in index.html , and I got:

The same error as when I just tried to open the file in the browser. when I added the “.” to the relative paths I got:

The image still did not come up, but looking at the console error it is looking in the wrong place for it. It looks like its being called from the CSS or JS directory.

Anyway, looks like the code is supposed to run from a server.

Tutorial

Based on this video tutorial:

I did get a bit of code to display, rather than what comes setup with the create-react-app. Which is nice, but not too advanced. I took the code from the githumb and played with it a little. The fact that I could get it running on my machine was nice.

End comment

After having a play with React JS I feel that I have the fundamental bits of having the environment setup to try and use it. I can see the idea of it, and I quite like the JSX coding. The mix of HTML and JS is good. Plus the extensible nature of the XML to extend it to add different elements.

I also had a quick overview of Redux, you often come across it when reading about React. I’m not sure that I have a use for this at the moment, but it was good to get my head around the npm and react JS. In fact, as I was working through Free CodeCamp there is a whole area on React & Redux. I cannot see a direct link of React with the AM/FM visualisation ideas that I am exploring at the moment. It is good to understand what it is about, especially at the next WellingtonJS meetup that I go to, I may even understand 10% of what people are talking about.

I have a better feel for Visual Studio Code, that is something useful I think I will use more.

Post Views: 121

Add a Comment

You must be logged in to post a comment.