Difference between revisions of "React"
| Line 1: | Line 1: | ||
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 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. | ||
| + | == Tutorial == | ||
[https://reactjs.org/docs/installation.html 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. | [https://reactjs.org/docs/installation.html 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. | ||
| Line 7: | Line 8: | ||
After creation, your app should look like this: | After creation, your app should look like this: | ||
my-app/ | my-app/ | ||
| − | README. | + | README.md |
node_modules/ | node_modules/ | ||
package.json | package.json | ||
| Line 20: | Line 21: | ||
index.js | index.js | ||
logo.svg | logo.svg | ||
| − | Let's take a look into the app you have created. package.json is the file that holds various metadata that is relevant to your app. This file is used to give information to npm that allows it to identify the project as well as handle the dependencies to your app. | + | Let's take a look into the app you have created. package.json is the file that holds various metadata that is relevant to your app. This file is used to give information to npm that allows it to identify the project as well as handle the dependencies to your app. For more information, see the Node.JS guide: [[Node.JS#Node.js Conventions]] |
| − | 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> | + | For your app to work, you '''cannot''' delete or rename these files: |
| − | + | *public/index.html | |
| + | *src/index.js | ||
| + | Building a React website is similar to playing with LEGOs. public/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>. You can also include javascript libraries inside the '''<head>''' tag. | ||
| + | src/index.js the Javascript entry point for your app. What this file does is to render a component called <code><App></code> from App.js in root div. | ||
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 | 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 | ||
Revision as of 21:45, 10 December 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.
Tutorial
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 quick start tutorial and read the introduction of route carefully. After creation, your app should look like this:
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
Let's take a look into the app you have created. package.json is the file that holds various metadata that is relevant to your app. This file is used to give information to npm that allows it to identify the project as well as handle the dependencies to your app. For more information, see the Node.JS guide: Node.JS#Node.js Conventions For your app to work, you cannot delete or rename these files:
- public/index.html
- src/index.js
Building a React website is similar to playing with LEGOs. public/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>
. You can also include javascript libraries inside the <head> tag.
src/index.js the Javascript entry point for your app. What this file does is to render a component called <App> from App.js in root div.
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
