Very simple way to create new application on React JS using Yarn.
First of all install LTS version of Node.js on your computer from official site: https://nodejs.org/en/download/
Then also install stable version of Yarn from official site: https://yarnpkg.com/en/docs/install. (You can read here how to install Yarn in Ubuntu).
Next lets create new folder “react-app” with files of our application. In this folder create two empty files: index.html, package.json, and subfolder src such as on screenshot:
File index.html will have basic html markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!-- Bundle -->
<script src="./src/index.js"></script>
</body>
</html>
In subfolder src create file index.js, it will be main file of our react application:
Source code of index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
<div>
React App
</div>
);
ReactDOM.render(<App />, document.getElementById('root'))
In file package.json write next code:
{
"name": "ReactApp",
"author": "Author Name",
"license": "License Name",
"homepage": "Author Website",
"email": "Author Email",
"version": "1.0.0",
"scripts": {
"start": "cross-env NODE_ENV=development parcel index.html --no-cache -d build/dev",
"build": "cross-env NODE_ENV=production parcel build index.html --no-cache -d build/production"
},
"dependencies": {
"@hot-loader/react-dom": "^16.8.4",
"cross-env": "^5.2.0",
"parcel-bundler": "latest",
"react": "^16.8.4",
"react-dom": "^16.8.4"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-plugin-import": "^1.11.0",
"babel-preset-react-app": "^7.0.1"
}
}
This file contains information about your project and all outsiders packages, used in your application.
That’s all, our simple react application ready. Now lets run it. Open your command line and go to your project folder:
To compose your application write command:
yarn
Yarn will download all packages and compose your application:
To run your program just enter command:
yarn start
This command builds your react application and start local server http://localhost:1234
Enter on this address in your browser and you will see your application:
Now if you change any source code in your project, it will be automatic changed in browser:
That’s all, finally look in folder build. There You will find compiled JavaScript code with your application which you can use in production.
React it’s simple! Good luck 😉