Learn React JS app

React is Javascript library created by Facebook in the past to flexible and to allow apps to run more efficient it is also opensource meaning you can change it do many different jobs  and since it has virtual dom insteaf of regulat dom that allows it to run more effective and built to allow UI compents which means part of app or website.

 

It’s creator was man called Jordan walke in 2011 for the newsfeed  then put into action in more of Facebook or Whatapp or made opensource to the public in 2013.

React V stands for view since you can see what you create with this software which the architecture can be provided by  Redux or Flux.

Components this can mean just about anything in app such you could have table part which is purely table or contact form or other possible things it could create the reason for why this loads so fast it runs of virtual dom instead of regulal dom plus it only loads the part of it needed to complete the action by the user as well. https://www.theengineer.info/2023/03/database-softwares.html

Environment Setup

 

In this chapter, we will show you how to set up an environment for successful React development. Notice that there are many steps involved but this will help speed up the development process later. We will need NodeJS, so if you don't have it installed, check the link from the following table.

 

NodeJS and NPM

·         NodeJS is the platform needed for the ReactJS development. Checkout our NodeJS Environment Setup.

 

After successfully installing NodeJS, we can start installing React upon it using npm. You can install ReactJS in two ways

·        Using webpack and babel.

·        Using the create-react-app command.

 

Installing ReactJS using webpack and babel

Webpack is a module bundler (manages and loads independent modules). It takes dependent modules and compiles them to a single (file) bundle. You can use this bundle while developing apps using command line or, by configuring it using webpack.config file.

Babel is a JavaScript compiler and transpiler. It is used to convert one source code to other. Using this you will be able to use the new ES6 features in your code where, babel converts it into plain old ES5 which can be run on all browsers.

Coding details for work here

 

Step 1 - Create the Root Folder

Create a folder with name reactApp on the desktop to install all the required files, using the mkdir command.

C:\Users\username\Desktop>mkdir reactApp

C:\Users\username\Desktop>cd reactApp

To create any module, it is required to generate the package.json file. Therefore, after Creating the folder, we need to create a package.json file. To do so you need to run the npm init command from the command prompt.

C:\Users\username\Desktop\reactApp>npm init

This command asks information about the module such as packagename, description, author etc. you can skip these using the –y option.

C:\Users\username\Desktop\reactApp>npm init -y

Wrote to C:\reactApp\package.json:

{

   "name": "reactApp",

   "version": "1.0.0",

   "description": "",

   "main": "index.js",

   "scripts": {

      "test": "echo \"Error: no test specified\" && exit 1"

   },

   "keywords": [],

   "author": "",

   "license": "ISC"

}

 

Step 2 - install React and react dom

Since our main task is to install ReactJS, install it, and its dom packages, using install react and react-dom commands of npm respectively. You can add the packages we install, to package.json file using the --save option.

C:\Users\Skyeagle\Desktop\reactApp>npm install react --save

C:\Users\Skyeagle\Desktop\reactApp>npm install react-dom --save

Or, you can install all of them in single command as −

C:\Users\username\Desktop\reactApp>npm install react react-dom --save

 

Step 3 - Install webpack

Since we are using webpack to generate bundler install webpack, webpack-dev-server and webpack-cli.

C:\Users\username\Desktop\reactApp>npm install webpack --save

C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save

C:\Users\username\Desktop\reactApp>npm install webpack-cli --save

Or, you can install all of them in single command as −

C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save

 

Step 4 - Install babel

Install babel, and its plugins babel-core, babel-loader, babel-preset-env, babel-preset-react and, html-webpack-plugin

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev

C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev

C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev

C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev

C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

Or, you can install all of them in single command as −

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env 

   babel-preset-react html-webpack-plugin --save-dev

 

Step 5 - Create the Files

To complete the installation, we need to create certain files namely, index.html, App.js, main.js, webpack.config.js and, .babelrc. You can create these files manually or, using command prompt.

C:\Users\username\Desktop\reactApp>type nul > index.html

C:\Users\username\Desktop\reactApp>type nul > App.js

C:\Users\username\Desktop\reactApp>type nul > main.js

C:\Users\username\Desktop\reactApp>type nul > webpack.config.js

C:\Users\username\Desktop\reactApp>type nul > .babelrc

 

Step 6 - Set Compiler, Server and Loaders

Open webpack-config.js file and add the following code. We are setting webpack entry point to be main.js. Output path is the place where bundled app will be served. We are also setting the development server to 8001 port. You can choose any port you want.

webpack.config.js

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

   },

   module: {

      rules: [

         {

            test: /\.jsx?$/,

            exclude: /node_modules/,

            loader: 'babel-loader',

            query: {

               presets: ['es2015', 'react']

            }

         }

      ]

   },

   plugins:[

      new HtmlWebpackPlugin({

         template: './index.html'

      })

   ]

}

Open the package.json and delete "test" "echo \"Error: no test specified\" && exit 1" inside "scripts" object. We are deleting this line since we will not do any testing in this tutorial. Let's add the start and build commands instead.

"start": "webpack-dev-server --mode development --open --hot",

"build": "webpack --mode production"

 

Step 7 - index.html

This is just regular HTML. We are setting div id = "app" as a root element for our app and adding index_bundle.js script, which is our bundled app file.

