Instructions-Descriptions.txt

///// Requirements ////////////////////////
node, npm, npx, git
$ sudo apt install nodejs
$ sudo npm install npx -g
///////////////////////////////////////

///// Setup React //////////////////////
$ npx create-react-app .
$ npm start
/////////////////////////////////////////

///// React component ///////////////////
React component is a function that returns html. This combination between JavaScript and 
html is called JSX such as <App />. React application only renders one component <App />. So, 
we should put our custom components inside the <App /> components or other components. 

React is nice because we can build reusable components and use them in various projects.
This is fantastic! So let's build a simple Food component and pass props to it. 

In practice, data come in the form of an array from a server and components
 need to be created automatically not manually. We can use javascript map method 
 to create components magically!

 React expects a unique key for each component. So, let's define a key for each food component. 

 One important point that must be taken into account is that typechecking is so important for React components. This is
 true because sometimes we use components with wrong props and it fails to work properly without throwing an error on 
 Js console. To alleviate this proplem, there is a package called prop-types. In this commit we show how to use it with Reac
 components. 
 $ npm i prop-types

////////////////////////////////////////

//// React State //////////////////////////////////////////////////
When dealing with dynamic data, it is better to user the concept of data. 
This feature is enabled by using React.Component class. In other words, we have 
to define a class called App that extends React.Component. 

There is a method called setState() which can be used to update the state of a variable or 
component. Every time you call this method, the render method will be called automatically. 

Component lifecycle methods:
constructor  --> render --> componentDidMount --> (if setState) componentDidUpdate --> componentWillUnmount.
There are some other middle methods that are not used frequently, so I didn't mention them here.
Please refer to reactjs website for mor information. 
///////////////////////////////////////////////////////////////////

////////////////////// Movie app /////////////////////////////////////
To build the Movie app we need data. To acquire data, we use JavaScript axios function to fetch 
data from an API.
$ npm i axios
After fetching data, it is necessary to feed them to the Movie Component to show them. Also, we need to
style the different tags. It must be noted that React uses JSX which is different from html. 
In JSX, className is used instead of 'class' in html. Because 'class' is a javascript class modifier.

/////////////////////////////////////////////////////////////////////

//// How to show Website on Github //////////////////////////////////
First of all, we need to install gh-pages as below:
$ npm i gh-pages

Then, 'homepage' parameter must be added to the package.json file as:

Finally, the following configs must be addded to the package.json:

"deploy": "gh-pages -d build",
"predeploy": "npm run build",

/////////////////////////////////////////////////////////////////////