The website can be accessed by opening the site.html file in a web browser. The source code used to generate this site can be found in the reactTutorialSite folder. To manually build the site, the middleman gem
and bundler are required. Once you have these gems installed, you can build the site by running
bundle exec middleman build inside of the reactTutorialSite folder.
https://www.taniarascia.com/getting-started-with-React/
https://Reactjs.org/tutorial/tutorial.html
https://tylermcginnis.com/Reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-React/
Introduction/Setup - Focused primarily on knowledge and understanding. Telling the reader what they need to do and giving an overview of what React is.
componentsJSX - Focused primarily on apply, but also included aspects from remember and understand (explaining what a component is for example). At the application level, showed how to use components in a React project, and provided sample code.
props-state - Included remember and understand while explaining the concepts of props and state. Then focused on apply to teach user how to use props and state in a React program. Also used analyze to connect these applications together.
formsAPI - Used analyze to draw comparisons between HTML and React. Used apply along with understand and remember to first explain the concepts to the user and then show how these concepts are used in a real React project.
Build/Deploy - Used remember to tell the user how to perform the task.
The React app was a combination of all of these above sections into a single demonstration of React's capabilities. The 'tutorial' folder is the react project folder for this demo.
Follow the instructions in the tutorial folder's README.md file to run this demo in a web browser.
Alyssa Langhals: Wrote the section for React components and JSX.
Berkay Kaplan: Explained how to get the values from the form and the usage of fetch. Created Berkay's Section.md and this was eventually used in formsAPI.md in the middleman website.
Birkan Gokbag: Wrote the section for props, and state.
Rajeev Ravi: Wrote the section for setup, static HTML page and create-React-app. Revised everyone's sections. Was also the project manager for this project.
Michael Radey: Wrote the section for building and deploying the React app. Wrote the React app demo.