It was easy to set up as React is a JavaScript(JS) framework and it comes with a lot of pre-built features but I did run into some challenges when making calls to other parts of the project for example calling the nav bar component from the homepage component. I realised quickly I didn’t understand how React components work and I was unfamiliar of the syntax. For example, in JS it was fairly straightforward designing functions and calling those functions inside other functions. React implements the idea of a ‘parent’ component and every other component being a ‘child’ of the parent. Here, things got a little bit more complicated with the introduction of Stateless Functional Components, Constructors, State and Props - where each of these belong in the code and their limitations. Some key learnings which I found useful were:

• Constructor is owned by the ‘parent’ component where you define the state and state is then passed as props to the child component. The child component cannot make changes to the Constructor - only the parent can.

• State (referred to as this.state) is created inside the component and its scope is limited to inside the component itself.

• Prop (referred to as this.props or props) is external to the component and is controlled by whatever renders the component.

This week I’ve been working on a small project requiring me to build a web application using React. I decided to use React because I haven’t had a lot of experience with it and I wanted to start with something simple to understand the concepts. I am only focusing on the front-end part using React components to build the website.

I followed the steps in https://reactjs.org/docs/create-a-new-react-app.html#create-react-app and https://reactjs.org/tutorial/tutorial.html to build the local development environment.

So far I know what components I want in the website and I’d like to include some simple animations and scroll effects.

• Components: Pages: I want to keep this simple with three main pages - a home page, about page and contact page.

• Animations: Animations make websites more interesting for the user so I wanted to include this. I wanted something simple to begin with so I looked up some packages on the internet and found the react-reveal module.

• Scroll effects: For this I decided to use the react-scroll module. This is proving to be slightly more challenging to customize.