First we need a javascript runtime engine. We will use Node.js. Install it from here:
Get node.js.
This will also give us the Node Package Manager (npm) that we will use to install other javascript packages in our projects and globally.
When we are running javascript inside the browser, we do not need node.js (the engine). When we want to run javascript outside the browser we need node.js.
When we are making react apps and using EcmaScript6 features most browsers will not understand. Therefore we have to transpile our scripts to EcmaScript5. In order to do that we will use Babel. To minimise the configuration for our react apps we will use a fully integrated project - a react template project: Facebooks "create-react-app".
-
Scroll down the readme file and get to know the application.
-
Open a console like git bash.
-
write:
npm install -g create-react-appto install create-react-app globally on your computer. -
Then go to a folder location where you want to start your first React project and write:
create-react-app <appname>andcd <appname>to move inside the new app folder. -
Now checkout the projects folder structure:
- Look particularly on App.js, index.js and index.html
- Try changing the content inside App.js so that it says: Welcome to my new React application.
- From the commandline (inside the app) run:
npm start - Go to a browser on:
http://localhost:3000and see the app running here. - Checkout the package.json file to see how dependencies are managed in the project.
When uploading projects based on create-react-app then make sure to write in the .gitignore file:
**/node_modules/
This folder holds all the npm dependencies and should not be shared over github/dropbox or any other way.
When we clone or download a project like that, we start the project by running:
npm install
from the console.
This will download all the dependencies to the project.
