SIMPLE REACTJS SETUP
|Simple ReactJS Setup|
Using NodeJS/NPM, is recommended if you want to do serious development and deployment outside of just prototyping and testing as it is much more efficient and provides professional features to aid in development. It also allows you to import a lot of your normal assets through the app, providing a single entry point for your application. Thus when anything changes, your app automatically updates. I will cover both of these setup options below.
Simple ReactJS Usage
Simple usage can be accomplished by just adding the script CDNs (Content Delivery Network) to your document head. If you like, you can of course download the actual libraries, but this is the easiest way to use them in this setting. Be sure to check the React CN website to confirm the urls are up to date (note: I have provided the minified versions).
The example above is loading the React libraries on page load and then the script within the body calls ReactDom.render and writes a heading to the body of the document that says, "Hello World." Most React apps actually target a specific div by id instead of the body tag. However, this little app will suffice for example purposes.
<html><head><title>Simple ReactJS Usage</title><script src="https://firstname.lastname@example.org/dist/react.min.js"></script>
<h1> Hello World</h1>
, document.body );
A Basic Development ReactJS Setup
For a basic development setup, you will need to install a few things to your local machine. These commands work on Linux Ubuntu. Windows and Mac users may want to use this tutorial, which includes an installer for a portion of the install.
Create a place where you will store your React Projects:
Install NodeJS and Node Package Manager (NPM): Install with curl using ppa as ubuntu and other Linux repo versions are not always up to date.
If you don't have curl, get it:
Get node with curl (Note: this installation also includes NPM):apt-get install curl
FYI: Some systems may require a symbolic link to clarify a naming issue. Only use if you need it:curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install nodejs
sudo ln -s /usr/bin/nodejs /usr/bin/node
Use NPM to Get create-react-app:
Use the newly installed Create React App to create your first React app.sudo npm install -g create-react-app
Change to the directory of yoru newly created app and start the test server:create-react-app helloworld-app
NPM will start a test server and display a url to open the app in your browser, which is usually http://localhost:3000.cd helloworld-app
sudo npm start
|The NPM Server Output|
Create React App will create an app that looks like this in the browser. Open the src/App.js to get started building.