COMP3322A Modern Technologies on World Wide Web REACT Examples
Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit
COMP3322A Modern Technologies on World Wide Web
REACT Examples
We have provided source code of examples from lecture slides 14_React_I_COMP3322A_f2022.pdf in React_I_examples.zip. Please try them out as follows.
Example 1: This is the example of adding React to a website. The files (index.html, like_button.js) can be served as static files from an Expressjs server app (or any other web server). You can reuse an Expressjs app you created before that serves HTTP GET requests for static files, place the provided files under ./public folder of the app, run the server app and then access the page using http://localhost:8081/index.html or http://localhost:3000/index.html(depending on the port your server app is running on).
Example 2: This is the example of creating a new “Hello World” React app.
Launch a terminal. Go to a directory of your choice (in which we will create the react app folder), and create a React app named “myreactapp” using the following commands:
|
cd YourPath npx create-react-app myreactapp |
Follow the instruction on your terminal to install “create-react-app” package.
Then go into myreactapp directory and launch the React App as follows:
|
cd myreactapp npm start |
After successfully launching the app, you should see prompts like the following in your terminal:
|
Compiled successfully! You can now view myreactapp in the browser. Local: http://localhost:3000 On Your Network: http://192.168.68.103:3000 Note that the development build is not optimized. To create a production build, use npm run build . … . … . |
[Using the command “npm start”, we are running a development build (not optimized), rather
than a production build (optimized build which can be created using “npm run build” instead).] And a web page should be loaded automatically in your browser, as follows:
Fig. 1
Copy index.js provided in Exampe 2 folder to replace index.js under ./src directory of your myreactapp project. Then restart the app using “npm start”, and you will see the “Hello World” page.
Example 3: This is the example of adding React to a website where the button is created using JSX. You can reuse an Expressjs app you created before that serves HTTP GET requests for static files, place the provided index.html and like_button.js in Example 3 folder under ./public folder of the app, run the server app and then access the page using http://localhost:8081/index.htmlorhttp://localhost:3000/index.html(depending on the port your server app is running on).
Example 4: This is the example of React components (“Hello Sara/Max/Eddit”). Use index.js provided in Exampe 4 folder to replace index.js under ./src directory of your myreactapp app (created in Example 2). Then restart the app using “npm start”, and you will see the rendered page (as on page 25 of 14_React_I_COMP3322A_f2022.pdf).
Example 5: This is the example of React state/event handling (Toggle on/off). Use index.js provided in Exampe 5 folder to replace index.js under ./src directory of your myreactapp app. Then restart the app using “npm start” . You will see the page initially displaying an “on” button; clicking the button to toggle between “on” and “off” .
Example 6: This is the first example of React component lifecycle (favorite color). Use index.js provided in Exampe 6 folder to replace index.js under ./src directory of your myreactapp app. Then restart the app using “npm start” . You will see the pages as on page 29 of 14_React_I_COMP3322A_f2022.pdf.
Example 7: This is the second example of React component lifecycle (count down timer). Use index.js provided in Exampe 7 folder to replace index.js under ./src directory of your myreactapp app. Then restart the app using “npm start” . You will see the page displaying a countdown timer.
2022-12-11