Day 3!

September 30, 2020

Looked into more in-depth into creating more complex components, JSX, react routing, context API, the spread operator, create a react app This allowed me to remember when creating components, you need to create components that do one job because we don’t want to make one component to be too complex but we also don’t want too much abstraction whereby we have 1000’s of components on our UI that isn’t necessary. The key is being precise within each component. Each refresher reminds me that React.js is nice because it allows you to apply any prop you need to the child very smoothly and similarly the spread operator does the same job. The spread operator (…) is good when we want to pass all our props to our child component however we don’t always want to pass that along so instead what we can explicitly pass along the props we need but it is good to know that the option is there.

Context is also quite similar to the spread operator whereby it allows us to send through props as context to a parent component thus allowing it to be passed onto child components without explicit defining of props within the child component.

A better example is available here: React Context Again both should be used sparingly. Due to my knowledge of Redux, I think I will be using that if needs be. But still, it is good to know. Create a React App this is what allows us to kickstart our react projects What is the api the api is the system that allows to get all our requests which links in with react routing. the routes we have with our react routers ensures that the api can go back and forth with the routes a user is requesting

React Routing … With Client-Side routing, it is now the responsibility of the Client-Side-Code, rather than the server, to handle the routing, fetching and displaying of the data in the browser. it allows to build different links on our SPA basically JSX It looks like HTML but it is made to be translated into JavaScript. We use babel a transpiler which allows the JSX we have written within our components to be translated into javascript on our web pages. There are a few transpilers ( I just like to use babel as it works with react and I believe it was developed with react as well)

https://reactjs.org/docs/jsx-in-depth.html

Medium. LinkedIn Portfolio


Written by Joanna Kalema a junior web developer learning code one line at a time.