<!DOCTYPE html>

<html lang = "en">

   <head>

      <meta charset = "UTF-8">

      <title>React App</title>

   </head>

   <body>

      <div id = "app"></div>

      <script src = 'index_bundle.js'></script>

   </body>

</html>

 

Step 8 − App.jsx and main.js

This is the first React component. We will explain React components in depth in a subsequent chapter. This component will render Hello World.

App.js

import React, { Component } from 'react';

class App extends Component{

   render(){

      return(

         <div>

            <h1>Hello World</h1>

         </div>

      );

   }

}

export default App;

We need to import this component and render it to our root App element, so we can see it in the browser.

main.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.js';

 

ReactDOM.render(<App />, document.getElementById('app'));

Note − Whenever you want to use something, you need to import it first. If you want to make the component usable in other parts of the app, you need to export it after creation and import it in the file where you want to use it.

Create a file with name .babelrc and copy the following content to it.

{

   "presets":["env", "react"]

}

 

Step 9 - Running the Server

The setup is complete and we can start the server by running the following command.

C:\Users\username\Desktop\reactApp>npm start

It will show the port we need to open in the browser. In our case, it is http://localhost:8001/. After we open it, we will see the following output.

 

Step 10 - Generating the bundle

Finally, to generate the bundle you need to run the build command in the command prompt as −

C:\Users\Skyeagle\Desktop\reactApp>npm run build

This will generate the bundle in the current folder as shown below.

 

Using the create-react-app command

Instead of using webpack and babel you can install ReactJS more simply by installing create-react-app.

 

Step 1 - install create-react-app

Browse through the desktop and install the Create React App using command prompt as shown below −

C:\Users\Skyeagle>cd C:\Users\Skyeagle\Desktop\

C:\Users\Skyeagle\Desktop>npx create-react-app my-app

This will create a folder named my-app on the desktop and installs all the required files in it.

 

Step 2 - Delete all the source files

Browse through the src folder in the generated my-app folder and remove all the files in it as shown below −

C:\Users\Skyeagle\Desktop>cd my-app/src

C:\Users\Skyeagle\Desktop\my-app\src>del *

C:\Users\Skyeagle\Desktop\my-app\src\*, Are you sure (Y/N)? y

 

Step 3 - Add files

Add files with names index.css and index.js in the src folder as −

C:\Users\Skyeagle\Desktop\my-app\src>type nul > index.css

C:\Users\Skyeagle\Desktop\my-app\src>type nul > index.js

In the index.js file add the following code

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

 

Step 4 - Run the project

Finally, run the project using the start command.

npm start

To check if Node installed we need to input the following commmand in the command prompt area of windows or Linux or Apple by doing this

$ node-v

That simple command will check the version of this software installed on your computer.

We can install react using the NPM Manager  by inputting this command code

Npm install -g create-react-app

Now pick a suitable name for the project or app.

By putting in the command below it can do two tasks within the same time period

c:\Users\Skyeagle> create-react-app reactproject  C:\Users\Skyeagle> npx create-react-app reactproject.

$ cd Desktop

$ npm start

This command will start the server but be connected to default server which is not online in the tradional sense you can see it if you live in another location you can only see it from using your own computer.

Now you will see the dashboard of React such as your public folder among other data showing here now we can get ready to do tasks on are app this can be coded using Visual Studio Code which is probably the best editor on the market for doing any website or app work as a whole but if you are doing purely Python work then Pycharm is  a fantantic tool to use in my thoughts.

n React application, there are several files and folders in the root directory. Some of them are as follows:

1node_modules: It contains the React library and any other third party libraries needed.

2public: It holds the public assets of the application. It contains the index.html where React will mount the application by default on the <div id="root"></div> element.

3src: It contains the App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js files. Here, the App.js file always responsible for displaying the output screen in React.

4package-lock.json: It is generated automatically for any operations where npm package modifies either the node_modules tree or package.json. It cannot be published. It will be ignored if it finds any other place rather than the top-level package.

5package.json: It holds various metadata required for the project. It gives information to npm, which allows to identify the project as well as handle the project?s dependencies.

6  README.md: It provides the documentation to read about React topics.

Readme.md just provides further information about this software if you feel the need to study  more which I would recommend doing at least once.

All these parts of react such as the public part is what the rest of the world could see such as like your index page or about us page or anything else you want them to see another  reason react became so popular it is a lot more secure than most CMS such as like Wordpress or Joomla or Drupal in all cases since you can’t really hacked it unless you hack into someone server which requires more technical skills than the usual easy content management system to break instead.

Now click on src app.js and webpack recompiles code to make which makes the page refresh automatic that is something most used CMS can’t do well for why so many of them become slow or looking bad over time often as more useless data is added inside them to try and  modern or good to the admin user or end user which often does not work well to me.

Need to put into production mode to make things run effective we can do this by putting in

$ npm build

JSX is put inside this language to allow HTML to work with React it’s not always needed but a good add in feature either way.

Components is probably most important of React the reason for why it is basically like part of the app which can do something for you such a show article or anything else since it’s built into parts this can also mean if something goes wrong it’s more easy to fix that in other platforms where the full code may need changed to make something work if big problem happens but in react that area of problem does not apply which is good thing to me and many other people around the world.