[Instagram Clone]Converting HTML/CSS to React App

Prerequisite

1. Node.js & npm
   -Download Node.js & npm(LTS version recommended)
   -Run commands below to see the version of Node.js & npm you installed

   $ node -v
   $ npm -v
   

   
   
2. CRA

   CRA(Create-React-App) Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. CRA toolchain consists of a package manager(npm/ it lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them), a bundler(webpack/ it lets you write modular code and bundle it together into small packages to optimize load time), and a compiler(babel/ it lets you write modern JavaScript code that still works in older browsers).
   

$ cd Desktop
$ npx create-react-app {new folder name}
$ cd {name of the folder you just created}
$ npm start

Conversion

1. Create Folders and Files
1) Public Folder
-index.html
-images folder: put all the image files you need for the HTML page
-data: mock data
2) Src Folder
-components
-pages
-styles
+Login: Login page HTML, CSS
+Main: Main page HTML, CSS

2. Fix HTML syntax into JSX and add to the js file
1) change class to className.
2) change style props from string to objects, and change the BBQ-casing of CSS props to camelCase.

//from
style = "text-align: center;"
//to
style = {textAlign: 'center'}

3) End self-closing tags

<img> to <img /> 
<input> to <input />

4) Change image paths

//If image file is located in the public folder, 

//wrong
<img src="/public/images/dots.png" />
//right
<img src="images/facebook.png" />

and then add JSX codes to the .js file🔻

3. Import/Export
1) component.js file

import React from "react";
import "./{css file name}.css";

class {component name} extends React.Component {
  render() {
    return (
        ...
        //JSX codes
       ...
     )
   }
 }

export default {component name};

2) index.js file

import React from 'react';
import ReactDom from 'react-dom';

import {component name} from "./pages/{component name}/{component name}"

import "./styles/{css name}.css"

ReactDom.render(<Login />, document.getElementById("root"));

Output🔻

Reference
dev.to/menard_codes/converting-static-html-..
reactjs.org/docs/create-a-new-react-app.html