Ninja - React Basic 1

https://www.youtube.com/watch?v=kVeOpcw4GWY&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d&index=2

npx create-react-app dojo-blog

node_modules   - all dependencies

puic - public files

src -  code you write mostly goes here

App.js

index.js -  kick start app

cd dojo-blog

code 

this will open new project inside VS code

we don't need reportWebVitals();

you can remove all

Loaded App.js --> which import App from './App';   in index.js

What you see in browser inside  --> function App() ...

http://localhost:3000/

npm run start

npm install --legacy-peer-deps

function App() ....

return  --> jsx statement which will be convert to javascript

eg: className will  convert to class

Keep div with App and remove all inside <div className="App"> tag

<div className="App">

<div>

Now you should see a blank page 

http://localhost:3000/

Now add below code snipet inside App div tag

<div className="content">

   <h1>App Component</h1>

</div>

you can see, "App Component" h1 tag displayed in browser

http://localhost:3000/

Note: export default App;

-------------------------

right bottom of App.js

to use, we need to export

eg: we are using this inside index.js

here we import

import App from './App';

then after we use inside render. Rendered to DOM

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);