Difference between revisions of "React"

From CSE330 Wiki
Jump to navigationJump to search
Line 5: Line 5:
 
== Individual Assignment ==
 
== Individual Assignment ==
 
In this assignment, you will build a ReactJS restaurant website. To learn ReactJS, please view and complete [https://reactjs.org/docs/installation.html this] tutorial and read [[Route|the introduction of route]] carefully.  
 
In this assignment, you will build a ReactJS restaurant website. To learn ReactJS, please view and complete [https://reactjs.org/docs/installation.html this] tutorial and read [[Route|the introduction of route]] carefully.  
After creating a new React application, you will only need to modify the files in ''src'' folder and the <source lang="html4strict"><title></source> tag in /public/index.html
+
After creating a new React application, you will only need to modify the files in ''src'' folder and the <code><title></code> tag in /public/index.html
index.html is the webpage you will work on, and all the components you will build are in this single div: <source lang="html4strict"><div id="root"></div></source>
+
Building a React website is similar to playing with LEGOs. index.html is analogous to the base LEGO piece, and all the other components you build will be placed in this single div: <source lang="html4strict"><div id="root"></div></source>
 +
Now take a look at src/index.js. What this file does is to render a component called <code><App></code> from App.js in root div.

Revision as of 06:05, 29 November 2017

ReactJS is a JavaScript library for building user interface. React allows developers to create large web-applications that use data that can change over time, without reloading the page. It aims primarily to provide speed, simplicity and scalability. React processes only user interfaces in applications. This corresponds to View in the Model-View-Controller(MVC) pattern, and can be used in combination with other JavaScript libraries or frameworks in MVC, such as AngularJS. Several notable features of ReactJS are one-way data flow, JSX, component-based.

ReactJS docs: Before starting on the assignment, please complete the quick start tutorial step by step. The advanced guides and the tutorial are helpful and to master ReactJS you will need to learn these. However, for this module, you are not required to do these parts.

Individual Assignment

In this assignment, you will build a ReactJS restaurant website. To learn ReactJS, please view and complete this tutorial and read the introduction of route carefully. After creating a new React application, you will only need to modify the files in src folder and the <title> tag in /public/index.html

Building a React website is similar to playing with LEGOs. index.html is analogous to the base LEGO piece, and all the other components you build will be placed in this single div:

<div id="root"></div>

Now take a look at src/index.js. What this file does is to render a component called <App> from App.js in root div.