ZuoTi.Pro
Question

Create a React.js website with three pages. A Simple Home page, and about page, and a post page ...

Create a React.js website with three pages. A Simple Home page, and about page, and a post page

  • Using react Router, link to each different page using a navigation bar built in to each page
  • Your Home page should have some image loaded into it that is not through a external URL. it most be loaded locally in your App. Also let me know through text that it is the home page
  • Your about page will have four colored blocks on it. These blocks when I click on one should cycle through the colors red, blue, green and then back to red. Each block acts on its own. If all four blocks are the same color, it changes the background color of the whole page to that color.
  • Your Post page Should have this functionality (Posts do not need to be stored forever, just when I/Your interact with that page at that time)
    • Users should type in a text box and then have that display on the same page
    • On a post, a user can comment underneath that post only
    • A user can like their own post, and unlike it
    • A user can delete a post
  • Use Material UI to help you save time on functionality. Its not required, but I strongly recommend it for this project
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props.

JSX is optional and not required to use React. Try the Babel REPL to see the raw JavaScript code produced by the JSX compilation step.

class Hello Message extends React.Component 
{
  render() 
{
    return ()
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <Hello Message name="Taylor" />,
  document.getElementById('hello-example')
);

Result

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

<!DOCTYPE html>
<html lang="en">
<title>Test React</title>

<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

<body>

<script type="text/babel">
    // JSX Babel code goes here
</script>

</body>
</html>

React DOM reader

<div id="id01">Hello World!</div>

<script type="text/babel">
ReactDOM.render(
    <h1>Hello React!</h1>,
    document.getElementById('id01'));
</script>

0 0
Add a comment
Know the answer?
Add Answer to:
Create a React.js website with three pages. A Simple Home page, and about page, and a post page ...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Create a storyboard for a four (4) page Website (one (1) home page and three (3)...

    Create a storyboard for a four (4) page Website (one (1) home page and three (3) sub pages) and one (1) Cascading Style Sheet (.css). Using Microsoft Word, Microsoft Visio, or Dia, create a diagram of the layout and navigation structure. Explain the effects that the Cascading Style Sheet (.css) will have on the Web page. There must be a minimum of two (2) changes. Be sure to include detail. (Example: The Cascading Style Sheet (.css) will make the background...

  • Using React.js, create a page that has four colored blocks on it. These blocks, when I...

    Using React.js, create a page that has four colored blocks on it. These blocks, when I click on one, should cycle through the colors red, blue, green and then back to red. Each block acts on its own. If all four blocks are the same color, it changes the background color of the whole page to that color.

  • Create a CSS-styled Table Page For this Assignment you will first read the appropriate chapters in...

    Create a CSS-styled Table Page For this Assignment you will first read the appropriate chapters in the textbook and then a create web page, for example called table.html, in your ubunix.buffalo.eduaccount just as you did in Home Page Assignment. Assignment Requirements Your new web page should utilize the following HTML tags and include the following: A <body> tag that uses an appropriate style value to change the background color of the web page. Appropriate <table>, <tr>, <th>, and <td> tags...

  • CODE MUST BE IN PYTHON 3 The objective of this lab is to solve problems using...

    CODE MUST BE IN PYTHON 3 The objective of this lab is to solve problems using the Stack ADT Q1. Write a program that uses the Stack implementation given to you browser has both a back and a forward button which allows the user to in Stack.py to simulate navigation in a web browser. Every web navigate to previously seen web pages. Your task is to implement this functionality using two Stack objects called forward stack and back stack. The...

  • Create a folder named "TrainerApp". In that folder create the following files. Create a PHP file,...

    Create a folder named "TrainerApp". In that folder create the following files. Create a PHP file, "insert-user-form.php", with a form that has the following fields: - First Name (text) - Last Name (text) - Email (text) - Password (text) - Submit button Create another PHP file, "insert-exercise-form.php" with a form that has the following fields: - Exercise Name (text) - Description (text) - Demonstration Image (file) - Submit button Create another PHP file, "login-user-form.php" with a form that has the...

  • code a website in html about vacational about atleast 3 vacational spots. the requirements are as...

    code a website in html about vacational about atleast 3 vacational spots. the requirements are as follows Home page and at least 5 content pages A single external CSS file controlling styles across the site (internal and embedded styles may also be used when appropriate) Consistent "look and feel" throughout the site (logo, color scheme, layout, navigation) Consistent navigation throughout the site Use at least three images in addition to the logo (images should have alternate text) Include at least...

  • HTML / CSS Content Requirements Create a home page with the following elements and settings: Set...

    HTML / CSS Content Requirements Create a home page with the following elements and settings: Set the background, font colors, and “theme” to match those used in lab assignment #1 using an external css file; inline styling should be used only where necessary to override styling from the external css H1 element, centered at the top of the page, with “Thank you for choosing Your Company Name. . . “ text* Div or other container with at least 5 sentences...

  • Could you create a website based on html and css? Details in the below: Note: You...

    Could you create a website based on html and css? Details in the below: Note: You can put link that I can download that folder Based on Project 2-1, do the necessary changes to have a webpage structure of a header, main, and footer sections. Then: •Set the width of the page to 700px •Use the font family starting with Verdana •Move one of the images from your Project 2-1 to the header. •Set the width of the header image...

  • For milestone #1, we will start the CARIT site with three static HTML pages and a...

    For milestone #1, we will start the CARIT site with three static HTML pages and a CSS file. Create a dedicated folder for this project. This folder should contain all related files in this project. The future milestones are cumulative and built directly on top of your prior work. Function/content requirements: A home page named “index.html”, which include these contents at least: Description of the center. You may reference the example sites. Latest news: use list tags; make up some...

  • Creating the Home and Template Pages Overview In this assignment, you will start building your Web...

    Creating the Home and Template Pages Overview In this assignment, you will start building your Web site for your fictional organization by creating a homepage using HTML5 and some of the key elements that define a Web page. You are required to use either a simple text editor to write your code, or an enhanced text editor such as Brackets. Note: Microsoft Word is not a good tool for developing code because it is a document processor and not a...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT