2. How to setup a development webserver for react? and How to render React App?

Posted by Prabakaran on

Lets create a place for all of our project code.

Create public folder inside to_do_list and place all assets inside public folder.

Create index.html file in public folder. We use emmet plugin to use autosuggestion in Microsoft visual studio Editor.

index.html:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  </head>
  <body>
    <div id="root">
    </div>
  </body>
</html>

 

Install live-server using following command

npm install -g live-server 

We can also install live-server using yarn.

Check whether you installed proper version or not.

Once you installed check the version by using the below command

live-server -v

Run liver-server using this command in the command prompt

live-server public

 

This will popup automatically in the browser. 

That means the development server is up and running.

React to Render

The real goal is to render the React app in the browser. We are going to create a template over in client-side javascript.

For now we will use cdn to render the react application. Later on we will learn how to use webpack to load in React, ReactDOM, React Router, Redux.

    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="/scripts/app.js"></script>

lets create scripts folder and create new app.js file

We can check React & ReactDOM in the Chrome Developer console.


 

Add simple console statement in app.js as mentioned below.

console.log("Hi There,  App.js is running"); 

 

We will learn about JSX in the next tutorial.

Location: Ponnamaravathi, Tamil Nadu 622407, India

Comments

Post a Comment