Getting started with React.Js using NPM

My assumptions: You have prior experience of Web framework like 
  Ruby on Rails, Django, Phoenix, etc. 
Please refer to this React.js style guide for community comprehensible source code.

Hey, its not mandatory to use NPM to build applications with ReactJs; but, it will be alot easier to build, maintain, share codes using NPM. Firstly you should have NodeJs installed in your development machine.

Installation for Development Environment

$ sudo apt-get install nodejs
# try 
$ node -v
# v4.2.6
# if its says command not found: node then try 
$ nodejs
# If it shows up, it means due no some name conflicts 
# the name/command node is already taken by some binary. 
# So, its get it back.
$ sudo update-alternatives --install /usr/bin/node node /usr/bin/nodejs 10

Probable Issues: NPM not found

If for some reason, npm is not found in your system, then Node might not have NPM with it, so install it manually. [Reason could be: Some Ruby On Rails projects need Node but not necessarily need NPM.]

$ sudo apt-get install npm
$ npm -v
# 3.5.2

Install React, Babel, Webpack

Installing React and Components without configurations

At first, you need to install the global package

$ sudo npm install -g create-react-app

For this, NodeJs 4.x or higher is required.

Note: You might encounter this error; { [Error: EACCES: permission denied, access ‘/usr/local/lib’]…}. Make sure you are using sudo.

Generate an App

$ create-react-app hello-react

It will start building new app in the current location. It will take a couple of minutes only if you have the best internet in the town because NPM installs all the dependencies of your app.

# CD into the directory hello-react
$ cd hello-react
$ npm start

You will see the following output on the screen

Starting the development server...
Compiled successfully!
The app is running at:
http://localhost:3000/
Note that the development build is not optimized.
To create a production build, use npm run build.
react

Welcome Screen @localhost:3000

Directory Investigation

$ ls
node_modules package.json public README.md src

The node_modules folder contains React.Js source code as modules and all by-default added modules you can use if you choose to. package.json file is the manifest file for your application.

You need to understand that doing this you are just forking somebody else’s configuration and using in your own way.


If you see such error then, make sure you are inside the project directory.

npm ERR! Linux 4.4.0-57-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v4.2.6
npm ERR! npm v3.5.2
npm ERR! path /home/john/projects/reactjs/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open

npm ERR! enoent ENOENT: no such file or directory, open '/home/john/projects/reactjs/package.json'
npm ERR! enoent ENOENT: no such file or directory, open '/home/john/projects/reactjs/package.json'

Components defined

Note: Its so easy to inspect the react components and debug your app using New React Developer Tools.

component-dom-tree

concepts_of_reactjs_component

c_c_c_c_c_c_144

Exporting and Importing

If its a hello-world program, you can achieve this in just a single file. But, the pain in managing a medium or even small-scale react app written in a single file is unbearable. So, I recommend you to have a relevant directory structure to manage your app. In course, you will have to export & import your components to integrate your software components. See the pictures above for clearer understanding.

  • You can export a component(can be class, function, object, etc) like
    • Named exports:
      export { myFunction }; // exports a function declared earlier
      export const foo = Math.sqrt(2); // exports a constant
      
      
    • Default exports (only one per script):
      export default function() {} // or 'export default class {}'
      // there is no semi-colon here
      

Tips

import React, { PropTypes } from 'react'

In this example, the first imported item React is not wrapped with {} braces because its exported by-default in that script react.js you are importing it from. Second item PropTypes is however wrapper because its not defaultly exported, need to be wrapped.

Building for production

To build an optimized bundle, run

 $ npm run build

npm run build

It is minified, correctly envified, and the assets include content hashes for caching.

Advertisements

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