⚛️React setup : running our app

let's have a look at that app on a browser!

Finally, we can run our app!

Back to the Terminal

In the Terminal, we would simply run the following command:

npm start

We should see something like:

Compiled successfully!

You can now view reactjon in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.153:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

Then, from our browser, we go to localhost:3000 and we should see something like:

The component flow

• "A child component!" lives in src/Component.js

• src/Component.js gets imported by src/App.js

• src/App.js gets imported by src/index.js

• src/index.js builds upon public/index.html

Clearly, the powerful implications of React components already appear in this very basic static "app" in terms of:

• re-usability

  • we could include <Component /> as many times in as many places as we wish, in src/App.js

• division of labour

  • if we want to expand upon src/Component.js we could do so without affecting the rest of src/App.js

• portability

  • keeping things in smaller components makes code easier to read

Moving on

We have covered quite a bit here, starting from nothing and ending with a basic static app - but more exciting topics lie ahead! More, such as:

• building the app

• deploying the app to the internet

• creating dynamic components

• building the illusion of a multi-page website through routes

Developers never get bored!