Installing React | Codedamn

Hey readers, in this blog we will be learning about Installing React on our computers or laptops. Check out the codedamn course if you want to learn React. Aside from installation, we’ll also learn how to set up an environment for React application development.

Pre-requisite for React environment

npm and Node
Babel
Web pack

Ways of Installing React on your computer

Here are two ways of setting up a React environment:

Installing React using npm command

By using the npm command- To use npm, we have to install Node in order to build React application. After downloading, to verify the version Node and npm installation, use the command node or npm -v
Install React and React DOM, create a root folder with whatever name you like, for eg codedamn. Go to the folder that you created, in this case, its codedamn, and write the command- npm init -y
This will create a package.json file. After this, install React and React DOM packages using the command given below.
npm install react react-dom –save or npm install react
npm install react-dom separately.

Installing Webpack

Webpack is used for packaging modules, product pipeline automation, and development. Webpack-dev-server is used for development to create production build and webpack CLI provides access to a different set of commands for development. These are then compiled into a single file as a bundle. In order to use webpack, install it using the following command given below.

npm install webpack webpack-dev-server webpack-cli –save

The above commands can also be used separately by using npm install package_name

Installing Babel

Babel is a JavaScript transpiler and compiler used to convert a source code. It compiles ES6 and React JSX to JavaScript ES5 which can then run on all browsers for an application. React needs a babel-loader for file types like JSX. React package babel-preset-react updates the browser automatically whenever there is any change in the code without hindering the current state of an application. ES6 requires babel-preset-env. Utilize the following command to install and use webpack:

install babel-core with npm babel-loader —save-dev babel-preset-env babel-preset-react babel-webpack-plugin

Create the following files in your project folder index.js after installing packages.

index.js
App.js
main.js
webpack.config.json
.babelrc

package.json file-

{ 
"name": "reactApp", 
"version": "1.0.0", 
"description": "", 
"main": "index.js", 
"scripts": { 
"start": "webpack-dev-server --mode development --open --hot", 
"build": "webpack --mode production" 
}, 
"keywords": [], 
"author": "", 
"license": "ISC", 
"dependencies": { 
"react": "^16.8.6", 
"react-dom": "^16.8.6", 
"webpack-cli": "^3.3.1", 
"webpack-dev-server": "^3.3.1" 
}, 
"devDependencies": { 
"@babel/core": "^7.4.3", 
"@babel/preset-env": "^7.4.3", 
"@babel/preset-react": "^7.0.0", 
"babel-core": "^6.26.3", 
"babel-loader": "^8.0.5", 
"babel-preset-env": "^1.7.0", 
"babel-preset-react": "^6.24.1", 
"html-webpack-plugin": "^3.2.0", 
"webpack": "^4.30.0" 
} 
}

.webpack.config.json file-

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
module.exports = { 
entry: './main.js', 
output: { 
path: path.join(__dirname, '/bundle'), 
filename: 'index_bundle.js' 
}, 
devServer: { 
inline: true, 
port: 8080 
}, 
module: { 
rules: [ 
{ 
test: /\.jsx?$/, 
exclude: /node_modules/, 
use: { 
loader: "babel-loader", 
} 
} 
] 
}, 
plugins:[ 
new HtmlWebpackPlugin({ 
template: './index.html' 
}) 
] 
}

index.js file-

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
<meta charset = "UTF-8"> 
<title>Codedamn</title> 
</head> 
<body> 
<div id = "app"></div> 
<script src = 'index_bundle.js'></script> 
</body> 
</html>

App.js file-

import React, { Component } from 'react'; 
class App extends Component{ 
render(){ 
return( 
<div> 
<h1>Codedamn</h1> 
</div> 
); 
} 
} 
export default App;

main.js file-

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App.js'; 
ReactDOM.render(<App />, document.getElementById('app'));

.babelrc file-

{ 
"presets":[ 
"@babel/preset-env", "@babel/preset-react"] 
}

To run the React application, go to the project folder that you made and run the command: npm start

Open your browser and type localhost:3000, you will see your React application running.

Installing React using a create-react-app command in your command line

The given command can also be installed separately by using npm install package_name

Now that we learned about different packages, let’s create a React application to understand it better.

Installing React by using the command: npm install -g create-react-app

Create a React application: create-react-app proj_name

Go to the src folder, and make changes in the files accordingly. By default, there will be some files already made in the src folder. For instance, let’s change an App.js file.

import React from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
function App() { 
return ( 
<div className="App"> 
<header className="App-header"> 
<img src={logo} className="App-logo" alt="logo" /> 
<p> 
Welcome to Codedamn! 
<p>To get started, edit src/App.js and save to reload.</p> 
</p> 
<a 
className="App-link" 
href="https://reactjs.org" 
target="_blank" 
rel="noopener noreferrer" 
> 
Learn React 
</a> 
</header> 
</div> 
); 
} 
export default App;

To run the React application, go to the project folder that you made and run the command: npm start

Open your browser and type localhost:3000, you will see your React application running.

Conclusion

This was all about installing React in your system. If you’re interested in studying React js, codedamn offers classes with a built-in environment playground where you can learn and practice code. Join the codedamn community, read other programming and development articles on the site, and sign up for our newsletter to be informed about new programs and upgrades.

If you have any queries or feedback do let us know in the comment section, also if you sign up on the codedamn do check out the referral section, copy your link and refer to as many people as possible, and get exciting gifts, swags, and prizes from codedamn so don’t forget to check that out!