Intoduction: read about React itself and it’s “awards“.

To install React and manage it’s packages (we’ll talk about packages later) we use npm. It requires an installed NodeJS on your computer, so first of all you have to install it.

Setting up the boilerplate application

Of course, you can do it manually, but there is another and more fast way: use a create-react-app node module. It’s more useful approach, because later you will be able to run react apps just by using that module. It also provides an out-of-the-box build script and development server. So, of course, we have to install our module globally (-g). Run in your terminal the following:

npm install -g create-react-app

Now you can navigate to the root folder of your new project (advice: use the folder in C or D disk) and create a new react app by typing:

create-react-app <your-apps-name>

Upon completion, you will see “Happy hacking!” message. So, it’s done now.

What about structure?

.gitignore – standard file used by Github to know which files and directories ignore during the commit priocess.

package.json – in this file there are settings of your react application.

  • name – the name of your app
  • version – the current version of the app
  • “private”: true – setting to avoid accidentally publishing your app as a public package within the npm ecosystem
  • dependencies – list of required node modules used by your app
  • devDependencies – list of required node modules used by your app in development proccess
  • scripts – aliases you can use to access some of your react-scripts

node_modules – the black hole of your react and even every node project. Just don’t give a fuck. You can read about it more there.

package-lock.json – provides a way for teams working on private apps to ensure that they have the same version of dependencies and sub-dependencies.

public – contains the entry point to your application and another assets that will be served without additional processing of webpack.

manifest.json – it’s for Android OS and it’s UI. Read about it more there.

src – the heart of react app. Contains a JS code that process by webpack. Normally, contains such files, as: App.js, App.css. More about it in the create react app readme.

components – as your application grows, you have to store here your components and components-related files and a views directory to organize react views and view-related files.

Starting the React development server

To run your server you have type in your terminal:

npm start

You can find it on http://localhost:3000/ (normally, in runs automatically). Then, just change some text in App.js file and you will see the changes in your browser.

Previous

GamePhaserJs

Next

I hate (1)