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:
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:
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.